diff options
author | Michael Davis <michael.s.davis@ibm.com> | 2017-05-01 10:30:38 -0500 |
---|---|---|
committer | Patrick Williams <patrick@stwcx.xyz> | 2017-09-20 12:43:05 -0500 |
commit | 51946552fc8c6ac9b677ccf07949e837e9caaf52 (patch) | |
tree | 968aa741ed910e1b26e35c595b45352a0ab5e0a2 /app/common/styles | |
parent | a960c8c72e56a22d083654692c18f1b229cc10a7 (diff) | |
download | phosphor-webui-51946552fc8c6ac9b677ccf07949e837e9caaf52.tar.gz phosphor-webui-51946552fc8c6ac9b677ccf07949e837e9caaf52.zip |
Misc CSS fixes
* set max content width to 960px
* created mixin for bold font
* move app-header content to global header
* minor global changes
* changed input alignment for network config inputs
* added pop-out button class
* changed lightgrey color
* fixed accordion header actions responsiveness
* fixed input box border colors
Change-Id: Iffe26d526439d7f2bb6808528a975ab7374ff1b2
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
Diffstat (limited to 'app/common/styles')
21 files changed, 497 insertions, 218 deletions
diff --git a/app/common/styles/base/buttons.scss b/app/common/styles/base/buttons.scss index 9c5ba92..2f53391 100644 --- a/app/common/styles/base/buttons.scss +++ b/app/common/styles/base/buttons.scss @@ -1,10 +1,9 @@ button, .button, input[type="submit"], .submit { - font-weight: bold; font-size: 1em; - @include fontFamily; + @include fontFamilyBold; text-transform: none; border-radius: 3px; - padding: .8rem 3.5rem .5rem; + padding: .5rem 2rem .5rem; height: auto; border: 0; overflow: hidden; @@ -28,7 +27,7 @@ button, .button, input[type="submit"], .submit { input[type="submit"] { color: $primebtn__text; background: $primebtn__bg; - min-height: 50px; + min-height: 40px; &:hover { background: lighten($primebtn__bg, 8%); @include fastTransition-all; @@ -58,7 +57,7 @@ input[type="submit"] { color: $secbtn__text; background: transparent; border: 2px solid $secbtn__border; - min-height: 50px; + min-height: 40px; &:hover { background: $lightbg__accent; cursor: pointer; @@ -90,3 +89,34 @@ input[type="submit"] { margin-top: -3px; } } + +.btn-pop-out { + position: relative; + padding: 0 0 1em 2em; + color: $black; + &:hover { + text-decoration: underline; + } + &:before { + content: ''; + position: absolute; + left: 0; + top: 3px; + width: 25px; + height: 20px; + display: inline-block; + border: 1px solid $black; + border-top: 4px solid $black; + } + &:after { + content: '\2794'; + position: absolute; + transform: rotate(-45deg); + font-size: .9em; + font-weight: 700; + vertical-align: middle; + display: inline-block; + left: 11px; + top: 4px; + } +}
\ No newline at end of file diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss index 76f65a9..a5a9d1b 100644 --- a/app/common/styles/base/colors.scss +++ b/app/common/styles/base/colors.scss @@ -3,11 +3,13 @@ $white: #ffffff; $black: #333; $darkgrey: #666; $medgrey: #d7dbe0; -$lightgrey: #ccc; +$lightgrey: #f5f7fa; $lightblue: #f0f2f5; +$medblue: #3f71ec; $purple: #5A3EC8; $darkpurple: #20214f; -$field__disabled: #d8d8d8; +$field__disabled: #e6e6e6; +$field__focus: #3C6DEF; $btn__disabled-txt: #a6a5a6; $btn__disabled-bg: #d8d8d8; @@ -69,7 +71,7 @@ $not-present: $medium-lightbg; // Links $links: #648FFF; $links__hover: $lightbg__primary; -$links__visited: $darkbg__primary; +$links__visited: #8ea7ea; $links__disabled: rgba(27, 40, 52, 0.70); // Navigation diff --git a/app/common/styles/base/core.scss b/app/common/styles/base/core.scss index 13ba9e6..3dc8fea 100644 --- a/app/common/styles/base/core.scss +++ b/app/common/styles/base/core.scss @@ -16,7 +16,7 @@ a { color: $links__visited; } &:hover { - color: $links__hover; + text-decoration: underline; } :focus { color: $links; diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss index b49c5b2..1157fa5 100644 --- a/app/common/styles/base/forms.scss +++ b/app/common/styles/base/forms.scss @@ -19,7 +19,7 @@ input[type='url'], input[type='text'], textarea { border-radius: 0px; - border: 1px solid $lightgrey; + border: 1px solid $medgrey; height: 3.1em; margin: 0 0 1em 0; background: $white; @@ -27,17 +27,29 @@ textarea { transition: none !important; &:focus { border-color: $lightbg__accent; - border-bottom: 5px solid $lightbg__primary; + box-shadow: 0 -5px $field__focus inset; } - &:disabled, .disabled { + &:disabled, + .disabled { background: $field__disabled; border: 1px solid $lightbg__grey; } &.input__error { - border-color: $error-color; + box-shadow: 0 -5px $error-color inset; + color: $error-color; + &:focus { + box-shadow: 0 -5px $field__focus inset; + } } } +input[readonly], +input[readonly]:focus{ + box-shadow: 0 0 0; + background: $field__disabled; + border: 1px solid $lightbg__grey; +} + textarea { padding: .2em; height: auto;} input[type="submit"], .submit { diff --git a/app/common/styles/base/foundation.scss b/app/common/styles/base/foundation.scss index 910be7a..9c31f8f 100644 --- a/app/common/styles/base/foundation.scss +++ b/app/common/styles/base/foundation.scss @@ -814,7 +814,7 @@ select[multiple] { display: block !important; } } .row { - max-width: 90rem; + max-width: 60.38rem; //960px margin-right: auto; margin-left: auto; } .row::before, .row::after { diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss index acc8fd4..e29a4fc 100644 --- a/app/common/styles/base/mixins.scss +++ b/app/common/styles/base/mixins.scss @@ -30,11 +30,39 @@ font-weight: 200; } +@mixin fontFamilyBold { + font-family: Helvetica, Arial, Verdana, sans-serif; + font-weight: 700; +} + @mixin fontCourierBold { font-family: "Courier New", Helvetica, arial, sans-serif; font-weight: 700; } +//Navigation icons +@mixin navIcons { + color: $white; + fill: $white; + max-height: 40px; + stroke-width: .5; + display: block; + width: 40px; + margin: 0 auto .5em auto; + .st0 { + fill: none; + stroke: #fff; + stroke-width: 2; + stroke-miterlimit: 10; + } + .st1 { + fill: none; + stroke: #fff; + stroke-width: 4; + stroke-miterlimit: 10; + } +} + //Transitions mixin @mixin fastTransition-all { transition: all .5s ease; @@ -71,6 +99,10 @@ min-width: calc(100% * (1/2) - 5px); } +@mixin vertCenter { + top: 50%; + transform: translateY(-50%); +} @mixin indeterminate-bar { background-image: repeating-linear-gradient(-45deg, rgba(251, 234, 174, 0.35), rgba(251, 234, 174, 0.35) 25px, rgba(244, 176, 0, 0.45) 25px, rgba(244, 176, 0, 0.45) 50px); diff --git a/app/common/styles/base/typography.scss b/app/common/styles/base/typography.scss index dfad5a4..a9b65b2 100644 --- a/app/common/styles/base/typography.scss +++ b/app/common/styles/base/typography.scss @@ -52,4 +52,5 @@ h5, .h5 { .courier-bold { font-family: "Courier New", Helvetica, arial, sans-serif; font-weight: 700; -}
\ No newline at end of file + margin-bottom: 0; +} diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss index 5982d0f..80449f5 100644 --- a/app/common/styles/base/utility.scss +++ b/app/common/styles/base/utility.scss @@ -53,19 +53,19 @@ } .no-margin { - margin: 0px !important; + margin: 0 !important; } .no-padding { - padding:0px !important; + padding:0 !important; } .no-bottom-margin { - margin-bottom: 0px !important; + margin-bottom: 0 !important; } .no-top-margin { - margin-top: 0px !important; + margin-top: 0 !important; } .btm-border-grey { diff --git a/app/common/styles/components/form-elements.scss b/app/common/styles/components/form-elements.scss index e101385..0515926 100644 --- a/app/common/styles/components/form-elements.scss +++ b/app/common/styles/components/form-elements.scss @@ -3,7 +3,10 @@ position: relative; padding: .5em .8em; margin-top: -10px; - border: 1px solid $lightgrey; + border: 1px solid $medgrey; + min-width: 70px; + padding-right: 25px; + font-weight: 400; &.active, &:hover { background: $dropdown__focus-bg; @@ -13,8 +16,11 @@ display: inline-block; margin-left: 5px; font-size: .8em; - transform: rotate(90deg); + transform: translateY(-50%) rotate(90deg); color: $lightbg__primary; + position: absolute; + right: .8em; + top: 50%; } } @@ -41,6 +47,7 @@ padding: 1em 1em 1em 1.8em; text-align: left; width: 100%; + font-weight: 400; &:hover { background: $dropdown__focus-bg; } @@ -81,15 +88,14 @@ // Checkbox -.control-check { - font-size: 18px; +.control-check, +.control-radio { position: relative; display: inline-block; margin-bottom: 15px; - padding-left: 1em; padding-top: 7px; cursor: pointer; - line-height: .5; + line-height: initial; } .control-check input { @@ -108,10 +114,6 @@ border: 1px solid $lightgrey; } -.control--radio .control__indicator { - border-radius: 50%; -} - /* Hover and focus states */ .control-check:hover input ~ .control__indicator, .control-check input:focus ~ .control__indicator { @@ -169,4 +171,97 @@ .control-check input:disabled ~ .control__indicator:after { border-color: $white; color: $white; +} + +// Radio Buttons +.control-radio { + padding-left: 3em; +} +.control-radio.disabled:hover { + cursor: default; +} +.control-radio .control__indicator { + position: absolute; + top: 2px; + left: 0; + width: 30px; + height: 30px; + background: $white; + border: 2px solid $darkgrey; +} +.control-radio input{ + position: absolute; + z-index: -1; + opacity: 0; +} + +.control-radio .control__indicator { + border-radius: 50%; +} + +/* Hover and focus states */ +.control-radio input:focus ~ .control__indicator { + background: $primebtn__bg; + outline: 1px solid $primebtn__bg; + outline-offset: 3px; +} + +.control-radio input:checked ~ .control__indicator { + background: $lightbg__accent; + border: 2px solid $primebtn__bg; +} + +/* Disabled state */ +.control-radio input:disabled ~ .control__indicator{ + pointer-events: none; + opacity: .6; + background: #ccc; + border: 1px solid $lightgrey; +} + +.control-radio:hover > input:disabled ~ .control__indicator{ + outline: 0; +} + +.control-radio:hover input:disabled { + cursor: default; +} + +/* mark */ +.control__indicator:after { + position: absolute; + display: none; + content: ''; +} + +/* Show mark */ +.control-radio input:checked ~ .control__indicator:after { + display: block; +} + +/* Disabled tick colour */ +.control-radio input:disabled ~ .control__indicator:after{ + border-color: $white; + color: $white; +} + +/* Radio button inner circle */ +.control-radio .control__indicator:after { + top: 4px; + left: 4px; + width: 18px; + height: 18px; + border-radius: 50%; + background: $primebtn__bg; +} + +.control-radio:hover .control__indicator:after { + display: block; +} + +/* Disabled circle colour */ +.control-radio input:disabled ~ .control__indicator:after { + background: #7b7b7b; + width: 20px; + height: 20px; }
\ No newline at end of file diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss index e69de29..63d6cf7 100644 --- a/app/common/styles/components/table.scss +++ b/app/common/styles/components/table.scss @@ -0,0 +1,91 @@ + +// Table Header +.table-header { + width: 100%; + color: $black; + line-height: 30px; + padding: 10px 15px; + + @include mediaQuery(medium) { + padding: 15px 20px; + } + + @include mediaQuery(large) { + padding: 15px 30px; + } +} + + +// Table +.table { + width: 100%; +} + +.table__row { + display: flex; + width: 100%; + max-width: calc(100vw - 30px); + flex-wrap: wrap; + border-bottom: 1px solid $medgrey; + border-left: 1px solid $medgrey; + border-right: 1px solid $medgrey; + padding: 5px 0; + + @include mediaQuery(small) { + padding: 0; + } +} + +.table__cell { + flex: 0 0 100%; + line-height: 20px; + padding: 5px 15px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + @include mediaQuery(small) { + flex: 1; + padding: 15px 20px; + } + + @include mediaQuery(large) { + padding: 15px 30px; + } +} + +.table__cell-label { + display: inline-block; + font-weight: 700; + min-width: 50%; + padding-right: 15px; + + @include mediaQuery(small) { + display: none; + } +} + +// Table Head +.table__head { + .table__row { + display: none; + font-weight: 700; + border-bottom: 1px solid $medgrey; + background-color: $darkbg__primary; + color: $white; + + @include mediaQuery(small) { + display: flex; + } + + .table__cell { + @include fastTransition-all(); + position: relative; + + &:last-child { + border: 0; + } + } + } +} + diff --git a/app/common/styles/directives/app-header.scss b/app/common/styles/directives/app-header.scss index 9b7dff5..e69de29 100644 --- a/app/common/styles/directives/app-header.scss +++ b/app/common/styles/directives/app-header.scss @@ -1,163 +0,0 @@ -$logoHeight: 30px; -$logoMaxHeight: 100px; -$logoMaxWidth: 125px; - -#header__wrapper { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 100; -} - -.app__version { - margin-left: 1em; - display: none; - @include mediaQuery(x-small) { - display: inline-block; - position: absolute; - top: 50%; - transform: translateY(-50%); - } -} - -header { - position: relative; - background: #000; - color: $white; - overflow: hidden; -} - -.header__logout { - float: right; - display: inline-block; - color: $white; - font-size: .9em; - text-decoration: none; - padding: 1em; - &:visited { - color: $white; - } -} - -.header__functions-wrapper { - color: $white; - background: $darkbg__primary; - padding: 0 1.1em; - box-sizing: border-box; - display: block; - position: relative; - overflow: hidden; - min-height: 5em; - #header__server-name { - //margin-top: .8em; - font-size: 1.5em; - font-weight: 500; - color: $white; - padding: .9em; - height: 100%; - background: transparent; - max-width: 350px; - white-space: nowrap; - } - .logo__wrapper { - padding-top: .5em; - //position: absolute; - //top: 50%; - //transform: translateY(-50%); - } - - #header__logo { - vertical-align: middle; - margin: 1em; - float: left; - height: $logoHeight; //required for <SVG> logos - can remove if using img - max-height: $logoMaxHeight; - max-width: $logoMaxWidth; - width: auto; - } - #header__funct-icon { - display: block; - font-size: 2.3em; - color: $white; - padding: 0; - &:before { - content: '\2261'; - line-height: .5; - font-size: 2em; - padding: 0 .3em; - } - @include mediaQuery(medium) { - display: none; - } - } - - .header__functions { - position: absolute; - top: 0; - right: 0; - bottom: 0; - background: $darkbg__primary; - z-index: 100; - @include fastTransition-all; - span { - display: block; - color: $white; - font-size: 1em; - } - a, p, button { - display: block; - float: left; - text-decoration: none; - border-left: 1px solid #384456; - color: $lightgrey; - margin: 0; - padding: 1.250em 1.688em; - height: 100%; - font-size: 0.875em; - line-height: 1; - > span { - font-size: 1rem; - font-weight: bold; - } - } - } - - // hide/show header functions based on screen size - .header__functions > #header__server-health { - display: none; - @include mediaQuery(small) { - display: block; - } - } - - .header__functions > .header__refresh { - display: none; - @include mediaQuery(medium) { - display: block; - } - } - - .header__functions { - .header__refresh { - color: $lightgrey; - line-height: 1.8; - margin-top: -4px; - } - } - .header__server-power, - .header__page-refresh { - &:hover { - background: rgba(60, 109, 240, .4); - } - } - .header__page-refresh { - img { - stroke: $white; - height: 22px; - width: 24px; - } - } -} - -// end header__functions-wrapper diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss index 4591f5c..496fbf7 100644 --- a/app/common/styles/directives/app-navigation.scss +++ b/app/common/styles/directives/app-navigation.scss @@ -17,6 +17,10 @@ $nav__seclvlWidth: 240px; li { margin: 0; } + //svg icons + .nav-icon { + @include navIcons; + } .button, button, a { background: transparent; height: auto; @@ -31,12 +35,8 @@ $nav__seclvlWidth: 240px; white-space: normal; border-radius: 0; text-decoration: none; - .nav__icon { - color: $white; - max-height: 40px; - stroke-width: .5; - margin-bottom: -.5em; - } + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; a { margin-bottom: 5px; } @@ -44,7 +44,7 @@ $nav__seclvlWidth: 240px; margin: 1em 0 0 0; display: block; font-size: .9em; - font-weight: normal; + font-weight: 700; line-height: 1rem; } @@ -60,24 +60,50 @@ $nav__seclvlWidth: 240px; &:hover { background: $nav__second-level-color; fill: $black; - color: $black; + color: $medblue; padding: 1em; border-radius: 0; + border-top: 1px solid $medgrey; + border-bottom: 1px solid $medgrey; .nav__icon-help__outer { stroke: $black; } .nav__icon-help__inner { fill: $lightbg__primary; } + .nav-icon { + fill: $medblue; + color: $medblue; + .st0 { + stroke: $medblue; + } + .st1 { + fill: $medblue; + color: $medblue; + stroke: $medblue; + } + } } } .opened { background: $nav__second-level-color; fill: $black; - color: $black; + color: $medblue; .nav__icon-help__outer { stroke: $lightbg__primary; } + .nav-icon { + fill: $medblue; + color: $medblue; + .st0 { + stroke: $medblue; + } + .st1 { + fill: $medblue; + color: $medblue; + stroke: $medblue; + } + } } } diff --git a/app/common/styles/elements/accordion.scss b/app/common/styles/elements/accordion.scss index c3d9e0f..7e10227 100644 --- a/app/common/styles/elements/accordion.scss +++ b/app/common/styles/elements/accordion.scss @@ -8,11 +8,8 @@ color: $white; margin-left: 0; .event__actions { - margin-top: 1em; margin-right: 10px; - @include mediaQuery(medium) { - margin-top: -6px; - } + margin-top: -6px; @include mediaQuery(large) { margin-right: -20px; } diff --git a/app/common/styles/elements/content-search.scss b/app/common/styles/elements/content-search.scss index af14e05..b1aae36 100644 --- a/app/common/styles/elements/content-search.scss +++ b/app/common/styles/elements/content-search.scss @@ -13,7 +13,7 @@ #content__search-input { margin: 0; - border: 1px solid $lightgrey; + border: 1px solid $medgrey; padding-left: 40px; padding-right: 5px; &:focus { diff --git a/app/common/styles/elements/export.scss b/app/common/styles/elements/export.scss index 45b910a..ea0ab92 100644 --- a/app/common/styles/elements/export.scss +++ b/app/common/styles/elements/export.scss @@ -1,19 +1,17 @@ //Export button .btn-export { - text-transform: capitalize; color: $black; font-size: .9em; font-weight: 700; position: relative; padding: 0 0 1em 2em; margin-right: .6em; + text-decoration: none; + margin-top: 7px; &:hover { text-decoration: underline; } } -.btn-export { - margin-top: 7px; -} .btn-export:before { content: '\21E5'; position: absolute; diff --git a/app/common/styles/elements/inline-confirm.scss b/app/common/styles/elements/inline-confirm.scss index f2da19e..fe23cb8 100644 --- a/app/common/styles/elements/inline-confirm.scss +++ b/app/common/styles/elements/inline-confirm.scss @@ -3,7 +3,6 @@ .inline__confirm { position: absolute; top: 0; - right: 0; transform: translateY(-103%); width: 100%; height: 100%; @@ -22,10 +21,6 @@ // Power confirmation buttons .inline__confirm-buttons { - position: absolute; - top: 50%; - right: 1em; - transform: translateY(-50%); .btn-primary { background: transparent; border: 2px solid $white; @@ -46,7 +41,6 @@ // confirmation message .inline__confirm-message { display: inline-block; - max-width: 50%; } // Power confirmation message icon diff --git a/app/common/styles/elements/status.scss b/app/common/styles/elements/status.scss index 22d99b8..7d9b57a 100644 --- a/app/common/styles/elements/status.scss +++ b/app/common/styles/elements/status.scss @@ -3,6 +3,7 @@ content: '\25CF'; display: inline-block; font-size: 2em; + color: $status-ok; margin-right: .1em; transform: translateY(2px); @include slowTransition-all; @@ -40,7 +41,6 @@ } .status-light__good { - color: $status-ok; &::before { @include status-light__good; } diff --git a/app/common/styles/index.scss b/app/common/styles/index.scss index 13804a7..4288740 100644 --- a/app/common/styles/index.scss +++ b/app/common/styles/index.scss @@ -1,4 +1,3 @@ - @import "./base/index.scss"; @import "./elements/index.scss"; @import "./components/index.scss"; diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss index 1547e30..13dbe44 100644 --- a/app/common/styles/layout/content.scss +++ b/app/common/styles/layout/content.scss @@ -7,6 +7,7 @@ $nav__seclvlWidth: 240px; position: relative; border-bottom: 1px solid $lightbg__grey; margin: 1.625em 0 1.2em 0; + padding-left: 0; .h4 { padding: 0; margin: 0 0 .5em 0; diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss new file mode 100644 index 0000000..9b7dff5 --- /dev/null +++ b/app/common/styles/layout/header.scss @@ -0,0 +1,163 @@ +$logoHeight: 30px; +$logoMaxHeight: 100px; +$logoMaxWidth: 125px; + +#header__wrapper { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; +} + +.app__version { + margin-left: 1em; + display: none; + @include mediaQuery(x-small) { + display: inline-block; + position: absolute; + top: 50%; + transform: translateY(-50%); + } +} + +header { + position: relative; + background: #000; + color: $white; + overflow: hidden; +} + +.header__logout { + float: right; + display: inline-block; + color: $white; + font-size: .9em; + text-decoration: none; + padding: 1em; + &:visited { + color: $white; + } +} + +.header__functions-wrapper { + color: $white; + background: $darkbg__primary; + padding: 0 1.1em; + box-sizing: border-box; + display: block; + position: relative; + overflow: hidden; + min-height: 5em; + #header__server-name { + //margin-top: .8em; + font-size: 1.5em; + font-weight: 500; + color: $white; + padding: .9em; + height: 100%; + background: transparent; + max-width: 350px; + white-space: nowrap; + } + .logo__wrapper { + padding-top: .5em; + //position: absolute; + //top: 50%; + //transform: translateY(-50%); + } + + #header__logo { + vertical-align: middle; + margin: 1em; + float: left; + height: $logoHeight; //required for <SVG> logos - can remove if using img + max-height: $logoMaxHeight; + max-width: $logoMaxWidth; + width: auto; + } + #header__funct-icon { + display: block; + font-size: 2.3em; + color: $white; + padding: 0; + &:before { + content: '\2261'; + line-height: .5; + font-size: 2em; + padding: 0 .3em; + } + @include mediaQuery(medium) { + display: none; + } + } + + .header__functions { + position: absolute; + top: 0; + right: 0; + bottom: 0; + background: $darkbg__primary; + z-index: 100; + @include fastTransition-all; + span { + display: block; + color: $white; + font-size: 1em; + } + a, p, button { + display: block; + float: left; + text-decoration: none; + border-left: 1px solid #384456; + color: $lightgrey; + margin: 0; + padding: 1.250em 1.688em; + height: 100%; + font-size: 0.875em; + line-height: 1; + > span { + font-size: 1rem; + font-weight: bold; + } + } + } + + // hide/show header functions based on screen size + .header__functions > #header__server-health { + display: none; + @include mediaQuery(small) { + display: block; + } + } + + .header__functions > .header__refresh { + display: none; + @include mediaQuery(medium) { + display: block; + } + } + + .header__functions { + .header__refresh { + color: $lightgrey; + line-height: 1.8; + margin-top: -4px; + } + } + .header__server-power, + .header__page-refresh { + &:hover { + background: rgba(60, 109, 240, .4); + } + } + .header__page-refresh { + img { + stroke: $white; + height: 22px; + width: 24px; + } + } +} + +// end header__functions-wrapper diff --git a/app/common/styles/layout/index.scss b/app/common/styles/layout/index.scss index 6c33f26..4183519 100644 --- a/app/common/styles/layout/index.scss +++ b/app/common/styles/layout/index.scss @@ -1 +1,2 @@ +@import 'header'; @import 'content'; |