[refactor] Added 'box-shadow' mixin

This commit is contained in:
Steven Evans 2018-07-16 11:28:09 -04:00
parent cab8c01833
commit df881791d3
6 changed files with 23 additions and 42 deletions

@ -3,3 +3,9 @@
-moz-border-radius: $property; -moz-border-radius: $property;
border-radius: $property; border-radius: $property;
} }
@mixin boxShadow($value) {
-webkit-box-shadow: $value;
-moz-box-shadow: $value;
box-shadow: $value;
}

@ -34,13 +34,11 @@
#interactive-tutorial-next, #interactive-tutorial-next,
#interactive-tutorial-back { #interactive-tutorial-back {
@include borderRadius(12px); @include borderRadius(12px);
@include boxShadow(1px 1px 3px #000);
color: #aaa; color: #aaa;
font-size: 20px; font-size: 20px;
font-weight: bold; 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; background-color: #000;
} }

@ -90,6 +90,9 @@
} }
#script-editor-filename { #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; background-color: #555;
display: inline-block; display: inline-block;
float: center; float: center;
@ -100,15 +103,6 @@
padding: 2px; padding: 2px;
border: 2px solid var(--my-highlight-color); 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 { #script-editor-status {
@ -262,13 +256,11 @@
.active-scripts-button { .active-scripts-button {
@include borderRadius(12px); @include borderRadius(12px);
@include boxShadow(1px 1px 3px #000);
color: #aaa; color: #aaa;
font-size: 16px; font-size: 16px;
font-weight: bold; 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; margin: 4px;
padding: 4px; padding: 4px;
background-color: #000; background-color: #000;
@ -323,19 +315,13 @@
} }
.hacknet-node { .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; margin: 6px;
padding: 6px; padding: 6px;
width: 34vw; width: 34vw;
border: 2px solid var(--my-highlight-color); 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 { .hacknet-node-container {

@ -76,13 +76,12 @@
.dialog-box-close-button { .dialog-box-close-button {
@include borderRadius(12px); @include borderRadius(12px);
@include boxShadow(1px 1px 3px #000);
float: right; float: right;
color: #aaa; color: #aaa;
font-size: 20px; font-size: 20px;
font-weight: bold; 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 { #log-box-close {
@ -155,15 +154,14 @@
#game-options-close-button { #game-options-close-button {
@include borderRadius(12px); @include borderRadius(12px);
@include boxShadow(1px 1px 3px #000);
color: #aaa; color: #aaa;
float: right; float: right;
margin: 4px; margin: 4px;
padding: 4px; padding: 4px;
font-size: 20px; font-size: 20px;
font-weight: bold; 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, #game-options-close-button:hover,

@ -151,9 +151,7 @@ a:link, a:visited {
} }
.a-link-button:active { .a-link-button:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); @include boxShadow(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);
} }
/* Make anchor tags ("a" elements) inactive (not clickable) */ /* Make anchor tags ("a" elements) inactive (not clickable) */
@ -309,9 +307,7 @@ a:link, a:visited {
} }
.help-tip:active { .help-tip:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); @include boxShadow(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);
} }
/* Flashing button (Red) */ /* Flashing button (Red) */
@ -448,13 +444,11 @@ a:link, a:visited {
#character-overview-save-button, #character-overview-save-button,
#character-overview-options-button { #character-overview-options-button {
@include borderRadius(12px); @include borderRadius(12px);
@include boxShadow(1px 1px 3px #000);
color: #aaa; color: #aaa;
font-size: 14px; font-size: 14px;
font-weight: bold; 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; height: 22px;
background-color: #000; background-color: #000;
} }

@ -18,6 +18,8 @@
#work-in-progress-cancel-button { #work-in-progress-cancel-button {
@include borderRadius(12px); @include borderRadius(12px);
@include boxShadow(1px 1px 3px #000);
color: #aaa; color: #aaa;
float: left; float: left;
font-size: 20px; font-size: 20px;
@ -25,9 +27,6 @@
margin: 10px; margin: 10px;
padding: 5px; padding: 5px;
border: 3px solid #fff; 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, #work-in-progress-cancel-button:hover,