mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-26 17:16:11 -05:00
Update .scss files to fix deprecated syntax
hsl and hsla now require a % for the saturation and lightness values division is now handled with the function math.div() rather than a slash This removes many deprecation warnings
This commit is contained in:
BryceLTaylor
parent
2ebdd767cc
commit
ccedbacb7d
18 changed files with 93 additions and 89 deletions
|
|
@ -1,70 +1,70 @@
|
|||
/* UI Primary Colors */
|
||||
$ui-blue: hsla(215, 100, 65, 1); // #4C97FF Motion Primary
|
||||
$ui-blue-dark: hsla(215, 65, 55, 1); // #3373CC Motion Secondary
|
||||
$ui-blue-10percent: hsla(215, 100, 65, .1);
|
||||
$ui-blue-25percent: hsla(215, 100, 65, .25);
|
||||
$ui-blue: hsla(215, 100%, 65%, 1); // #4C97FF Motion Primary
|
||||
$ui-blue-dark: hsla(215, 65%, 55%, 1); // #3373CC Motion Secondary
|
||||
$ui-blue-10percent: hsla(215, 100%, 65%, .1);
|
||||
$ui-blue-25percent: hsla(215, 100%, 65%, .25);
|
||||
|
||||
$ui-orange: hsla(38, 100, 55, 1); // #FFAB19 Control Primary
|
||||
$ui-orange-high-contrast: hsla(30, 100, 55, 1); // #FFAB19 Control Primary
|
||||
$ui-orange-10percent: hsla(35, 90, 55, .1);
|
||||
$ui-orange-25percent: hsla(35, 90, 55, .25);
|
||||
$ui-orange-90percent: hsla(38, 100, 55, .9);
|
||||
$ui-orange: hsla(38, 100%, 55%, 1); // #FFAB19 Control Primary
|
||||
$ui-orange-high-contrast: hsla(30, 100%, 55%, 1); // #FFAB19 Control Primary
|
||||
$ui-orange-10percent: hsla(35, 90%, 55%, .1);
|
||||
$ui-orange-25percent: hsla(35, 90%, 55%, .25);
|
||||
$ui-orange-90percent: hsla(38, 100%, 55%, .9);
|
||||
|
||||
$ui-dark-orange: hsla(30, 100, 55, 1); // ##FF8C1A Variables Primary
|
||||
$ui-dark-orange: hsla(30, 100%, 55%, 1); // ##FF8C1A Variables Primary
|
||||
|
||||
$ui-red: hsla(20, 100%, 55%, 1); /* #FF661A */
|
||||
$ui-red-25percent: hsla(20, 100%, 55%, .25);
|
||||
$ui-green-35percent: rgba(126, 225, 195, .35);
|
||||
|
||||
$ui-light-gray: hsla(0, 0, 98, 1); //#FAFAFA
|
||||
$ui-gray: hsla(0, 0, 95, 1); //#F2F2F2
|
||||
$ui-dark-gray: hsla(0, 0, 70, 1); //#B3B3B3
|
||||
$ui-light-gray: hsla(0, 0%, 98%, 1); //#FAFAFA
|
||||
$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
|
||||
$background-color: hsla(0, 0%, 99%, 1); //#FDFDFD
|
||||
|
||||
$motion-blue-3: hsla(215, 60, 50, 1);//#3373CC
|
||||
$motion-blue-3: hsla(215, 60%, 50%, 1);//#3373CC
|
||||
|
||||
/* UI Secondary Colors */
|
||||
/* 3.0 colors */
|
||||
/* Using www naming convention for now, should be consistent with gui */
|
||||
$ui-aqua: hsla(163, 85, 40, 1); // #0FBD8C Extension Primary
|
||||
$ui-aqua-dark: hsla(163, 85, 30, 1); // #0B8E69 Extension Aqua 3
|
||||
$ui-purple: hsla(260, 100, 70, 1); // #9966FF Looks Primary
|
||||
$ui-purple-dark: hsla(260, 60, 60, 1); // #774DCB Looks Secondary
|
||||
$ui-aqua: hsla(163, 85%, 40%, 1); // #0FBD8C Extension Primary
|
||||
$ui-aqua-dark: hsla(163, 85%, 30%, 1); // #0B8E69 Extension Aqua 3
|
||||
$ui-purple: hsla(260, 100%, 70%, 1); // #9966FF Looks Primary
|
||||
$ui-purple-dark: hsla(260, 60%, 60%, 1); // #774DCB Looks Secondary
|
||||
$ui-magenta: hsla(300, 53%, 60%, 1); /* #CF63CF Sounds Primary */
|
||||
|
||||
$ui-yellow: hsla(45, 100, 50, 1); // #FFBF00 Events Primary
|
||||
$ui-coral: hsla(350, 100, 70, 1); // #FF6680 More Blocks Primary
|
||||
$ui-coral-dark: hsla(350, 100, 60, 1); // #FF3355 More Blocks tertiary
|
||||
$ui-yellow: hsla(45, 100%, 50%, 1); // #FFBF00 Events Primary
|
||||
$ui-coral: hsla(350, 100%, 70%, 1); // #FF6680 More Blocks Primary
|
||||
$ui-coral-dark: hsla(350, 100%, 60%, 1); // #FF3355 More Blocks tertiary
|
||||
|
||||
$ui-white: hsla(0, 100%, 100%, 1); //#FFF
|
||||
$ui-white-15percent: hsla(0, 100%, 100%, .15); //#FFF
|
||||
$ui-light-primary: hsl(215, 100, 95);
|
||||
$ui-light-primary-transparent: hsla(215, 100, 95, 0);
|
||||
$ui-light-primary: hsl(215, 100%, 95%);
|
||||
$ui-light-primary-transparent: hsla(215, 100%, 95%, 0);
|
||||
|
||||
$ui-border: hsla(0, 0, 85, 1); //#D9D9D9
|
||||
$ui-border: hsla(0, 0%, 85%, 1); //#D9D9D9
|
||||
|
||||
/* modals */
|
||||
$ui-mint-green: hsl(163, 69, 44);
|
||||
$ui-light-mint: hsl(163, 53, 67);
|
||||
$ui-mint-green: hsl(163, 69%, 44%);
|
||||
$ui-light-mint: hsl(163, 53%, 67%);
|
||||
|
||||
/* Overlay UI Gray Colors */
|
||||
$active-gray: hsla(0, 0, 0, .1);
|
||||
$active-dark-gray: hsla(0, 0, 0, .2);
|
||||
$box-shadow-gray: hsla(0, 0, 0, .25);
|
||||
$box-shadow-light-gray: hsla(0, 0, 0, .15);
|
||||
$overlay-gray: hsla(0, 0, 0, .75);
|
||||
$active-gray: hsla(0, 0%, 0%, .1);
|
||||
$active-dark-gray: hsla(0, 0%, 0%, .2);
|
||||
$box-shadow-gray: hsla(0, 0%, 0%, .25);
|
||||
$box-shadow-light-gray: hsla(0, 0%, 0%, .15);
|
||||
$overlay-gray: hsla(0, 0%, 0%, .75);
|
||||
$transparent-light-blue: rgba(229, 240, 254, 0);
|
||||
|
||||
/* Typography Colors */
|
||||
$header-gray: hsla(225, 15, 40, 1); //#575E75
|
||||
$type-gray: hsla(225, 15, 40, 1); //#575E75
|
||||
$type-gray-75percent: hsla(225, 15, 40, .75);
|
||||
$type-gray-60percent: hsla(225, 15, 40, .6);
|
||||
$type-white: hsla(0, 100, 100, 1); //#FFF
|
||||
$header-gray: hsla(225, 15%, 40%, 1); //#575E75
|
||||
$type-gray: hsla(225, 15%, 40%, 1); //#575E75
|
||||
$type-gray-75percent: hsla(225, 15%, 40%, .75);
|
||||
$type-gray-60percent: hsla(225, 15%, 40%, .6);
|
||||
$type-white: hsla(0, 100%, 100%, 1); //#FFF
|
||||
|
||||
$link-blue: $ui-blue;
|
||||
|
||||
/* Down Deep */
|
||||
$dd-darkblue: hsla(195, 72.4, 17.1, 1);
|
||||
$dd-medium-blue: hsla(195, 72.4, 42, .65);
|
||||
$dd-darkblue: hsla(195, 72.4%, 17.1%, 1);
|
||||
$dd-medium-blue: hsla(195, 72.4%, 42%, .65);
|
||||
|
|
|
|||
|
|
@ -9,8 +9,10 @@
|
|||
// Configuration
|
||||
//
|
||||
|
||||
@use "sass:math";
|
||||
|
||||
$font-size: 16px; // Your base font-size in pixels
|
||||
$em: $font-size / 1em; // Shorthand for outputting ems
|
||||
$em: math.div($font-size, 1em); // Shorthand for outputting ems
|
||||
|
||||
$column: 60px; // The column-width of your grid in pixels
|
||||
$gutter: 20px; // The gutter-width of your grid in pixels
|
||||
|
|
@ -21,18 +23,18 @@ $gutter: 20px; // The gutter-width of your grid in pixels
|
|||
// Column-widths in variables, in ems
|
||||
//
|
||||
|
||||
$cols1: ( 1 * ($column + $gutter) - $gutter) / $em;
|
||||
$cols2: ( 2 * ($column + $gutter) - $gutter) / $em;
|
||||
$cols3: ( 3 * ($column + $gutter) - $gutter) / $em;
|
||||
$cols4: ( 4 * ($column + $gutter) - $gutter) / $em;
|
||||
$cols5: ( 5 * ($column + $gutter) - $gutter) / $em;
|
||||
$cols6: ( 6 * ($column + $gutter) - $gutter) / $em;
|
||||
$cols7: ( 7 * ($column + $gutter) - $gutter) / $em;
|
||||
$cols8: ( 8 * ($column + $gutter) - $gutter) / $em;
|
||||
$cols9: ( 9 * ($column + $gutter) - $gutter) / $em;
|
||||
$cols10: (10 * ($column + $gutter) - $gutter) / $em;
|
||||
$cols11: (11 * ($column + $gutter) - $gutter) / $em;
|
||||
$cols12: (12 * ($column + $gutter) - $gutter) / $em;
|
||||
$cols1: math.div( 1 * ($column + $gutter) - $gutter, $em);
|
||||
$cols2: math.div( 2 * ($column + $gutter) - $gutter, $em);
|
||||
$cols3: math.div( 3 * ($column + $gutter) - $gutter, $em);
|
||||
$cols4: math.div( 4 * ($column + $gutter) - $gutter, $em);
|
||||
$cols5: math.div( 5 * ($column + $gutter) - $gutter, $em);
|
||||
$cols6: math.div( 6 * ($column + $gutter) - $gutter, $em);
|
||||
$cols7: math.div( 7 * ($column + $gutter) - $gutter, $em);
|
||||
$cols8: math.div( 8 * ($column + $gutter) - $gutter, $em);
|
||||
$cols9: math.div( 9 * ($column + $gutter) - $gutter, $em);
|
||||
$cols10: math.div(10 * ($column + $gutter) - $gutter, $em);
|
||||
$cols11: math.div(11 * ($column + $gutter) - $gutter, $em);
|
||||
$cols12: math.div(12 * ($column + $gutter) - $gutter, $em);
|
||||
|
||||
$desktop: 942px;
|
||||
$tabletPortrait: 768px;
|
||||
|
|
@ -69,7 +71,7 @@ $medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$
|
|||
//
|
||||
|
||||
@mixin width ($cols: 1) {
|
||||
width: ($cols * ($column + $gutter) - $gutter) / $em;
|
||||
width: math.div($cols * ($column + $gutter) - $gutter, $em);
|
||||
}
|
||||
|
||||
//4 columns
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
@use "sass:math";
|
||||
|
||||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
|
||||
.card {
|
||||
border-radius: 8px / $em;
|
||||
border-radius: math.div(8px, $em);
|
||||
box-shadow: 0 0 0 .125rem $active-gray;
|
||||
background-color: $ui-white;
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
.slick-next,
|
||||
.slick-prev {
|
||||
margin-top: -$icon-size / 2;
|
||||
margin-top: -$icon-size * 0.5;
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
|
||||
|
|
|
|||
|
|
@ -24,14 +24,14 @@ $navigation-height: 50px;
|
|||
|
||||
.close {
|
||||
float: right;
|
||||
margin-top: $navigation-height / 4;
|
||||
border-radius: $navigation-height / 4;
|
||||
margin-top: $navigation-height * 0.25;
|
||||
border-radius: $navigation-height * 0.25;
|
||||
background-color: $box-shadow-gray;
|
||||
width: $navigation-height / 2;
|
||||
height: $navigation-height / 2;
|
||||
width: $navigation-height * 0.5;
|
||||
height: $navigation-height * 0.5;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
line-height: $navigation-height / 2;
|
||||
line-height: $navigation-height * 0.5;
|
||||
color: $ui-white;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -$arrow-border-width / 2;
|
||||
top: -$arrow-border-width * 0.5;
|
||||
right: 10%;
|
||||
|
||||
transform: rotate(45deg);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "sass:math";
|
||||
|
||||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
|
||||
|
|
@ -294,7 +296,7 @@
|
|||
ul,
|
||||
ol {
|
||||
&.indented {
|
||||
padding-left: $cols1 + (20px / $em);
|
||||
padding-left: $cols1 + math.div(20px, $em);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
display: block;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: -$arrow-border-width / 2;
|
||||
left: -$arrow-border-width * 0.5;
|
||||
|
||||
transform: rotate(45deg);
|
||||
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
|
||||
&:before {
|
||||
left: unset;
|
||||
right: -$arrow-border-width / 2;
|
||||
right: -$arrow-border-width * 0.5;
|
||||
border-top: 1px solid $active-gray;
|
||||
border-right: 1px solid $active-gray;
|
||||
border-bottom: none;
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
display: block;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: -$arrow-border-width / 2;
|
||||
left: -$arrow-border-width * 0.5;
|
||||
|
||||
transform: rotate(45deg);
|
||||
|
||||
|
|
|
|||
|
|
@ -46,8 +46,8 @@
|
|||
$modal-close-size: 1rem;
|
||||
.modal-content-close {
|
||||
position: absolute;
|
||||
top: $modal-close-size / 2;
|
||||
right: $modal-close-size / 2;
|
||||
top: $modal-close-size * 0.5;
|
||||
right: $modal-close-size * 0.5;
|
||||
border-radius: $modal-close-size;
|
||||
background-color: $active-dark-gray;
|
||||
cursor: pointer;
|
||||
|
|
@ -58,7 +58,7 @@ $modal-close-size: 1rem;
|
|||
}
|
||||
|
||||
.modal-content-close-img {
|
||||
padding-top: $modal-close-size / 2;
|
||||
padding-top: $modal-close-size * 0.5;
|
||||
}
|
||||
|
||||
/* Close button, Submit button, etc. */
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
transform: translate(-2.75rem, 2rem);
|
||||
visibility: hidden;
|
||||
z-index: 1;
|
||||
margin-top: $arrow-border-width / 2;
|
||||
margin-top: $arrow-border-width * 0.5;
|
||||
border: 1px solid $active-gray;
|
||||
border-radius: 5px;
|
||||
background-color: $ui-blue;
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -$arrow-border-width / 2;
|
||||
top: -$arrow-border-width * 0.5;
|
||||
left: $arrow-border-width;
|
||||
|
||||
transform: rotate(45deg);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ $masthead-breakpoint: "only screen and (max-width : 960px)";
|
|||
$masthead-breakpoint-wave: "only screen and (max-width : 1060px)";
|
||||
$timeline-breakpoint: "only screen and (max-width : 1030px)";
|
||||
|
||||
$ui-purple-dark: hsla(260, 55, 55, 1);
|
||||
$ui-purple-dark: hsla(260, 55%, 55%, 1);
|
||||
// $motion-blue-3 #3373CC
|
||||
|
||||
.adaptation .button{
|
||||
|
|
@ -240,7 +240,7 @@ a, a:link, a:visited, a:active{
|
|||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.founders-signature{
|
||||
display: flex;
|
||||
.mitch-photo {
|
||||
|
|
@ -1137,7 +1137,7 @@ img.comment-viz{
|
|||
}
|
||||
|
||||
@media #{$intermediate} {
|
||||
max-width: 620px;
|
||||
max-width: 620px;
|
||||
}
|
||||
}
|
||||
.images{
|
||||
|
|
@ -1183,7 +1183,7 @@ img.comment-viz{
|
|||
}
|
||||
}
|
||||
.bubble{
|
||||
margin-left: 0px;
|
||||
margin-left: 0px;
|
||||
color: $ui-white;
|
||||
font-weight: bold;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
|
|
@ -1236,7 +1236,7 @@ img.comment-viz{
|
|||
max-width: 600px;
|
||||
width: 100%;
|
||||
margin: 80px auto 0;
|
||||
|
||||
|
||||
h4{
|
||||
margin-top: 56px;
|
||||
}
|
||||
|
|
@ -1454,7 +1454,7 @@ img.comment-viz{
|
|||
margin: 20px auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.initiatives-adaptation, .initiatives-community {
|
||||
.world{
|
||||
max-width: 600px;
|
||||
|
|
@ -1943,7 +1943,7 @@ img.comment-viz{
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
|
||||
|
||||
@media #{$intermediate} {
|
||||
max-width: 620px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ $developer-spot: $ui-aqua;
|
|||
}
|
||||
|
||||
.band {
|
||||
$band-color: hsla(360, 100, 100, .15);
|
||||
$band-color: hsla(360, 100%, 100%, .15);
|
||||
|
||||
margin-top: 2rem;
|
||||
background-color: $band-color;
|
||||
|
|
@ -240,7 +240,3 @@ $developer-spot: $ui-aqua;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "sass:math";
|
||||
|
||||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
|
||||
|
|
@ -56,7 +58,7 @@
|
|||
|
||||
.download-info {
|
||||
padding-right: $cols1;
|
||||
max-width: $cols7 + ($gutter / $em);
|
||||
max-width: $cols7 + math.div($gutter, $em);
|
||||
align-items: flex-start;
|
||||
|
||||
.download-copy {
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ $story-width: $cols3;
|
|||
}
|
||||
|
||||
.band {
|
||||
$band-color: hsla(360, 100, 100, .15);
|
||||
$band-color: hsla(360, 100%, 100%, .15);
|
||||
|
||||
margin-top: 2rem;
|
||||
background-color: $band-color;
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
}
|
||||
|
||||
.studio-report-selected {
|
||||
background: hsla(215, 100, 65, .15);
|
||||
background: hsla(215, 100%, 65%, .15);
|
||||
}
|
||||
|
||||
.studio-report-header-selected {
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@
|
|||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
color: #575e75;
|
||||
&.active {
|
||||
background: $ui-blue;
|
||||
&.active {
|
||||
background: $ui-blue;
|
||||
color: white;
|
||||
}
|
||||
&:active {
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
}
|
||||
|
||||
.studio-projects-empty-text {
|
||||
color: hsla(215, 100, 65, .75);
|
||||
color: hsla(215, 100%, 65%, .75);
|
||||
max-width: 325px;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ $story-width: $cols3;
|
|||
}
|
||||
|
||||
.band {
|
||||
$band-color: hsla(360, 100, 100, .15);
|
||||
$band-color: hsla(360, 100%, 100%, .15);
|
||||
|
||||
margin-top: 2rem;
|
||||
background-color: $band-color;
|
||||
|
|
|
|||
Loading…
Reference in a new issue