[refactor] Introducing the "border-radius" SCSS mixin

This commit is contained in:
Steven Evans 2018-07-16 10:38:14 -04:00
parent 9b5b997b6d
commit cab8c01833
8 changed files with 24 additions and 21 deletions

5
css/_mixins.scss Normal file

@ -0,0 +1,5 @@
@mixin borderRadius($property) {
-webkit-border-radius: $property;
-moz-border-radius: $property;
border-radius: $property;
}

@ -1,3 +1,5 @@
@import "mixins";
#cmpy-mgmt-container p, #cmpy-mgmt-container p,
#cmpy-mgmt-container a, #cmpy-mgmt-container a,
#cmpy-mgmt-container div { #cmpy-mgmt-container div {

@ -1,3 +1,5 @@
@import "mixins";
/* interactivetutorial.css */ /* interactivetutorial.css */
#interactive-tutorial-wrapper { #interactive-tutorial-wrapper {
position: relative; position: relative;
@ -31,12 +33,11 @@
#interactive-tutorial-exit, #interactive-tutorial-exit,
#interactive-tutorial-next, #interactive-tutorial-next,
#interactive-tutorial-back { #interactive-tutorial-back {
@include borderRadius(12px);
color: #aaa; color: #aaa;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000; -moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000;

@ -1,3 +1,4 @@
@import "mixins";
/* CSS for different main menu pages, such as character info, script editor, etc (but excluding /* CSS for different main menu pages, such as character info, script editor, etc (but excluding
terminal which has its own page) */ terminal which has its own page) */
@ -260,12 +261,11 @@
} }
.active-scripts-button { .active-scripts-button {
@include borderRadius(12px);
color: #aaa; color: #aaa;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000; -moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000;

@ -1,3 +1,4 @@
@import "mixins";
/* css for Missions */ /* css for Missions */
/* Hacking missions */ /* Hacking missions */
@ -56,11 +57,9 @@
} }
.hack-mission-cpu-node { .hack-mission-cpu-node {
@include borderRadius(50%);
width: 100%; width: 100%;
height: 100%; height: 100%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
} }
.hack-mission-firewall-node { .hack-mission-firewall-node {

@ -1,3 +1,4 @@
@import "mixins";
/* Pop-up boxes */ /* Pop-up boxes */
.popup-box-container { .popup-box-container {
display: none; /* Hidden by default */ display: none; /* Hidden by default */
@ -74,13 +75,11 @@
} }
.dialog-box-close-button { .dialog-box-close-button {
@include borderRadius(12px);
float: right; float: right;
color: #aaa; color: #aaa;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000; -moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000;
@ -155,15 +154,13 @@
} }
#game-options-close-button { #game-options-close-button {
@include borderRadius(12px);
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;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px #fff;
-moz-box-shadow: 1px 1px 3px #000; -moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000;

@ -1,3 +1,4 @@
@import "mixins";
:root{ :root{
--my-font-color: #6f3; --my-font-color: #6f3;
--my-background-color: #000; --my-background-color: #000;
@ -446,12 +447,11 @@ a:link, a:visited {
#character-overview-save-button, #character-overview-save-button,
#character-overview-options-button { #character-overview-options-button {
@include borderRadius(12px);
color: #aaa; color: #aaa;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000; -moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000;

@ -1,3 +1,4 @@
@import "mixins";
/* Both Work in progress and BitNode stuff */ /* Both Work in progress and BitNode stuff */
.generic-fullscreen-container { .generic-fullscreen-container {
color: var(--my-font-color); color: var(--my-font-color);
@ -16,15 +17,13 @@
} }
#work-in-progress-cancel-button { #work-in-progress-cancel-button {
@include borderRadius(12px);
color: #aaa; color: #aaa;
float: left; float: left;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
margin: 10px; margin: 10px;
padding: 5px; padding: 5px;
border-radius: 12px;
border: 3px solid #fff; border: 3px solid #fff;
-moz-box-shadow: 1px 1px 3px #000; -moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000;