diff options
Diffstat (limited to 'webapp/sass/routes')
| -rw-r--r-- | webapp/sass/routes/_about-modal.scss | 78 | ||||
| -rw-r--r-- | webapp/sass/routes/_backstage.scss | 245 | ||||
| -rw-r--r-- | webapp/sass/routes/_module.scss | 1 |
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'; |