summaryrefslogtreecommitdiffstats
path: root/webapp/sass
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/sass')
-rw-r--r--webapp/sass/responsive/_desktop.scss5
-rw-r--r--webapp/sass/responsive/_mobile.scss38
-rw-r--r--webapp/sass/responsive/_tablet.scss13
-rw-r--r--webapp/sass/routes/_backstage.scss245
-rw-r--r--webapp/sass/utils/_variables.scss2
5 files changed, 205 insertions, 98 deletions
diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss
index 1ae4b6b70..3b36fb75f 100644
--- a/webapp/sass/responsive/_desktop.scss
+++ b/webapp/sass/responsive/_desktop.scss
@@ -48,6 +48,11 @@
}
}
+ .backstage-content {
+ margin: 46px 46px 46px 150px;
+ }
+
+
.inner-wrap {
&.move--left {
.file-overlay {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 4e77849ce..38476485d 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -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 {
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 6863e660b..db2a8d7b9 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -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;
}
diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss
index 70bab99cb..729c8c912 100644
--- a/webapp/sass/routes/_backstage.scss
+++ b/webapp/sass/routes/_backstage.scss
@@ -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;
+.backstage-sidebar {
+ height: 100%;
left: 0;
+ padding: 50px 20px;
+ position: absolute;
width: 260px;
- height: 100%;
- background-color: #f2f2f2;
- padding-bottom: 20px;
- padding-left: 20px;
- padding-right: 20px;
- padding-top: 45px;
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;
+
+ &:last-child {
+ border: none;
+ }
- .details {
+ .item-details {
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
+ }
- .details-row + .details-row {
- margin-top: 15px;
- }
+ .item-details__row + .item-details__row {
+ @include clearfix;
+ margin-top: 10px;
+ text-overflow: ellipsis;
+ }
- .name {
- font-weight: bold;
- margin-bottom: 1em;
- }
+ .item-details__name {
+ font-weight: 600;
+ margin-bottom: 1em;
+ }
- .type {
- margin-left: 6px;
- }
+ .item-details__type {
+ margin-left: 6px;
+ }
- .description {
- color: gray;
- margin-bottom: 1em;
- }
+ .item-details__description {
+ color: $dark-gray;
+ margin-bottom: 1em;
}
- .actions {
+ .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;
- }
+.add-integration__image {
+ height: 80px;
+ width: 80px;
+}
- &__title {
- color: black;
- margin-bottom: 10px;
- }
+.add-integration__title {
+ color: $black;
+ margin-bottom: 10px;
+}
- &__description {
- color: gray;
- }
+.add-integration__description {
+ color: $dark-gray;
}
diff --git a/webapp/sass/utils/_variables.scss b/webapp/sass/utils/_variables.scss
index 345ab11e8..53004520e 100644
--- a/webapp/sass/utils/_variables.scss
+++ b/webapp/sass/utils/_variables.scss
@@ -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);
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-10-02 00:35:22 +0000