From 608cb5d74a4e004951fa59472ff2ce58d6e648bf Mon Sep 17 00:00:00 2001 From: Juan Cruz Viotti Date: Sat, 11 Jun 2016 13:21:22 -0400 Subject: [PATCH] Cleanup CSS (#471) This is by no means a complete CSS refactoring. There still a lot to be done. This encompasses mostly: - Move "Finish page" specific styles to that module. - Remove unused CSS rules. - Move generic Bootstrap rules to `_bootstrap.scss`. Signed-off-by: Juan Cruz Viotti --- build/css/main.css | 80 ++++++++----------- .../finish/styles/_finish.scss} | 27 ++++++- .../pages/finish/templates/success.tpl.html | 4 +- lib/gui/scss/main.scss | 40 +--------- lib/gui/scss/modules/_bootstrap.scss | 4 + 5 files changed, 66 insertions(+), 89 deletions(-) rename lib/gui/{scss/components/_list-group.scss => pages/finish/styles/_finish.scss} (58%) diff --git a/build/css/main.css b/build/css/main.css index c10d7ec8..c3e05675 100644 --- a/build/css/main.css +++ b/build/css/main.css @@ -5916,6 +5916,9 @@ html { border: none; border-radius: 2px; } +[uib-tooltip] { + cursor: default; } + /* * Copyright 2016 Resin.io * @@ -6282,25 +6285,6 @@ button.btn:focus, button.progress-button:focus { .alert-ribbon--open { top: 0; } -/* - * Copyright 2016 Resin.io - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -.list-group-item[disabled] { - text-decoration: line-through; - cursor: not-allowed; } - /* * Copyright 2016 Resin.io * @@ -6464,35 +6448,51 @@ button.btn:focus, button.progress-button:focus { .page-settings .checkbox input[type="checkbox"]:not(:checked) + * { color: #ddd; } -.monospace { +/* + * Copyright 2016 Resin.io + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +.page-finish .button-label { + margin: 0 auto 15px; + max-width: 165px; } + +.page-finish .label { + display: inline-block; } + +.page-finish .monospace { font-family: monospace; } +.page-finish .soft { + color: #ddd; } + +.page-finish .separator-xs { + flex-grow: 0; + background-color: #64686a; + padding: 0px; + min-width: 2px; } + .icon-caption { margin-top: 10px; } .icon-caption[disabled] { color: #787c7f; } -.block { - display: block; } - -.inline-block { - display: inline-block; } - body { letter-spacing: 1px; } -.content { - height: 100%; } - .relative { position: relative; } -.soft { - color: #ddd; } - -[uib-tooltip] { - cursor: default; } - .section-footer { display: flex; align-items: center; @@ -6557,16 +6557,6 @@ body { border-radius: 0; padding: 0; } -.separator-xs { - flex-grow: 0; - background-color: #64686a; - padding: 0px; - min-width: 2px; } - -.button-label { - margin: 0 auto 15px; - max-width: 165px; } - .wrapper { height: 100%; margin: 20px 60px; } diff --git a/lib/gui/scss/components/_list-group.scss b/lib/gui/pages/finish/styles/_finish.scss similarity index 58% rename from lib/gui/scss/components/_list-group.scss rename to lib/gui/pages/finish/styles/_finish.scss index 7bc86e3d..e0f05bde 100644 --- a/lib/gui/scss/components/_list-group.scss +++ b/lib/gui/pages/finish/styles/_finish.scss @@ -14,7 +14,28 @@ * limitations under the License. */ -.list-group-item[disabled] { - text-decoration: line-through; - cursor: not-allowed; +.page-finish .button-label { + margin: 0 auto $spacing-medium; + + // Keep some spacing at the sides + max-width: $btn-min-width - 5px; +} + +.page-finish .label { + display: inline-block; +} + +.page-finish .monospace { + font-family: monospace; +} + +.page-finish .soft { + color: $gray-light; +} + +.page-finish .separator-xs { + flex-grow: 0; + background-color: darken($color-disabled, 8%); + padding: 0px; + min-width: 2px; } diff --git a/lib/gui/pages/finish/templates/success.tpl.html b/lib/gui/pages/finish/templates/success.tpl.html index 896dbe5e..ee65c811 100644 --- a/lib/gui/pages/finish/templates/success.tpl.html +++ b/lib/gui/pages/finish/templates/success.tpl.html @@ -1,4 +1,4 @@ -
+

Flash Complete!

@@ -28,7 +28,7 @@
- CRC32 CHECKSUM : {{ ::finish.params.checksum }} + CRC32 CHECKSUM : {{ ::finish.params.checksum }}
diff --git a/lib/gui/scss/main.scss b/lib/gui/scss/main.scss index 4c7c9c2d..dca1d4e3 100644 --- a/lib/gui/scss/main.scss +++ b/lib/gui/scss/main.scss @@ -44,15 +44,11 @@ $alert-padding: 13px; @import "./components/tick"; @import "./components/modal"; @import "./components/alert-ribbon"; -@import "./components/list-group"; @import "../components/update-notifier/styles/update-notifier"; @import "../components/progress-button/styles/progress-button"; @import "../components/svg-icon/styles/svg-icon"; @import "../pages/settings/styles/settings"; - -.monospace { - font-family: monospace; -} +@import "../pages/finish/styles/finish"; .icon-caption { @extend .caption; @@ -65,34 +61,14 @@ $alert-padding: 13px; } } -.block { - display: block; -} - -.inline-block { - display: inline-block; -} - body { letter-spacing: 1px; } -.content { - height: 100%; -} - .relative { position: relative; } -.soft { - color: $gray-light; -} - -[uib-tooltip] { - cursor: default; -} - .section-footer { @extend .text-center; @@ -184,20 +160,6 @@ body { padding: 0; } -.separator-xs { - flex-grow: 0; - background-color: darken($color-disabled, 8%); - padding: 0px; - min-width: 2px; -} - -.button-label { - margin: 0 auto $spacing-medium; - - // Keep some spacing at the sides - max-width: $btn-min-width - 5px; -} - .wrapper { height: 100%; margin: 20px 60px; diff --git a/lib/gui/scss/modules/_bootstrap.scss b/lib/gui/scss/modules/_bootstrap.scss index 31f4bfae..452b970e 100644 --- a/lib/gui/scss/modules/_bootstrap.scss +++ b/lib/gui/scss/modules/_bootstrap.scss @@ -39,3 +39,7 @@ html { border: none; border-radius: 2px; } + +[uib-tooltip] { + cursor: default; +}