mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-03-31 23:30:03 -04:00
Merge pull request #1970 from carljbowman/develop
Update WWW to unify color and typography with scratch-gui
This commit is contained in:
Andrew Sliwinski
GitHub
commit
cdeb9f5049
26 changed files with 133 additions and 101 deletions
src
_colors.scssmain.scss
components
forms
grid
informationpage
intro
spinner
thumbnailcolumn
welcome
views
components
conference/2018/schedule
download
explore
messages
preview
search
studentcompleteregistration
studentregistration
teacherregistration
teachers/landing
teacherwaitingroom
wedo2
|
|
@ -1,6 +1,12 @@
|
|||
/* UI Primary Colors */
|
||||
$ui-blue: hsla(200, 90, 55, 1); // #25AFF4
|
||||
$ui-orange: hsla(35, 90, 55, 1); // #F49D25
|
||||
$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-25percent: hsla(35, 90, 55, .25);
|
||||
|
||||
$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
|
||||
|
|
@ -9,21 +15,20 @@ $background-color: hsla(0, 0, 99, 1); //#FDFDFD
|
|||
|
||||
|
||||
/* UI Secondary Colors */
|
||||
$ui-aqua: hsla(170, 70, 50, 1); //#26D9BB
|
||||
$ui-purple: hsla(265, 55, 55, 1); //#824DCB
|
||||
$ui-yellow: hsla(45, 100, 50, 1); //#FFBF00
|
||||
$ui-white: #fff;
|
||||
|
||||
$ui-border: hsla(0, 0, 85, 1); //#D9D9D9
|
||||
|
||||
/* 3.0 colors */
|
||||
/* Using www naming convention for now, should be consistent with gui */
|
||||
$ui-green: hsla(163, 83, 40, 1); // #0fbd8c Pen Primary
|
||||
$ui-coral: hsla(350, 100, 70, 1); // #FF6680 More Primary
|
||||
$ui-coral-dark: hsla(350, 100, 60, 1); // #FF3355 More tertiary
|
||||
$ui-blue-10percent: hsla(215, 100, 65, .1);
|
||||
$ui-blue-25percent: hsla(215, 100, 65, .25);
|
||||
$ui-orange-25percent: hsla(35, 90, 55, .25);
|
||||
$ui-aqua: hsla(163, 85, 40, 1); // #0FBD8C Extension Primary
|
||||
$ui-purple: hsla(260, 100, 70, 1); // #9966FF Looks Primary
|
||||
$ui-purple-dark: hsla(260, 60, 60, 1); // #774DCB Looks Secondary
|
||||
|
||||
$ui-yellow: hsla(45, 100, 50, 1); // #FFBF00 Control 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-border: hsla(0, 0, 85, 1); //#D9D9D9
|
||||
|
||||
/* Overlay UI Gray Colors */
|
||||
$active-gray: hsla(0, 0, 0, .1);
|
||||
|
|
@ -32,16 +37,11 @@ $box-shadow-gray: hsla(0, 0, 0, .25);
|
|||
$overlay-gray: hsla(0, 0, 0, .75);
|
||||
|
||||
/* Typography Colors */
|
||||
$header-gray: hsla(0, 0, 42, 1); //#6B6B6B
|
||||
$type-gray: hsla(0, 0, 42, 1); //#6B6B6B
|
||||
$type-white: #fff;
|
||||
$header-gray: hsla(225, 15, 40, 1); //#575E75
|
||||
$type-gray: hsla(225, 15, 40, 1); //#575E75
|
||||
$type-white: hsla(0, 100, 100, 1); //#FFF
|
||||
|
||||
$link-blue: $ui-blue;
|
||||
|
||||
/* Component colors */
|
||||
$splash-green: #9c0;
|
||||
$splash-pink: #c2479d;
|
||||
$splash-blue: #199ed7;
|
||||
|
||||
/* Down Deep */
|
||||
$dd-darkblue: hsla(195, 72.4, 17.1, 1);
|
||||
|
|
|
|||
|
|
@ -8,31 +8,21 @@ $pass-bg: $ui-aqua;
|
|||
display: inline-block;
|
||||
margin: .5em 0;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 1px $box-shadow-gray;
|
||||
border-radius: .5rem;
|
||||
background-color: $ui-blue;
|
||||
cursor: pointer;
|
||||
padding: .75em 1em;
|
||||
padding: 1em 1.25em;
|
||||
color: $type-white;
|
||||
font-size: .8rem;
|
||||
font-weight: bold;
|
||||
|
||||
/* USER BUTTON STATES */
|
||||
&:hover {
|
||||
box-shadow: 0 2px 2px $box-shadow-gray;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 0 1px 2px $box-shadow-gray;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* DATA BUTTON STATES */
|
||||
&.white {
|
||||
border-top: 1px inset $active-gray;
|
||||
background-color: $base-bg;
|
||||
color: $ui-blue;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
.thumbnail {
|
||||
margin: 7px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 3px $box-shadow-gray;
|
||||
box-shadow: 0 0 0 1px $active-gray;
|
||||
background-color: $ui-white;
|
||||
padding-bottom: 4px;
|
||||
width: $thumbnail-width;
|
||||
|
|
|
|||
|
|
@ -6,11 +6,9 @@
|
|||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
|
||||
$ui-secondary: darken($ui-blue, 10%);
|
||||
|
||||
.title-banner {
|
||||
&.masthead {
|
||||
background-color: $ui-secondary;
|
||||
background-color: $ui-blue-dark;
|
||||
padding-bottom: .5rem;
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -94,37 +94,37 @@
|
|||
|
||||
&.sprite-1 {
|
||||
.circle {
|
||||
background-color: $splash-green;
|
||||
background-color: $ui-aqua;
|
||||
}
|
||||
|
||||
.text {
|
||||
top: 60px;
|
||||
left: 50px;
|
||||
color: $splash-green;
|
||||
color: $ui-aqua;
|
||||
}
|
||||
}
|
||||
|
||||
&.sprite-2 {
|
||||
.circle {
|
||||
background-color: $splash-pink;
|
||||
background-color: $ui-purple;
|
||||
}
|
||||
|
||||
.text {
|
||||
top: 77px;
|
||||
left: 50px;
|
||||
color: $splash-pink;
|
||||
color: $ui-purple;
|
||||
}
|
||||
}
|
||||
|
||||
&.sprite-3 {
|
||||
.circle {
|
||||
background-color: $splash-blue;
|
||||
background-color: $ui-blue;
|
||||
}
|
||||
|
||||
.text {
|
||||
top: 37px;
|
||||
left: 45px;
|
||||
color: $splash-blue;
|
||||
color: $ui-blue;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
|
|
@ -145,19 +145,19 @@
|
|||
|
||||
&.sprite-1 {
|
||||
.circle {
|
||||
box-shadow: 0 0 10px 2px $splash-green;
|
||||
box-shadow: 0 0 10px 2px $ui-aqua;
|
||||
}
|
||||
}
|
||||
|
||||
&.sprite-2 {
|
||||
.circle {
|
||||
box-shadow: 0 0 10px 2px $splash-pink;
|
||||
box-shadow: 0 0 10px 2px $ui-purple;
|
||||
}
|
||||
}
|
||||
|
||||
&.sprite-3 {
|
||||
.circle {
|
||||
box-shadow: 0 0 10px 2px $splash-blue;
|
||||
box-shadow: 0 0 10px 2px $ui-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
content: "";
|
||||
|
||||
.white & {
|
||||
background-color: darken($ui-blue, 8%);
|
||||
background-color: $ui-blue-dark
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
.thumbnail {
|
||||
margin: 7px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 3px $box-shadow-gray;
|
||||
box-shadow: 0 0 0 1px $active-gray;
|
||||
background-color: $ui-white;
|
||||
padding-bottom: 4px;
|
||||
width: $thumbnail-width;
|
||||
|
|
|
|||
|
|
@ -37,31 +37,31 @@
|
|||
|
||||
&.blue {
|
||||
#{$color-bars} {
|
||||
background-color: $splash-blue;
|
||||
background-color: $ui-blue;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $splash-blue;
|
||||
color: $ui-blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.green {
|
||||
#{$color-bars} {
|
||||
background-color: $splash-green;
|
||||
background-color: $ui-aqua;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $splash-green;
|
||||
color: $ui-aqua;
|
||||
}
|
||||
}
|
||||
|
||||
&.pink {
|
||||
#{$color-bars} {
|
||||
background-color: $splash-pink;
|
||||
background-color: $ui-purple;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $splash-pink;
|
||||
color: $ui-purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ html,
|
|||
body {
|
||||
display: block;
|
||||
margin: 0;
|
||||
background-color: darken($ui-blue, 8%);
|
||||
background-color: $ui-blue-dark;
|
||||
padding: 0;
|
||||
color: $type-gray;
|
||||
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
|
||||
|
|
@ -22,34 +22,34 @@ h4 {
|
|||
padding: 0;
|
||||
|
||||
color: $header-gray;
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h5 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-size: .85rem;
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -69,8 +69,8 @@ p {
|
|||
|
||||
margin: 1.5em 0;
|
||||
border: 1px solid $active-gray;
|
||||
border-radius: 5px;
|
||||
background-color: lighten($ui-blue, 40);
|
||||
border-radius: .5rem;
|
||||
background-color: $ui-blue-10percent;
|
||||
padding: 1.25em;
|
||||
|
||||
&.orange {
|
||||
|
|
@ -85,14 +85,14 @@ p {
|
|||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: $ui-blue;
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
|
||||
&:link,
|
||||
&:visited,
|
||||
|
|
@ -103,17 +103,15 @@ a {
|
|||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: darken($ui-blue, 15);
|
||||
color: $ui-blue-dark;
|
||||
}
|
||||
}
|
||||
|
||||
/* Classes */
|
||||
.empty {
|
||||
$bg-blue: #d9edf7;
|
||||
$bg-blue-accent: #bce8f1;
|
||||
border: 1px solid $bg-blue-accent;
|
||||
border: 1px solid $active-gray;
|
||||
border-radius: 5px;
|
||||
background-color: $bg-blue;
|
||||
background-color: $ui-blue-10percent;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
line-height: 2rem;
|
||||
|
|
@ -136,7 +134,7 @@ p {
|
|||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
::selection {
|
||||
|
|
@ -149,7 +147,7 @@ ul {
|
|||
|
||||
line-height: 1.5em;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
font-weight: normal;
|
||||
|
||||
li {
|
||||
margin: .75em 0;
|
||||
|
|
@ -159,10 +157,10 @@ ul {
|
|||
dl {
|
||||
line-height: 1.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
font-weight: normal;
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
|
|
|
|||
|
|
@ -57,9 +57,9 @@ const Components = () => (
|
|||
<span className="type-gray">$type-gray</span>
|
||||
<span className="type-white">$type-white</span>
|
||||
<span className="link-blue">$link-blue</span>
|
||||
<span className="splash-green">$splash-green</span>
|
||||
<span className="splash-pink">$splash-pink</span>
|
||||
<span className="splash-blue">$splash-blue</span>
|
||||
<span className="splash-green">$ui-aqua</span>
|
||||
<span className="splash-pink">$ui-purple</span>
|
||||
<span className="splash-blue">$ui-blue</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -101,15 +101,15 @@
|
|||
}
|
||||
|
||||
.splash-green {
|
||||
background-color: $splash-green;
|
||||
background-color: $ui-aqua;
|
||||
}
|
||||
|
||||
.splash-pink {
|
||||
background-color: $splash-pink;
|
||||
background-color: $ui-purple;
|
||||
}
|
||||
|
||||
.splash-blue {
|
||||
background-color: $splash-blue;
|
||||
background-color: $ui-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
display: block;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($ui-blue, 40);
|
||||
background-color: $ui-blue-10percent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
@import "../../colors";
|
||||
@import "../../frameless";
|
||||
|
||||
$developer-spot: $splash-blue;
|
||||
|
||||
#view {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -11,7 +9,7 @@ $developer-spot: $splash-blue;
|
|||
.title-banner {
|
||||
&.masthead {
|
||||
margin-bottom: 0;
|
||||
background-color: $developer-spot;
|
||||
background-color: $ui-blue-dark;
|
||||
padding-bottom: 0;
|
||||
|
||||
h1 {
|
||||
|
|
@ -32,10 +30,8 @@ $developer-spot: $splash-blue;
|
|||
}
|
||||
|
||||
.band {
|
||||
$band-color: #3baddd;
|
||||
|
||||
margin-top: 2rem;
|
||||
background-color: $band-color;
|
||||
background-color: $ui-white-15percent;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -74,13 +70,17 @@ $developer-spot: $splash-blue;
|
|||
.installation-column {
|
||||
max-width: $cols4;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
margin-right: .5rem;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.installation-column-number {
|
||||
margin: 2rem auto;
|
||||
border: 2px solid $active-gray;
|
||||
border-radius: 2rem;
|
||||
box-shadow: 0 0 0 .5rem lighten($ui-blue, 35);
|
||||
background-color: $ui-blue;
|
||||
width: 3.75rem;
|
||||
height: 3.75rem;
|
||||
|
|
|
|||
|
|
@ -209,7 +209,6 @@ class Explore extends React.Component {
|
|||
showViews={false}
|
||||
/>
|
||||
<Button
|
||||
className="white"
|
||||
onClick={this.handleGetExploreMore}
|
||||
>
|
||||
<FormattedMessage id="general.loadMore" />
|
||||
|
|
|
|||
|
|
@ -114,6 +114,7 @@ $base-bg: $ui-white;
|
|||
.button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 58.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -128,6 +129,12 @@ $base-bg: $ui-white;
|
|||
.sort-controls {
|
||||
width: $cols4;
|
||||
}
|
||||
|
||||
#projectBox {
|
||||
.button {
|
||||
width: $cols4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -141,6 +148,12 @@ $base-bg: $ui-white;
|
|||
.sort-controls {
|
||||
width: $cols6;
|
||||
}
|
||||
|
||||
#projectBox {
|
||||
.button {
|
||||
width: $cols6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -161,6 +174,9 @@ $base-bg: $ui-white;
|
|||
width: $cols9;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
width: $cols9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -122,6 +122,7 @@
|
|||
.messages-social-loadmore {
|
||||
display: block;
|
||||
margin: 1rem auto;
|
||||
width: 58.75rem;
|
||||
}
|
||||
|
||||
.emoji-text.mod-comment {
|
||||
|
|
@ -137,6 +138,10 @@
|
|||
.comment-text {
|
||||
max-width: 9.75rem;
|
||||
}
|
||||
|
||||
.messages-social-loadmore {
|
||||
width: $cols4;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
||||
|
|
@ -148,10 +153,18 @@
|
|||
.comment-text {
|
||||
max-width: 19.5rem;
|
||||
}
|
||||
|
||||
.messages-social-loadmore {
|
||||
width: $cols6;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
|
||||
.comment-text {
|
||||
max-width: 23.75rem;
|
||||
}
|
||||
|
||||
.messages-social-loadmore {
|
||||
width: $cols8;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@ class SocialMessagesList extends React.Component {
|
|||
if (loadMore) {
|
||||
return (
|
||||
<Button
|
||||
className="messages-social-loadmore white"
|
||||
className="messages-social-loadmore"
|
||||
key="load-more"
|
||||
onClick={this.props.onLoadMoreMethod}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ $stage-height: 404px;
|
|||
}
|
||||
|
||||
.remix-button {
|
||||
background-color: $ui-green;
|
||||
background-color: $ui-aqua;
|
||||
|
||||
&:before {
|
||||
background-image: url("/svgs/project/remix-white.svg");
|
||||
|
|
|
|||
|
|
@ -136,7 +136,6 @@ class Search extends React.Component {
|
|||
} else if (this.state.loadMore) {
|
||||
searchAction = (
|
||||
<Button
|
||||
className="white"
|
||||
onClick={this.handleGetSearchMore}
|
||||
>
|
||||
<FormattedMessage id="general.loadMore" />
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ $base-bg: $ui-white;
|
|||
.title-banner {
|
||||
&.masthead {
|
||||
margin-bottom: 0;
|
||||
background-color: darken($ui-blue, 10%);
|
||||
background-color: $ui-blue-dark;
|
||||
padding: 0;
|
||||
|
||||
h1 {
|
||||
|
|
@ -131,6 +131,7 @@ $base-bg: $ui-white;
|
|||
.button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 58.75rem;
|
||||
}
|
||||
|
||||
.search-prompt {
|
||||
|
|
@ -160,6 +161,12 @@ $base-bg: $ui-white;
|
|||
.sort-controls {
|
||||
width: $cols4;
|
||||
}
|
||||
|
||||
#projectBox {
|
||||
.button {
|
||||
width: $cols4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -174,6 +181,12 @@ $base-bg: $ui-white;
|
|||
.sort-controls {
|
||||
width: $cols6;
|
||||
}
|
||||
|
||||
#projectBox {
|
||||
.button {
|
||||
width: $cols6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -187,5 +200,11 @@ $base-bg: $ui-white;
|
|||
.sort-controls {
|
||||
width: $cols8;
|
||||
}
|
||||
|
||||
#projectBox {
|
||||
.button {
|
||||
width: $cols9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
html,
|
||||
body {
|
||||
background-color: darken($ui-purple, 8%);
|
||||
background-color: $ui-purple-dark
|
||||
}
|
||||
|
||||
.student-complete-registration {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
html,
|
||||
body {
|
||||
background-color: darken($ui-purple, 8%);
|
||||
background-color: $ui-purple-dark
|
||||
}
|
||||
|
||||
.student-registration {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
html,
|
||||
body {
|
||||
background-color: darken($ui-purple, 8%);
|
||||
background-color: $ui-purple-dark
|
||||
}
|
||||
|
||||
.teacher-registration {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "../../../colors";
|
||||
@import "../../../frameless";
|
||||
|
||||
$teacher-spot: $ui-purple;
|
||||
$teacher-spot: $ui-purple-dark;
|
||||
$story-width: $cols3;
|
||||
|
||||
#view {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
html,
|
||||
body {
|
||||
background-color: darken($ui-purple, 8%);
|
||||
background-color: $ui-purple-dark
|
||||
}
|
||||
|
||||
.teacher-waitingroom {
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
p {
|
||||
color: darken($ui-blue, 15);
|
||||
color: $ui-blue-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue