From df881791d37809058b42f0cfc0b25a2864eecb27 Mon Sep 17 00:00:00 2001 From: Steven Evans <kopelli@gmail.com> Date: Mon, 16 Jul 2018 11:28:09 -0400 Subject: [PATCH] [refactor] Added 'box-shadow' mixin --- css/_mixins.scss | 6 ++++++ css/interactivetutorial.scss | 4 +--- css/menupages.scss | 28 +++++++--------------------- css/popupboxes.scss | 10 ++++------ css/styles.scss | 12 +++--------- css/workinprogress.scss | 5 ++--- 6 files changed, 23 insertions(+), 42 deletions(-) diff --git a/css/_mixins.scss b/css/_mixins.scss index 21ca5fce4..43eb5762a 100644 --- a/css/_mixins.scss +++ b/css/_mixins.scss @@ -3,3 +3,9 @@ -moz-border-radius: $property; border-radius: $property; } + +@mixin boxShadow($value) { + -webkit-box-shadow: $value; + -moz-box-shadow: $value; + box-shadow: $value; +} diff --git a/css/interactivetutorial.scss b/css/interactivetutorial.scss index 0e4bd8456..5bf8fc363 100644 --- a/css/interactivetutorial.scss +++ b/css/interactivetutorial.scss @@ -34,13 +34,11 @@ #interactive-tutorial-next, #interactive-tutorial-back { @include borderRadius(12px); + @include boxShadow(1px 1px 3px #000); color: #aaa; font-size: 20px; font-weight: bold; - -moz-box-shadow: 1px 1px 3px #000; - -webkit-box-shadow: 1px 1px 3px #000; - box-shadow: 1px 1px 3px #000; background-color: #000; } diff --git a/css/menupages.scss b/css/menupages.scss index fd9aea545..5afd990dd 100644 --- a/css/menupages.scss +++ b/css/menupages.scss @@ -90,6 +90,9 @@ } #script-editor-filename { + $boxShadowArgs: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1); + @include boxShadow($boxShadowArgs); + background-color: #555; display: inline-block; float: center; @@ -100,15 +103,6 @@ padding: 2px; border: 2px solid var(--my-highlight-color); - -webkit-box-shadow: - inset 0 0 8px rgba(0, 0, 0, 0.1), - 0 0 16px rgba(0, 0, 0, 0.1); - -moz-box-shadow: - inset 0 0 8px rgba(0, 0, 0, 0.1), - 0 0 16px rgba(0, 0, 0, 0.1); - box-shadow: - inset 0 0 8px rgba(0, 0, 0, 0.1), - 0 0 16px rgba(0, 0, 0, 0.1); } #script-editor-status { @@ -262,13 +256,11 @@ .active-scripts-button { @include borderRadius(12px); + @include boxShadow(1px 1px 3px #000); color: #aaa; font-size: 16px; font-weight: bold; - -moz-box-shadow: 1px 1px 3px #000; - -webkit-box-shadow: 1px 1px 3px #000; - box-shadow: 1px 1px 3px #000; margin: 4px; padding: 4px; background-color: #000; @@ -323,19 +315,13 @@ } .hacknet-node { + $boxShadowArgs: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1); + @include boxShadow($boxShadowArgs); + margin: 6px; padding: 6px; width: 34vw; border: 2px solid var(--my-highlight-color); - -webkit-box-shadow: - inset 0 0 8px rgba(0, 0, 0, 0.1), - 0 0 16px rgba(0, 0, 0, 0.1); - -moz-box-shadow: - inset 0 0 8px rgba(0, 0, 0, 0.1), - 0 0 16px rgba(0, 0, 0, 0.1); - box-shadow: - inset 0 0 8px rgba(0, 0, 0, 0.1), - 0 0 16px rgba(0, 0, 0, 0.1); } .hacknet-node-container { diff --git a/css/popupboxes.scss b/css/popupboxes.scss index 86e293dc2..1ce9acf69 100644 --- a/css/popupboxes.scss +++ b/css/popupboxes.scss @@ -76,13 +76,12 @@ .dialog-box-close-button { @include borderRadius(12px); + @include boxShadow(1px 1px 3px #000); + float: right; color: #aaa; font-size: 20px; font-weight: bold; - -moz-box-shadow: 1px 1px 3px #000; - -webkit-box-shadow: 1px 1px 3px #000; - box-shadow: 1px 1px 3px #000; } #log-box-close { @@ -155,15 +154,14 @@ #game-options-close-button { @include borderRadius(12px); + @include boxShadow(1px 1px 3px #000); + color: #aaa; float: right; margin: 4px; padding: 4px; font-size: 20px; font-weight: bold; - -moz-box-shadow: 1px 1px 3px #000; - -webkit-box-shadow: 1px 1px 3px #000; - box-shadow: 1px 1px 3px #000; } #game-options-close-button:hover, diff --git a/css/styles.scss b/css/styles.scss index aed204eae..3977bd179 100644 --- a/css/styles.scss +++ b/css/styles.scss @@ -151,9 +151,7 @@ a:link, a:visited { } .a-link-button:active { - -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); - -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); - box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); + @include boxShadow(inset 0 1px 4px rgba(0, 0, 0, 0.6)); } /* Make anchor tags ("a" elements) inactive (not clickable) */ @@ -309,9 +307,7 @@ a:link, a:visited { } .help-tip:active { - -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); - -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); - box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); + @include boxShadow(inset 0 1px 4px rgba(0, 0, 0, 0.6)); } /* Flashing button (Red) */ @@ -448,13 +444,11 @@ a:link, a:visited { #character-overview-save-button, #character-overview-options-button { @include borderRadius(12px); + @include boxShadow(1px 1px 3px #000); color: #aaa; font-size: 14px; font-weight: bold; - -moz-box-shadow: 1px 1px 3px #000; - -webkit-box-shadow: 1px 1px 3px #000; - box-shadow: 1px 1px 3px #000; height: 22px; background-color: #000; } diff --git a/css/workinprogress.scss b/css/workinprogress.scss index 0917ff915..2ba988ad4 100644 --- a/css/workinprogress.scss +++ b/css/workinprogress.scss @@ -18,6 +18,8 @@ #work-in-progress-cancel-button { @include borderRadius(12px); + @include boxShadow(1px 1px 3px #000); + color: #aaa; float: left; font-size: 20px; @@ -25,9 +27,6 @@ margin: 10px; padding: 5px; border: 3px solid #fff; - -moz-box-shadow: 1px 1px 3px #000; - -webkit-box-shadow: 1px 1px 3px #000; - box-shadow: 1px 1px 3px #000; } #work-in-progress-cancel-button:hover,