summaryrefslogtreecommitdiffstats
path: root/webapp/sass/routes
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/sass/routes')
-rw-r--r--webapp/sass/routes/_about-modal.scss78
-rw-r--r--webapp/sass/routes/_backstage.scss245
-rw-r--r--webapp/sass/routes/_module.scss1
3 files changed, 229 insertions, 95 deletions
diff --git a/webapp/sass/routes/_about-modal.scss b/webapp/sass/routes/_about-modal.scss
new file mode 100644
index 000000000..98119c8aa
--- /dev/null
+++ b/webapp/sass/routes/_about-modal.scss
@@ -0,0 +1,78 @@
+@charset 'UTF-8';
+
+.modal {
+ .about-modal {
+ .modal-header {
+ background: transparent;
+ border: none;
+ color: inherit;
+ padding: 20px 25px 0;
+
+ .close {
+ color: inherit;
+ font-weight: normal;
+ right: 15px;
+ }
+
+ .modal-title {
+ color: inherit;
+ font-size: 16px;
+ }
+ }
+
+ .modal-body {
+ padding: 20px 25px 5px;
+ }
+
+ .about-modal__content {
+ @include clearfix;
+ @include display-flex;
+ @include flex-direction(row);
+ padding: 1em 0 3em;
+ }
+
+ .about-modal__copyright {
+ @include opacity(.6);
+ margin-top: .5em;
+ }
+
+ .about-modal__footer {
+ font-size: 13.5px;
+ }
+
+ .about-modal__title {
+ line-height: 1.5;
+ margin: 0 0 10px;
+ }
+
+ .about-modal__subtitle {
+ @include opacity(.6);
+ }
+
+ .about-modal__hash {
+ @include opacity(.4);
+ font-size: .75em;
+ text-align: right;
+
+ p {
+ &:first-child {
+ float: left;
+ }
+ }
+ }
+
+ .about-modal__logo {
+ @include opacity(.9);
+ padding: 0 40px 0 20px;
+
+ svg {
+ height: 125px;
+ width: 125px;
+ }
+
+ path {
+ fill: inherit;
+ }
+ }
+ }
+}
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/routes/_module.scss b/webapp/sass/routes/_module.scss
index b76dd147f..4f3f6f9cd 100644
--- a/webapp/sass/routes/_module.scss
+++ b/webapp/sass/routes/_module.scss
@@ -1,4 +1,5 @@
// Only for combining all the files in this folder
+@import 'about-modal';
@import 'access-history';
@import 'activity-log';
@import 'admin-console';