diff options
19 files changed, 375 insertions, 211 deletions
diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss index 3699521..f04e827 100644 --- a/app/common/styles/base/forms.scss +++ b/app/common/styles/base/forms.scss @@ -1,28 +1,31 @@ -label, legend { - font-size:1em; +label, +legend { + font-size: 1em; font-weight: 300; margin: 0; .error { - font-size: .9em; + font-size: 0.9em; } } -.label__helper-text { +// TODO: Start replacing use of label__helper-text +.label__helper-text, +.form__helper-text { color: $text-02; line-height: 1.2; font-size: 0.9em; margin-bottom: 0.4em; } -input[type='email'], -input[type='number'], -input[type='password'], -input[type='search'], -input[type='tel'], -input[type='url'], -input[type='text'], -input[type='date'], -input[type='time'], +input[type="email"], +input[type="number"], +input[type="password"], +input[type="search"], +input[type="tel"], +input[type="url"], +input[type="text"], +input[type="date"], +input[type="time"], textarea { border-radius: 0px; border: 1px solid $border-color-02; @@ -66,37 +69,56 @@ textarea { } .form-error { - margin-bottom: .7em; + margin-bottom: 0.7em; font-size: 0.8rem; color: $status-error; - height:1rem; + height: 1rem; display: block; visibility: hidden; + // TODO: Create state rulesets rather than relying on one off solutions .visible { visibility: visible; } } //Foundation overwrite -[type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea { +[type="color"], +[type="date"], +[type="datetime-local"], +[type="datetime"], +[type="email"], +[type="month"], +[type="number"], +[type="password"], +[type="search"], +[type="tel"], +[type="text"], +[type="time"], +[type="url"], +[type="week"], +textarea { border-color: $border-color-02; } input[readonly], -input[readonly]:focus{ +input[readonly]:focus { box-shadow: 0 0 0; background: $background-03; border: 1px solid $border-color-02; } -textarea { padding: .2em; - height: auto;} -input[type="submit"], .submit { +textarea { + padding: 0.2em; + height: auto; +} + +input[type="submit"], +.submit { margin: 1em 0; width: 100%; } -//Custom select -select{ +// Custom select +select { border-radius: 0px; height: auto; padding-right: 0.5rem; //override inherited Foundation style @@ -121,3 +143,70 @@ select{ color: $status-error; font-size: 0.9em; } + +/** + * Used for basic vertically stacked forms + * that do not need a grid for layout + * Should only wrap form elements and label + * Helper text shoul not be wrapped in the + * form-field container + * EX: Manage Power Usage + * Markup + <div class="section-content"> + <p class="form__helper-text">Some helper text</p> + <div class=" form__field"> + <label for="power-cap" class="content-label">POWER CAP VALUE IN WATTS</label> + <input id="power-cap type="number" /> + </div> + </div> + */ + +.form__field { + min-width: 150px; + max-width: 240px; +} + +.form__field--large { + max-width: 330px; +} + +// TODO Replace form-actions with form__actions. see below +.form-actions { + width: 100%; + margin-top: 3rem; + padding-top: 1rem; + border-top: 1px solid $border-color-01; + + button { + display: block; + float: right; + margin: 0.5em 0 0 1em; + } +} + +/** + * Use to wrap the cancel and submit buttons on + * a form to create the top border and white space + * Markup + <div class="form-actions"> + <button type="submit" class="btn-primary" ng-click="setPowerCap()"> + Save settings + </button> + <button type="button" class="btn btn-secondary" ng-click="refresh()"> + Cancel + </button> + </div> + */ + +.form__actions { + margin-top: 3rem; + padding-top: 1rem; + border-top: 1px solid $border-color-01; + display: flex; + justify-content: flex-end; + + button:first-of-type { + order: 1; + margin-left: 1rem; + } +} diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss index 87708da..4c5bfb1 100644 --- a/app/common/styles/base/mixins.scss +++ b/app/common/styles/base/mixins.scss @@ -191,3 +191,11 @@ animation: row-flash 1s infinite; /* IE 10+ */ } } + +@mixin label { + color: $text-02; + text-transform: uppercase; + font-weight: 700; + font-size: 0.75em; + margin-bottom: 0.5rem; +} diff --git a/app/common/styles/base/typography.scss b/app/common/styles/base/typography.scss index f0a5e20..baa6a60 100644 --- a/app/common/styles/base/typography.scss +++ b/app/common/styles/base/typography.scss @@ -20,29 +20,35 @@ h5 { color: $text-01; } -h1, .h1 { +h1, +.h1 { font-size: 2.25rem; font-weight: 500; - padding-top: .5rem; + padding-top: 0.5rem; + margin-bottom: 3rem; } -h2, .h2 { +h2, +.h2 { font-size: 1.25rem; font-weight: bold; } -h3, .h3 { +h3, +.h3 { font-size: 1rem; font-weight: bold; } -h4, .h4 { - font-size: .875rem; +h4, +.h4 { + font-size: 0.875rem; font-weight: bold; } -h5, .h5 { - font-size: .875rem; +h5, +.h5 { + font-size: 0.875rem; font-weight: 500; color: $text-02; } @@ -55,4 +61,4 @@ h5, .h5 { font-family: "Courier New", Helvetica, arial, sans-serif; font-weight: 700; margin-bottom: 0; -}
\ No newline at end of file +} diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss index 7297628..26f138a 100644 --- a/app/common/styles/base/utility.scss +++ b/app/common/styles/base/utility.scss @@ -75,10 +75,6 @@ margin-top: 0 !important; } -.btm-border-grey { - border-bottom: 1px solid $border-color-02; -} - .transitionAll { transition: all .5s ease; } diff --git a/app/common/styles/elements/quicklinks.scss b/app/common/styles/elements/quicklinks.scss index 9d6ea48..c1bff93 100644 --- a/app/common/styles/elements/quicklinks.scss +++ b/app/common/styles/elements/quicklinks.scss @@ -50,12 +50,14 @@ &:after { display: none; } + .toggle-container { + float: right; + } } &:last-child { border-bottom: 0; } .float-right { - display:inline-block; float: right; @media(min-width: 1024px) and (max-width: 1140px) { display: block; @@ -77,9 +79,3 @@ color: $status-error; } } - -//toggle switch -.quick-links__item .toggle label { - transform: translateY(-2px); - margin-right: 0; -} diff --git a/app/common/styles/elements/toggle-switch.scss b/app/common/styles/elements/toggle-switch.scss index ae8c276..814da91 100644 --- a/app/common/styles/elements/toggle-switch.scss +++ b/app/common/styles/elements/toggle-switch.scss @@ -1,8 +1,5 @@ @mixin marginTransition { - -webkit-transition: margin 0.4s, background 0.4s; - -moz-transition: margin 0.4s, background 0.4s; - -o-transition: margin 0.4s, background 0.4s; - transition: margin 0.4s, background 0.4s; + transition: margin $duration--moderate-01, background $duration--moderate-01; } @mixin borderRadius { @@ -11,11 +8,13 @@ border-radius: 60px; } +.toggle-container { + display: flex; +} + .toggle-switch { position: absolute; - left: 20px; - height: 1px; - width: 1px; + top: 0; opacity: 0; } @@ -32,22 +31,25 @@ .toggle label { text-indent: -9999px; - transform: translateY(-50%); // keeps switch centered + margin-right: 0.3rem; +} + +input.toggle-switch__round-flat:focus + label { + outline: 1px solid $primary-accent; + outline-offset: 3px; } input.toggle-switch__round-flat + label { padding: 2px; - width: 50px; - height: 30px; + width: 43px; + height: 22px; background-color: $border-color-02; @include borderRadius; @include marginTransition; } -input.toggle-switch__round-flat:focus + label { - box-shadow: 0 0 4px 4px $primary-accent; -} -input.toggle-switch__round-flat + label:before, input.toggle-switch__round-flat + label:after { +input.toggle-switch__round-flat + label:before, +input.toggle-switch__round-flat + label:after { display: block; position: absolute; content: ""; @@ -65,7 +67,7 @@ input.toggle-switch__round-flat + label:after { top: 4px; left: 4px; bottom: 4px; - width: 20px; + width: 15px; background-color: $border-color-02; -webkit-border-radius: 52px; -moz-border-radius: 52px; @@ -76,9 +78,9 @@ input.toggle-switch__round-flat:checked + label { background-color: $primary-accent; } input.toggle-switch__round-flat:checked + label:before { - background-color: $background-02; + background-color: $primary-accent; } input.toggle-switch__round-flat:checked + label:after { margin-left: 20px; - background-color: $primary-accent; -}
\ No newline at end of file + background-color: $primary-light; +} diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss index 61e082b..8c8b916 100644 --- a/app/common/styles/layout/content.scss +++ b/app/common/styles/layout/content.scss @@ -2,15 +2,6 @@ $nav__toplvlWidth: 120px; $nav__seclvlWidth: 240px; -// Page header -.page-header { - width: 100%; - position: relative; - border-bottom: 1px solid $border-color-02; - margin: 0.5em 0 2.2em; - padding-left: 0; -} - // Main element class .content__container { margin-left: $nav__toplvlWidth; @@ -41,15 +32,22 @@ $nav__seclvlWidth: 240px; margin-top: 2em; } +// TODO: Determine if label and content-label are the same - remove generic element selector .content-label, label { - color: $text-02; - text-transform: uppercase; - font-weight: 700; - font-size: 0.75em; - margin-bottom: 0; + @include label; } +// TODO: Remove and replace with page and page-title pattern +// Page header +.page-header { + width: 100%; + position: relative; + border-bottom: 1px solid $border-color-02; + margin: 0.5em 0 2.2em; + padding-left: 0; +} +// TODO: Remove and replace with the .section and .section-title pattern .subhead { width: 100%; border-bottom: 1px solid $border-color-01; diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss index 3593780..3e0f0da 100644 --- a/app/common/styles/layout/header.scss +++ b/app/common/styles/layout/header.scss @@ -1,3 +1,8 @@ +/** + * Application header styles + * Should only be used for the application header + */ + $logoHeight: 30px; $logoMaxHeight: 100px; $logoMaxWidth: 125px; @@ -38,7 +43,7 @@ $logoMaxWidth: 125px; .header__logout { float: right; color: $primary-light; - font-size: .9em; + font-size: 0.9em; text-decoration: none; padding: 1em; font-weight: 400; @@ -61,7 +66,7 @@ $logoMaxWidth: 125px; font-size: 1.5em; font-weight: 500; color: $text-02; - padding: .4em 0 0 1em; + padding: 0.4em 0 0 1em; height: 100%; background: transparent; max-width: 600px; @@ -78,7 +83,7 @@ $logoMaxWidth: 125px; } } .logo__wrapper { - padding-top: .5em; + padding-top: 0.5em; } .header__logo { @@ -97,7 +102,7 @@ $logoMaxWidth: 125px; right: -480px; bottom: 0; z-index: 100; - margin: .3em 0; + margin: 0.3em 0; background: $primary-light; @include fastTransition-all; &.active { @@ -111,12 +116,13 @@ $logoMaxWidth: 125px; color: $primary-dark; font-size: 1em; } - a, p { + a, + p { display: block; float: left; text-decoration: none; color: $text-02; - padding: 1.250em; + padding: 1.25em; height: 100%; font-size: 0.875em; font-weight: 400; @@ -125,7 +131,7 @@ $logoMaxWidth: 125px; display: block; font-size: 1rem; font-weight: bold; - margin-top: .5em; + margin-top: 0.5em; } } } @@ -137,7 +143,7 @@ $logoMaxWidth: 125px; .header__multi-server { background: $background-02; @include round-corners; - margin: 0 .3em; + margin: 0 0.3em; height: 100%; border: 1px solid $border-color-01; opacity: 1; @@ -148,8 +154,8 @@ $logoMaxWidth: 125px; } .header__multi-server { - padding: .5em; - padding-top: .8em; + padding: 0.5em; + padding-top: 0.8em; float: left; margin-top: 10px; margin-right: -10px; @@ -167,12 +173,12 @@ $logoMaxWidth: 125px; } .header__functions { .header__info { - padding: .3em; + padding: 0.3em; min-width: 40px; text-align: center; float: left; span { - padding: .7em 0 .3em; + padding: 0.7em 0 0.3em; font-size: 1em; font-weight: 400; color: $text-02; @@ -214,7 +220,7 @@ $logoMaxWidth: 125px; font-weight: 400; color: $text-02; display: block; - margin-bottom: .2em; + margin-bottom: 0.2em; } .icon { display: block; diff --git a/app/common/styles/layout/index.scss b/app/common/styles/layout/index.scss index 4183519..8a33213 100644 --- a/app/common/styles/layout/index.scss +++ b/app/common/styles/layout/index.scss @@ -1,2 +1,5 @@ -@import 'header'; -@import 'content'; +@import "header"; +@import "page"; +@import "section"; +@import "content"; +@import "list"; diff --git a/app/common/styles/layout/list.scss b/app/common/styles/layout/list.scss new file mode 100644 index 0000000..9be7522 --- /dev/null +++ b/app/common/styles/layout/list.scss @@ -0,0 +1,18 @@ +/** + * Used for any key value pair + * Markup + <dl class="list-pair"> + <dt>Term</dt> + <dd>Definition associated with the term</dd> + </dl> + */ + +.list-pair { + dt { + @include label; + } + dd { + @include fontCourierBold; + margin-bottom: 0; + } +} diff --git a/app/common/styles/layout/page.scss b/app/common/styles/layout/page.scss new file mode 100644 index 0000000..2ce98d5 --- /dev/null +++ b/app/common/styles/layout/page.scss @@ -0,0 +1,15 @@ +/** + * Used for page layout. This should be used for the page container + * Mark up + <div class="page"> + <h1 class="page-title">Page Title</h1> + ... + </div> + */ +.page { + max-width: 1080px; +} + +.page-title { + margin-bottom: 3rem; +} diff --git a/app/common/styles/layout/section.scss b/app/common/styles/layout/section.scss new file mode 100644 index 0000000..e92b096 --- /dev/null +++ b/app/common/styles/layout/section.scss @@ -0,0 +1,28 @@ +/** + * Used for section layout. This should be used for the page container + * Mark up + <div class="section"> + <h2 class="section-title">Section Title</h2> + <div class="section-content"> + ... + </div> + <div class="section-content"> + ... + </div> + </div> + */ + +.section { + margin-bottom: 3rem; +} + +.section-title { + border-bottom: 1px solid $border-color-01; + padding-bottom: 0.5rem; + margin-bottom: 1.5rem; +} + +.section-content { + margin-bottom: 1.5rem; + margin-top: 0; +} diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html index 34e5611..ffbf0a1 100644 --- a/app/overview/controllers/system-overview-controller.html +++ b/app/overview/controllers/system-overview-controller.html @@ -110,16 +110,21 @@ <dd class="courier-bold bmc-time">{{ bmc_time | localeDate }}</dd> </dl> <div class="quick-links__item no-icon"> - <p class="inline quick-links__label">Turn <span ng-if="dataService.LED_state == 'off'">on</span><span - ng-if="dataService.LED_state == 'on'">off</span> server LED</p> - <div class="toggle inline float-right"> - <input id="toggle__switch-round" class="toggle-switch toggle-switch__round-flat" type="checkbox" - tabindex="0" ng-click="toggleLED()" ng-checked="dataService.LED_state == 'on'" - ng-disabled="dataService.server_unreachable"> - <label for="toggle__switch-round" tabindex="0">Server LED is <span - class="led-switch__status">{{dataService.LED_state}}</span></label> - </div> + <p class="inline quick-links__label">Turn <span ng-if="dataService.LED_state == 'off'">on</span> + <span ng-if="dataService.LED_state == 'on'">off</span> server LED</p> + <div class="toggle-container"> + <div class="toggle"> + <input id="toggle__switch-round" class="toggle-switch toggle-switch__round-flat" type="checkbox" + tabindex="0" ng-click="toggleLED()" ng-checked="dataService.LED_state == 'on'" + ng-disabled="dataService.server_unreachable"> + <label for="toggle__switch-round" tabindex="0">Server LED is <span + class="uid-switch__status">{{dataService.LED_state}}</span></label> + </div> + <span> + {{ dataService.LED_state == 'on' ? "On" : "Off" }} + </span> </div> + </div> <a href="#/server-control/remote-console" class="no-icon quick-links__item"> <p class="inline quick-links__label">Serial over LAN console</p> <icon file="icon-launch.svg" class="float-right"></icon> diff --git a/app/overview/styles/system-overview.scss b/app/overview/styles/system-overview.scss index ed010aa..627ecf5 100644 --- a/app/overview/styles/system-overview.scss +++ b/app/overview/styles/system-overview.scss @@ -53,4 +53,8 @@ input.modal__edit-server-name { .modal__error { color: $status-error; +} + +dl { + margin-bottom: 0; }
\ No newline at end of file diff --git a/app/server-control/controllers/power-usage-controller.html b/app/server-control/controllers/power-usage-controller.html index 62ca3da..b0760e0 100644 --- a/app/server-control/controllers/power-usage-controller.html +++ b/app/server-control/controllers/power-usage-controller.html @@ -1,45 +1,67 @@ <loader loading="loading"></loader> -<div id="power-usage"> - <div class="row column"> - <h1>Manage Power Usage</h1> - </div> +<div id="power-usage" class="page"> + <h1 class="page-title">Manage Power Usage</h1> <form class="power-usage__form" role="form" action=""> - <section class="row column"> - <div class="page-header"> - <h2 class="bold">Power information</h2> + <section class="section"> + <h2 class="section-title">Power information</h2> + <dl class="list-pair"> + <dt>Power Consumption</dt> + <dd>{{ power_consumption }}</dd> + </dl> + </section> + <section class="section"> + <h2 class="section-title"> + Server power cap setting + </h2> + <div class="section-content"> + <p> + Set a power cap to keep power consumption at or below the specified + value in watts. + </p> + <div class="toggle-container"> + <div class="toggle"> + <input + id="toggle__switch-round" + class="toggle-switch toggle-switch__round-flat" + type="checkbox" + tabindex="0" + ng-model="power_cap.PowerCapEnable" + ng-checked="power_cap.PowerCapEnable" + /> + <label for="toggle__switch-round" tabindex="0" + >Server power cap setting is + <span class="uid-switch__status">{{ + power_cap.PowerCapEnable ? "on" : "off" + }}</span></label + > + </div> + <span> + {{ power_cap.PowerCapEnable ? "On" : "Off" }} + </span> + </div> </div> - <fieldset> - <ul class="power-usage__metadata-wrapper"> - <li class="power-usage__metadata-block"> - <p class="content-label">Power Consumption</p> - <p class="courier-bold">{{power_consumption}}</p> - </li> - <li class="power-usage__metadata-block"> - <div class="toggle inline"> - <input id="toggle__switch-round" - class="toggle-switch toggle-switch__round-flat" - type="checkbox" - tabindex="0" - ng-model="power_cap.PowerCapEnable" - ng-checked="power_cap.PowerCapEnable"> - <label for="toggle__switch-round" tabindex="0">Server power cap setting is <span class="uid-switch__status">{{power_cap.PowerCapEnable ? "on" : "off"}}</span></label> - </div> - <div class="power-usage__switch-label inline"> - <p>Server power cap setting is <span class="uid-switch__status">{{power_cap.PowerCapEnable ? "on" : "off"}}</span></p> - <p>Set a power cap to keep power consumption at or below the specified value in watts.</p> - </div> - <div class="small-12 large-4"> - <label for="power-cap" class="content-label power-cap-value-label">POWER CAP VALUE IN WATTS</label> - <input id="power-cap" type="number" min="100" max="10000" step="1" ng-disabled="!power_cap.PowerCapEnable" ng-model="power_cap.PowerCap"/> - </div> - </li> - </ul> - </fieldset> - <div class="power-usage__submit-wrapper"> - <button type="button" class="btn-primary inline" ng-click="setPowerCap()">Save settings</button> - <button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button> + <div class="section-content form__field"> + <label for="power-cap" class="content-label" + >POWER CAP VALUE IN WATTS</label + > + <input + id="power-cap" + type="number" + min="100" + max="10000" + step="1" + ng-disabled="!power_cap.PowerCapEnable" + ng-model="power_cap.PowerCap" + /> </div> </section> + <div class="form__actions"> + <button type="submit" class="btn-primary" ng-click="setPowerCap()"> + Save settings + </button> + <button type="button" class="btn btn-secondary" ng-click="refresh()"> + Cancel + </button> + </div> </form> </div> - diff --git a/app/server-control/controllers/server-led-controller.html b/app/server-control/controllers/server-led-controller.html index 2901d76..c5a56e1 100644 --- a/app/server-control/controllers/server-led-controller.html +++ b/app/server-control/controllers/server-led-controller.html @@ -1,28 +1,44 @@ <div id="led-switch"> - <div class="row column"> - <h1>Server LED</h1> - <div class="page-header"> - <h2>LED light control</h2> - </div> + <div class="row column"> + <h1>Server LED</h1> + <div class="page-header"> + <h2>LED light control</h2> </div> - - <div class="row column" ng-class="{disabled: dataService.server_unreachable || dataService.loading}"> - <div class="btm-border-grey"> - <div class="toggle inline"> - <input id="toggle__switch-round" - class="toggle-switch toggle-switch__round-flat" - type="checkbox" - tabindex="0" - ng-click="toggleLED()" - ng-checked="dataService.LED_state == 'on'" - ng-disabled="dataService.server_unreachable" - > - <label for="toggle__switch-round" tabindex="0">Server indicator is <span class="led-switch__status">{{dataService.LED_state}}</span></label> - </div> - <div class="led-switch__label inline"> - <p>Server LED light is <span class="led-switch__status">{{dataService.LED_state}}</span></p> - <p>Turn the LED light on or off. If the server has an LCD, use this control to display text (on) or not to display text (off) on the LCD.</p> - </div> - </div> + </div> + <div + class="column" + ng-class="{disabled: dataService.server_unreachable || dataService.loading}" + > + <div class="led-switch__label"> + <h3> + Server LED light + </h3> + <p> + Turn the LED light on or off. If the server has an LCD, use this control + to display text (on) or not to display text (off) on the LCD. + </p> </div> + <div class="toggle-container"> + <div class="toggle"> + <input + id="toggle__switch-round" + class="toggle-switch toggle-switch__round-flat" + type="checkbox" + tabindex="0" + ng-click="toggleLED()" + ng-checked="dataService.LED_state == 'on'" + ng-disabled="dataService.server_unreachable" + /> + <label for="toggle__switch-round" tabindex="0" + >Server LED indicator is + <span class="toggle-switch__status">{{ + dataService.LED_state + }}</span></label + > + </div> + <span> + {{ dataService.LED_state == "on" ? "On" : "Off" }} + </span> + </div> + </div> </div> diff --git a/app/server-control/styles/index.scss b/app/server-control/styles/index.scss index 5e8a995..7171a7e 100644 --- a/app/server-control/styles/index.scss +++ b/app/server-control/styles/index.scss @@ -2,5 +2,4 @@ @import "./power-operations.scss"; @import "./remote-console.scss"; @import "./server-led.scss"; -@import "./power-usage.scss"; @import "./kvm.scss"; diff --git a/app/server-control/styles/power-usage.scss b/app/server-control/styles/power-usage.scss deleted file mode 100644 index 0f612ae..0000000 --- a/app/server-control/styles/power-usage.scss +++ /dev/null @@ -1,48 +0,0 @@ -// Power Usage SCSS -.power-usage__form { - - input { - margin-bottom: 0em; - } - - fieldset { - padding-left: 1.8em; - } - - .power-usage__switch-label { - padding-bottom: .5em; - } - - .power-usage__switch-label p { - margin: 0; - &:first-child {font-weight: 700;} - } - - .power-usage__metadata-wrapper { - margin: 0; - padding: 0; - } - - .power-usage__metadata-block { - min-width: 47%; - margin-bottom: 1.8em; - margin-right: .7em; - display: inline-block; - white-space: normal; - word-break: break-all; - @include mediaQuery(small) { - float: left; - } - } - - .power-usage__submit-wrapper { - width: 100%; - margin-top: 3em; - padding-top: 1em; - border-top: 1px solid $border-color-01; - button { - float: right; - margin: .5em; - } - } -} diff --git a/app/server-control/styles/server-led.scss b/app/server-control/styles/server-led.scss index 9807c74..26136fa 100644 --- a/app/server-control/styles/server-led.scss +++ b/app/server-control/styles/server-led.scss @@ -1,12 +1,13 @@ // Server LED #led-switch { - .switch {margin-left: 1.7em;} .led-switch__label { padding-bottom: 1.5em; } .led-switch__label p { margin: 0; - &:first-child {font-weight: 700;} + &:first-child { + font-weight: 700; + } } } |
