PLT-2395 - Improvements to backstage css
Этот коммит содержится в:
Asaad Mahmood
коммит произвёл
Christopher Speller
Christopher Speller
родитель
94ab36500f
Коммит
d7f394a49b
@@ -48,6 +48,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.backstage-content {
|
||||
margin: 46px 46px 46px 150px;
|
||||
}
|
||||
|
||||
|
||||
.inner-wrap {
|
||||
&.move--left {
|
||||
.file-overlay {
|
||||
|
||||
@@ -1,6 +1,16 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.backstage-filters {
|
||||
display: block;
|
||||
|
||||
.backstage-filter__search {
|
||||
border-bottom: 1px solid $light-gray;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.signup-team__container {
|
||||
font-size: 1em;
|
||||
}
|
||||
@@ -675,9 +685,9 @@
|
||||
}
|
||||
|
||||
.sidebar--right {
|
||||
width: 100%;
|
||||
right: 0;
|
||||
@include translate3d(100%, 0, 0);
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
|
||||
&.move--left {
|
||||
@@ -853,6 +863,30 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.backstage-header {
|
||||
h1 {
|
||||
float: none;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.add-integrations-link {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.add-integration {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.backstage-list__item {
|
||||
display: block;
|
||||
|
||||
.actions {
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
.settings-modal {
|
||||
.settings-table {
|
||||
|
||||
@@ -15,6 +15,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.backstage-content {
|
||||
margin: 30px;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.backstage-sidebar {
|
||||
height: auto;
|
||||
padding: 30px 15px 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.help__format-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,103 +1,106 @@
|
||||
.backstage {
|
||||
background-color: #f2f2f2;
|
||||
.backstage-content {
|
||||
background-color: $bg--gray;
|
||||
height: 100%;
|
||||
padding-left: 260px;
|
||||
padding-top: 45px;
|
||||
margin: 46px auto;
|
||||
max-width: 960px;
|
||||
padding-left: 135px;
|
||||
}
|
||||
|
||||
.backstage__navbar {
|
||||
background: white;
|
||||
border-bottom: lightgray 1px solid;
|
||||
margin: 0 -15px;
|
||||
padding: 10px;
|
||||
.backstage-navbar {
|
||||
background: $white;
|
||||
border-bottom: 1px solid $light-gray;
|
||||
padding: 10px 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.backstage__navbar__back {
|
||||
color: black;
|
||||
.backstage-navbar__back {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
.fa {
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.backstage__sidebar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 260px;
|
||||
.backstage-sidebar {
|
||||
height: 100%;
|
||||
background-color: #f2f2f2;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 45px;
|
||||
left: 0;
|
||||
padding: 50px 20px;
|
||||
position: absolute;
|
||||
width: 260px;
|
||||
z-index: 5;
|
||||
|
||||
ul {
|
||||
padding: 0px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.backstage__sidebar__category {
|
||||
border: lightgray 1px solid;
|
||||
.backstage-sidebar__category {
|
||||
border: 1px solid $light-gray;
|
||||
|
||||
.category-title {
|
||||
color: gray;
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
line-height: 36px;
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.category-title--active {
|
||||
color: black;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.category-title__text {
|
||||
position: absolute;
|
||||
left: 2em;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sections {
|
||||
background: white;
|
||||
border-top: lightgray 1px solid;
|
||||
background: $white;
|
||||
border-top: 1px solid $light-gray;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
.section-title,
|
||||
.subsection-title {
|
||||
display: block;
|
||||
font-size: .95em;
|
||||
line-height: 29px;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.subsection {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.subsection-title {
|
||||
display: block;
|
||||
padding-left: 3em;
|
||||
}
|
||||
|
||||
.section-title--active, .subsection-title--active {
|
||||
background-color:#2388d6;
|
||||
color: white;
|
||||
.section-title--active,
|
||||
.subsection-title--active {
|
||||
background-color: $primary-color;
|
||||
color: $white;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.backstage__sidebar__category + .backstage__sidebar__category {
|
||||
border-top-width: 0px;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.installed-integrations {
|
||||
height: 100%;
|
||||
max-width: 958px;
|
||||
}
|
||||
|
||||
.backstage__header {
|
||||
.backstage-header {
|
||||
@include clearfix;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
|
||||
.text {
|
||||
display: inline;
|
||||
h1 {
|
||||
float: left;
|
||||
font-size: 20px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.add-integrations-link {
|
||||
@@ -105,21 +108,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
.installed-integrations__filters {
|
||||
.backstage-filters {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 8px;
|
||||
width: 100%;
|
||||
|
||||
.type-filters {
|
||||
.backstage-filters__sort {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
line-height: 30px;
|
||||
|
||||
.type-filter {
|
||||
&--selected {
|
||||
color: black;
|
||||
.filter-sort {
|
||||
text-decoration: none;
|
||||
|
||||
&.filter-sort--active {
|
||||
color: inherit;
|
||||
cursor: default;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -129,84 +133,135 @@
|
||||
}
|
||||
}
|
||||
|
||||
.filter-box {
|
||||
.backstage-filter__search {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
width: 270px;
|
||||
|
||||
.fa {
|
||||
@include opacity(.4);
|
||||
left: 11px;
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
input {
|
||||
background: $white;
|
||||
border-bottom: none;
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.installed-integrations__list {
|
||||
background-color: white;
|
||||
border: lightgray 1px solid;
|
||||
padding-bottom: 30px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
padding-top: 10px;
|
||||
.backstage-list {
|
||||
background-color: $white;
|
||||
border: 1px solid $light-gray;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.installed-integrations__item {
|
||||
border-bottom: lightgray 1px solid;
|
||||
.backstage-list__item {
|
||||
border-bottom: 1px solid $light-gray;
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
padding: 20px 15px;
|
||||
|
||||
.details {
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.item-details {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.details-row + .details-row {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.type {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: gray;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
.item-details__row + .item-details__row {
|
||||
@include clearfix;
|
||||
margin-top: 10px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-details__name {
|
||||
font-weight: 600;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.item-details__type {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.item-details__description {
|
||||
color: $dark-gray;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.list-item__actions {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-integration-option {
|
||||
background-color: white;
|
||||
border: lightgray 1px solid;
|
||||
// Backstage Form
|
||||
|
||||
.backstage-form {
|
||||
background-color: $white;
|
||||
border: 1px solid $light-gray;
|
||||
padding: 40px 30px 30px;
|
||||
|
||||
label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background: $white;
|
||||
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.backstage-form__footer {
|
||||
border-top: 1px solid $light-gray;
|
||||
margin-top: 2.5em;
|
||||
padding-top: 1.8em;
|
||||
text-align: right;
|
||||
|
||||
.has-error {
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.add-integration {
|
||||
background-color: $white;
|
||||
border: 1px solid $light-gray;
|
||||
display: inline-block;
|
||||
height: 210px;
|
||||
margin-right: 30px;
|
||||
margin: 0 30px 20px 0;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
width: 250px;
|
||||
|
||||
&:hover {
|
||||
color: default;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: black;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
|
||||
.add-integration__image {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.add-integration__title {
|
||||
color: $black;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.add-integration__description {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ $white: rgb(255, 255, 255);
|
||||
$black: rgb(0, 0, 0);
|
||||
$red: rgb(229, 101, 101);
|
||||
$yellow: rgb(255, 255, 0);
|
||||
$light-gray: rgba(0, 0, 0, .06);
|
||||
$light-gray: rgba(0, 0, 0, .15);
|
||||
$gray: rgba(0, 0, 0, .3);
|
||||
$dark-gray: rgba(0, 0, 0, .5);
|
||||
|
||||
|
||||
Ссылка в новой задаче
Block a user