mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-06-16 23:10:23 -04:00
Add Global Colors and Updated SCSS / Linter
Created a new global style sheet to manage colors and converted all the current SCSS to match the new color scheme.
This commit is contained in:
carljbowman
parent
ab40dd8aa3
commit
41e4b3b990
18 changed files with 171 additions and 100 deletions
.sass-lint.yml
src
colors.scssmain.scss
components
activity
avatar
box
carousel
footer
forms
intro
modal
navigation
news
thumbnail
views/hoc
|
|
@ -1,4 +1,5 @@
|
|||
rules:
|
||||
color-literals: 2
|
||||
final-newline: 2
|
||||
hex-notation: 2
|
||||
indentation:
|
||||
|
|
|
|||
28
src/colors.scss
Normal file
28
src/colors.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
/* UI Primary Colors */
|
||||
$ui-blue: hsla(200, 90, 55, 1); // #25AFF4
|
||||
$ui-orange: hsla(35, 90, 55, 1); // #F49D25
|
||||
$ui-gray: hsla(0, 0, 95, 1); //#F2F2F2
|
||||
$ui-dark-gray: hsla(0, 0, 70, 1); //#B3B3B3
|
||||
|
||||
$background-color: hsla(0, 0, 99, 1); //#FDFDFD
|
||||
|
||||
|
||||
/* UI Secondary Colors */
|
||||
$ui-aqua: hsla(170, 70, 50, 1); //#26D9BB
|
||||
$ui-white: #fff;
|
||||
|
||||
$ui-border: hsla(0, 0, 85, 1); //#D9D9D9
|
||||
$box-shadow-gray: hsla(0, 0, 0, .25);
|
||||
|
||||
|
||||
/* Overlay UI Gray Colors */
|
||||
$active-gray: hsla(0, 0, 0, .1);
|
||||
$active-dark-gray: hsla(0, 0, 0, .2);
|
||||
|
||||
|
||||
/* Typography Colors */
|
||||
$header-gray: hsla(0, 0, 42, 1); //#6B6B6B
|
||||
$type-gray: hsla(0, 0, 42, 1); //#6B6B6B
|
||||
$type-white: #fff;
|
||||
|
||||
$link-blue: $ui-blue;
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@import "../../colors";
|
||||
|
||||
.activity {
|
||||
ul {
|
||||
display: block;
|
||||
|
|
@ -35,7 +37,7 @@
|
|||
}
|
||||
|
||||
.stamp {
|
||||
color: #999;
|
||||
color: $ui-dark-gray;
|
||||
font-size: .65rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.avatar {
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid $ui-border;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,21 @@
|
|||
@import "../../colors";
|
||||
|
||||
$base-bg: $ui-white;
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
border: 1px solid #e0e0e0;
|
||||
border: 1px solid $ui-border;
|
||||
border-radius: 10px 10px 0 0;
|
||||
box-shadow: 0 2px 3px rgba(34, 25, 25, .3);
|
||||
width: 100%;
|
||||
|
||||
.box-header {
|
||||
display: block;
|
||||
clear: both;
|
||||
margin: 0;
|
||||
border-top: 1px solid white;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 1px solid $ui-white;
|
||||
border-bottom: 1px solid $ui-border;
|
||||
border-radius: 10px 10px 0 0;
|
||||
background-color: #efefef;
|
||||
background-color: $ui-gray;
|
||||
|
||||
padding: 8px 20px;
|
||||
height: 20px;
|
||||
|
|
@ -38,7 +41,7 @@
|
|||
.box-content {
|
||||
display: block;
|
||||
clear: both;
|
||||
background-color: white;
|
||||
background-color: $base-bg;
|
||||
padding: 8px 20px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import "../../colors";
|
||||
|
||||
.carousel {
|
||||
$icon-size: 40px;
|
||||
$button-offset: $icon-size + 5px;
|
||||
|
|
@ -16,7 +18,7 @@
|
|||
height: $icon-size;
|
||||
|
||||
&:before {
|
||||
color: #ddd;
|
||||
color: $ui-dark-gray;
|
||||
font-size: $icon-size;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
@import "../../colors";
|
||||
|
||||
#footer {
|
||||
display: block;
|
||||
background-color: #ececec;
|
||||
background-color: $ui-gray;
|
||||
padding: 10px 0;
|
||||
color: #666;
|
||||
color: $type-gray;
|
||||
|
||||
.lists {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,31 +1,35 @@
|
|||
@import "../../colors";
|
||||
|
||||
$base-bg: $ui-white;
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
margin: .5em 0;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
box-shadow: px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: #24a3ec;
|
||||
box-shadow: 0 1px 1px $box-shadow-gray;
|
||||
background-color: $ui-blue;
|
||||
cursor: pointer;
|
||||
padding: .75em 1em;
|
||||
color: white;
|
||||
color: $type-white;
|
||||
font-size: .8rem;
|
||||
font-weight: bold;
|
||||
|
||||
&.white {
|
||||
border-top: 1px inset rgba(0, 0, 0, .1);
|
||||
background-color: white;
|
||||
color: #24a3ec;
|
||||
border-top: 1px inset $active-gray;
|
||||
background-color: $base-bg;
|
||||
color: $ui-blue;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
|
||||
box-shadow: 0 2px 2px $box-shadow-gray;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
|
||||
box-shadow: inset 0 1px 2px $box-shadow-gray;
|
||||
}
|
||||
|
||||
&:focus{
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,34 @@
|
|||
@import "../../colors";
|
||||
|
||||
$base-bg: $ui-white;
|
||||
$focus-bg: lighten($ui-blue, 35%);
|
||||
$fail-bg: lighten($ui-orange, 35%);
|
||||
$pass-bg: lighten($ui-aqua, 35%);
|
||||
|
||||
.input {
|
||||
transition: all 1s ease;
|
||||
margin: .5em 0;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
border: 1px solid $active-gray;
|
||||
border-radius: 5px;
|
||||
background-color: #f7f7f7;
|
||||
background-color: $base-bg;
|
||||
padding: .75em 1em;
|
||||
color: black;
|
||||
color: $type-gray;
|
||||
font-size: .8rem;
|
||||
|
||||
&:focus {
|
||||
transition: all 1s ease;
|
||||
outline: none;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
background-color: #d3eaf8;
|
||||
border: 1px solid $active-dark-gray;
|
||||
background-color: $focus-bg;
|
||||
}
|
||||
|
||||
&.fail {
|
||||
border: 1px solid #eab012;
|
||||
background-color: #fff7df;
|
||||
border: 1px solid $active-dark-gray;
|
||||
background-color: $fail-bg;
|
||||
}
|
||||
|
||||
&.pass {
|
||||
border: 1px solid #55db58;
|
||||
background-color: #eafdea;
|
||||
border: 1px solid $active-dark-gray;
|
||||
background-color: $pass-bg;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import "../../colors";
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
|
|
@ -12,7 +14,7 @@
|
|||
width: calc(66% - 20px);
|
||||
|
||||
h1 {
|
||||
color: #f9a739;
|
||||
color: $ui-orange;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
|
@ -67,7 +69,7 @@
|
|||
left: 43px;
|
||||
z-index: 0;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 5px #fff;
|
||||
box-shadow: 0 0 5px $ui-white;
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
}
|
||||
|
|
@ -142,7 +144,7 @@
|
|||
&.sprite-3 .subtext {
|
||||
top: 63px;
|
||||
left: 60px;
|
||||
color: #fff;
|
||||
color: $ui-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -152,7 +154,8 @@
|
|||
}
|
||||
|
||||
.project-count {
|
||||
color: hsl(318, 50%, 52%);
|
||||
$project-count-color: hsl(318, 50%, 52%);
|
||||
color: $project-count-color;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -162,7 +165,7 @@
|
|||
font-size: 12px;
|
||||
|
||||
a {
|
||||
border-right: 1px solid #000;
|
||||
border-right: 1px solid $type-gray;
|
||||
padding: 0 5px;
|
||||
|
||||
&:last-child { border-right: 0; }
|
||||
|
|
@ -174,10 +177,10 @@
|
|||
.video {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border: 1px solid #eee;
|
||||
border: 1px solid $ui-border;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 3px;
|
||||
background-color: #f7f7f7;
|
||||
background-color: $ui-gray;
|
||||
padding: 10px;
|
||||
width: 34%;
|
||||
height: 208px;
|
||||
|
|
@ -189,9 +192,9 @@
|
|||
top: calc(50% - 25px);
|
||||
left: calc(50% - 35px);
|
||||
opacity: .8;
|
||||
border: 5px solid #ccc;
|
||||
border: 5px solid $ui-border;
|
||||
border-radius: 20px;
|
||||
background-color: #666;
|
||||
background-color: $type-gray;
|
||||
width: 70px;
|
||||
height: 50px;
|
||||
|
||||
|
|
@ -204,13 +207,14 @@
|
|||
}
|
||||
|
||||
&:after {
|
||||
$play-arrow: rgba(255, 255, 255, 0);
|
||||
top: 37px;
|
||||
left: 28px;
|
||||
margin-top: -30px;
|
||||
border: solid transparent;
|
||||
border-width: 18px;
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
border-left-color: #fff;
|
||||
border-color: $play-arrow;
|
||||
border-left-color: $ui-white;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: " ";
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
@import "../../colors";
|
||||
|
||||
$base-bg: $ui-white;
|
||||
|
||||
/* Copied from the un-styleable react-modal */
|
||||
|
||||
.ReactModal__Overlay {
|
||||
z-index: 100;
|
||||
background-color: rgba(0, 0, 0, .75);
|
||||
background-color: $overlay-gray;
|
||||
}
|
||||
|
||||
.ReactModal__Content {
|
||||
|
|
@ -13,7 +17,7 @@
|
|||
left: 40px;
|
||||
outline: none;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
background: $base-bg;
|
||||
padding: 20px;
|
||||
overflow: visible;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
|
@ -36,15 +40,15 @@
|
|||
right: 0;
|
||||
margin-top: -$modal-close-size/2;
|
||||
margin-right: -$modal-close-size/2;
|
||||
border: 2px solid #ddd;
|
||||
border: 2px solid $ui-border;
|
||||
border-radius: $modal-close-size/2;
|
||||
background-color: #666;
|
||||
background-color: $active-dark-gray;
|
||||
cursor: pointer;
|
||||
width: $modal-close-size;
|
||||
height: $modal-close-size;
|
||||
text-align: center;
|
||||
line-height: $modal-close-size;
|
||||
color: #fff;
|
||||
color: $type-white;
|
||||
font-size: $modal-close-size;
|
||||
|
||||
&:before {
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
$base-background-color: #2aa3ef;
|
||||
$active-background-color: rgba(0, 0, 0, .1);
|
||||
$border-color: rgb(20, 154, 203);
|
||||
|
|
@ -1,17 +1,17 @@
|
|||
@import "colors";
|
||||
@import "../../colors";
|
||||
|
||||
.dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
border: 1px solid $active-background-color;
|
||||
border: 1px solid $active-gray;
|
||||
border-radius: 0 0 5px 5px;
|
||||
background-color: $base-background-color;
|
||||
background-color: $ui-blue;
|
||||
padding: 10px;
|
||||
min-width: 160px;
|
||||
max-width: 260px;
|
||||
overflow: visible;
|
||||
color: white;
|
||||
color: $type-white;
|
||||
font-size: .8125rem;
|
||||
font-weight: normal;
|
||||
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
a {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
color: $type-white;
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
&.divider {
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid #149acb;
|
||||
border-top: 1px solid $active-gray;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
padding: 0 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: $active-background-color;
|
||||
background-color: $active-gray;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -69,11 +69,11 @@
|
|||
|
||||
transform: rotate(45deg);
|
||||
|
||||
border-top: 1px solid $active-background-color;
|
||||
border-left: 1px solid $active-background-color;
|
||||
border-top: 1px solid $active-gray;
|
||||
border-left: 1px solid $active-gray;
|
||||
border-radius: 5px;
|
||||
|
||||
background-color: $base-background-color;
|
||||
background-color: $ui-blue;
|
||||
width: $arrow-border-width;
|
||||
height: $arrow-border-width;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "colors";
|
||||
@import "../../colors";
|
||||
|
||||
#navigation {
|
||||
display: block;
|
||||
|
|
@ -6,9 +6,11 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
border-bottom: 1px solid $active-gray;
|
||||
|
||||
box-shadow: 0 0 3px $box-shadow-gray;
|
||||
background-color: $ui-blue;
|
||||
|
||||
box-shadow: 0 1px 2px rgba(0,0,0, .4);
|
||||
background-color: $base-background-color;
|
||||
|
||||
width: 100%;
|
||||
/* NOTE: Height should match offset settings in main.scss file */
|
||||
|
|
@ -65,20 +67,20 @@
|
|||
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
color: white;
|
||||
color: $type-white;
|
||||
font-size: .85rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> a:hover {
|
||||
background-color: $active-background-color;
|
||||
background-color: $active-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 0 20px;
|
||||
border-right: 0;
|
||||
color: white;
|
||||
color: $type-white;
|
||||
flex-grow: 3;
|
||||
|
||||
form {
|
||||
|
|
@ -90,7 +92,7 @@
|
|||
margin-top: 5px;
|
||||
outline: none;
|
||||
border: 0;
|
||||
background-color: $active-background-color;
|
||||
background-color: $active-gray;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -114,16 +116,17 @@
|
|||
padding-left: 40px;
|
||||
width: calc(100% - 50px);
|
||||
height: 40px;
|
||||
color: white;
|
||||
color: $type-white;
|
||||
font-size: .85em;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, .75);
|
||||
$placeholder-transparent: rgba(255, 255, 255, .75);
|
||||
color: $placeholder-transparent;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
transition: .15s ease background-color;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
background-color: $active-dark-gray;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -138,7 +141,7 @@
|
|||
align-self: flex-end;
|
||||
|
||||
a:hover {
|
||||
background-color: $active-background-color;
|
||||
background-color: $active-gray;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -179,8 +182,8 @@
|
|||
|
||||
.account-nav {
|
||||
.userInfo {
|
||||
padding-top: 11px;
|
||||
padding-bottom: 6px;
|
||||
padding-top: 14px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
> a {
|
||||
|
|
@ -188,7 +191,7 @@
|
|||
font-weight: normal;
|
||||
|
||||
.avatar {
|
||||
margin-right: 5px;
|
||||
margin-right: 10px;
|
||||
border-radius: 3px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
@ -197,7 +200,7 @@
|
|||
|
||||
&:after {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-left: 8px;
|
||||
|
||||
background-image: url("/images/dropdown.png");
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import "../../colors";
|
||||
|
||||
.news {
|
||||
ul {
|
||||
display: block;
|
||||
|
|
@ -32,7 +34,7 @@
|
|||
h4 {
|
||||
display: block;
|
||||
|
||||
color: #1aa0d8;
|
||||
color: $link-blue;
|
||||
font-size: .85rem;
|
||||
}
|
||||
|
||||
|
|
@ -41,13 +43,13 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
color: #322f31;
|
||||
color: $type-gray;
|
||||
font-size: .85rem;
|
||||
}
|
||||
}
|
||||
|
||||
li:nth-child(even) {
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 1px solid $ui-border;
|
||||
border-bottom: 1px solid $ui-border;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import "../../colors";
|
||||
|
||||
.thumbnail {
|
||||
.thumbnail-image,
|
||||
.thumbnail-title,
|
||||
|
|
@ -7,7 +9,7 @@
|
|||
|
||||
.thumbnail-image img {
|
||||
margin-bottom: 2px;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid $ui-border;
|
||||
}
|
||||
|
||||
.thumbnail-title,
|
||||
|
|
@ -26,7 +28,7 @@
|
|||
}
|
||||
|
||||
.thumbnail-extra {
|
||||
color: #666;
|
||||
color: $type-gray;
|
||||
font-size: .8462em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
@import "colors";
|
||||
|
||||
/* Tags */
|
||||
html,
|
||||
body {
|
||||
display: block;
|
||||
margin: 0;
|
||||
background-color: #fdfdfd;
|
||||
background-color: $background-color;
|
||||
padding: 0;
|
||||
color: #322f31;
|
||||
color: $type-gray;
|
||||
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
|
@ -18,7 +20,7 @@ h4 {
|
|||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
color: #554747;
|
||||
color: $header-gray;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
|
@ -37,13 +39,20 @@ a:link,
|
|||
a:visited,
|
||||
a:active {
|
||||
text-decoration: none;
|
||||
color: #1aa0d8;
|
||||
color: $link-blue;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Adds Red outline to Links with no href */
|
||||
|
||||
a[href=""] {
|
||||
$fail-red: #ff0000;
|
||||
outline: 1px solid $fail-red;
|
||||
}
|
||||
|
||||
/* Classes */
|
||||
.inner {
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
@import "../../colors";
|
||||
|
||||
$base-bg: $ui-white;
|
||||
|
||||
#view {
|
||||
padding: 0;
|
||||
|
||||
a[href=""] { outline: 1px solid red; }
|
||||
|
||||
// To be integrated into the Global Typography standards
|
||||
p {
|
||||
line-height: 2em;
|
||||
|
|
@ -23,7 +25,7 @@
|
|||
margin-top: 10px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
background-color: #27d2b0;
|
||||
background-color: $ui-aqua;
|
||||
|
||||
padding: 10px 0;
|
||||
|
||||
|
|
@ -38,7 +40,7 @@
|
|||
max-width: 500px;
|
||||
|
||||
text-align: center;
|
||||
color: white;
|
||||
color: $type-white;
|
||||
}
|
||||
|
||||
.card-deck,
|
||||
|
|
@ -59,7 +61,7 @@
|
|||
display: inline-block;
|
||||
margin: 10px;
|
||||
border-radius: 7px;
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
background-color: $active-gray;
|
||||
padding: 2px;
|
||||
|
||||
width: 30%;
|
||||
|
|
@ -69,7 +71,7 @@
|
|||
.card-info {
|
||||
border-radius: 5px;
|
||||
|
||||
background-color: white;
|
||||
background-color: $base-bg;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -93,7 +95,7 @@
|
|||
}
|
||||
|
||||
.sub-nav {
|
||||
color: white;
|
||||
color: $type-white;
|
||||
font-size: .8em;
|
||||
font-weight: bold;
|
||||
|
||||
|
|
@ -110,24 +112,24 @@
|
|||
|
||||
a .link {
|
||||
|
||||
border: 2px solid rgba(0, 0, 0, .15);
|
||||
border: 2px solid $active-gray;
|
||||
|
||||
border-radius: 50px;
|
||||
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
color: $type-white;
|
||||
|
||||
|
||||
&:hover {
|
||||
transition: background-color .25s ease;
|
||||
border-color: transparent;
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
background-color: $active-gray;
|
||||
}
|
||||
|
||||
&:active {
|
||||
border: 0 solid transparent;
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .20);
|
||||
box-shadow: inset 0 0 5px $box-shadow-gray;
|
||||
background-color: $active-dark-gray;
|
||||
padding: calc(.75em + 2px) calc(1em + 2px);
|
||||
}
|
||||
}
|
||||
|
|
@ -137,7 +139,7 @@
|
|||
.box section {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .15);
|
||||
border-bottom: 1px solid $ui-border;
|
||||
padding: 30px 0;
|
||||
width: 95%;
|
||||
|
||||
|
|
@ -145,8 +147,8 @@
|
|||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
h3, p {
|
||||
color: #6b6b6b;
|
||||
h3,
|
||||
p {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
|
@ -159,7 +161,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.two-up{
|
||||
&.two-up {
|
||||
|
||||
.column {
|
||||
margin: 10px;
|
||||
|
|
@ -168,7 +170,6 @@
|
|||
max-width: 40%;
|
||||
|
||||
img {
|
||||
border: 2px solid #2aa3ef;
|
||||
border-radius: 5px;
|
||||
|
||||
width: 100%;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue