Skip to content

E
edx-platform
Commit a8563257 by AlasdairSwan
Options

Stay Clean

parent 6eef8ee9
Showing with 57 additions and 29 deletions
lms/static/sass/shared-v2/_help-tab.scss
...@@ -30,7 +30,8 @@ ...@@ -30,7 +30,8 @@
.help-buttons { .help-buttons {
padding: ($baseline/2) ($baseline*2.5); padding: ($baseline/2) ($baseline*2.5);
a:link, a:visited { a:link,
a:visited {
padding: ($baseline*0.75) 0; padding: ($baseline*0.75) 0;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
...@@ -49,7 +50,8 @@ ...@@ -49,7 +50,8 @@
border-radius: 0 0 ($baseline/2) ($baseline/2); border-radius: 0 0 ($baseline/2) ($baseline/2);
} }
&:hover, &:focus { &:hover,
&:focus {
color: palette(grayscale, white-t); color: palette(grayscale, white-t);
background: palette(primary, base); background: palette(primary, base);
} }
...@@ -65,6 +67,7 @@ ...@@ -65,6 +67,7 @@
} }
line-height: 1.4; line-height: 1.4;
} }
textarea[name="details"] { textarea[name="details"] {
height: 150px; height: 150px;
} }
...@@ -72,6 +75,6 @@ ...@@ -72,6 +75,6 @@
#feedback_success_wrapper { #feedback_success_wrapper {
p { p {
padding: 0 $baseline $baseline $baseline; padding: 0 $baseline $baseline;
} }
} }
lms/static/sass/shared-v2/_modal.scss
#lean_overlay { #lean_overlay {
@include background-image(radial-gradient(circle at 50% 30%, $shadow-d1, $shadow-d2)); @include background-image(radial-gradient(circle at 50% 30%, $shadow-d1, $shadow-d2));
background: transparent;
display: none; display: none;
height:100%; height:100%;
left: 0; left: 0;
...@@ -27,7 +26,7 @@ ...@@ -27,7 +26,7 @@
background: $modal-bg-color; background: $modal-bg-color;
border-radius: 0; border-radius: 0;
border: 1px solid $lms-border-color; border: 1px solid $lms-border-color;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7); box-shadow: inset 0 1px 0 0 $white-opacity-70;
overflow: hidden; overflow: hidden;
padding-left: ($baseline/2); padding-left: ($baseline/2);
padding-right: ($baseline/2); padding-right: ($baseline/2);
...@@ -54,8 +53,14 @@ ...@@ -54,8 +53,14 @@
position: relative; position: relative;
&::before { &::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%)); @include background-image(
content: ""; radial-gradient(
50% 50%, circle closest-side,
$white-opacity-80 0%,
$white-transparent 100%
)
);
content: '';
display: block; display: block;
height: 400px; height: 400px;
left: 0; left: 0;
...@@ -63,24 +68,34 @@ ...@@ -63,24 +68,34 @@
position: absolute; position: absolute;
top: -140px; top: -140px;
width: 100%; width: 100%;
z-index: 1; z-index: z-index(base);
} }
hr { hr {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, @include background-image(
rgba(255,255,255, 0.8) 50%, linear-gradient(
rgba(255,255,255, 0))); 180deg,
$white-transparent 0%,
$white-opacity-80 50%,
$white-transparent
)
);
height: 1px; height: 1px;
width: 100%; width: 100%;
border: none; border: none;
margin: 0; margin: 0;
position: relative; position: relative;
z-index: 2; z-index: z-index(base);
&::after { &::after {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%, @include background-image(
rgba(200,200,200, 1) 50%, linear-gradient(
rgba(200,200,200, 0))); 180deg,
$light-grey-transparent 0%,
$light-grey-solid 50%,
$light-grey-transparent
)
);
height: 1px; height: 1px;
width: 100%; width: 100%;
bottom: 0; bottom: 0;
...@@ -95,8 +110,8 @@ ...@@ -95,8 +110,8 @@
@extend .hd-4; @extend .hd-4;
position: relative; position: relative;
text-align: center; text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.4); text-shadow: 0 1px $white-opacity-40;
z-index: 2; z-index: z-index(base);
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family-serif; font-family: $font-family-serif;
...@@ -107,9 +122,9 @@ ...@@ -107,9 +122,9 @@
} }
.modal-form-error { .modal-form-error {
background: tint($red,90%); background: palette(error, xx-trans);
border: 1px solid rgb(143, 14, 14); border: 1px solid palette(error, dark);
color: rgb(143, 14, 14); color: palette(error, dark);
display: none; display: none;
margin-bottom: $baseline; margin-bottom: $baseline;
padding: 12px; padding: 12px;
...@@ -140,8 +155,8 @@ ...@@ -140,8 +155,8 @@
.input-group { .input-group {
@include clearfix(); @include clearfix();
border-bottom: 1px solid rgb(210,210,210); border-bottom: 1px solid palette(grayscale, light);
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); box-shadow: 0 1px 0 0 $white-opacity-60;
margin-bottom: ($baseline*1.5); margin-bottom: ($baseline*1.5);
padding-bottom: ($baseline/2); padding-bottom: ($baseline/2);
} }
...@@ -156,11 +171,12 @@ ...@@ -156,11 +171,12 @@
&.field-error { &.field-error {
display: block; display: block;
color: #8F0E0E; color: palette(error, dark);
+ input, + textarea { + input,
border: 1px solid #CA1111; + textarea {
color: #8F0E0E; border: 1px solid palette(error, dark);
color: palette(error, dark);
} }
} }
} }
...@@ -170,7 +186,7 @@ ...@@ -170,7 +186,7 @@
} }
textarea { textarea {
background: rgb(255,255,255); background: palette(grayscale, white-t);
display: block; display: block;
height: 45px; height: 45px;
margin-bottom: $baseline; margin-bottom: $baseline;
...@@ -180,7 +196,7 @@ ...@@ -180,7 +196,7 @@
input[type="email"], input[type="email"],
input[type="text"], input[type="text"],
input[type="password"] { input[type="password"] {
background: rgb(255,255,255); background: palette(grayscale, white-t);
display: block; display: block;
height: 45px; height: 45px;
margin-bottom: $baseline; margin-bottom: $baseline;
...@@ -240,7 +256,7 @@ ...@@ -240,7 +256,7 @@
#help_wrapper, #help_wrapper,
#feedback_form_wrapper, #feedback_form_wrapper,
.discussion-alert-wrapper { .discussion-alert-wrapper {
padding: 0 ($baseline*1.5) ($baseline*1.5) ($baseline*1.5); padding: 0 ($baseline*1.5) ($baseline*1.5);
header { header {
@include padding-left(0); @include padding-left(0);
......
lms/static/sass/shared-v2/_variables.scss
...@@ -7,6 +7,15 @@ $lms-border-color: palette(grayscale, light); ...@@ -7,6 +7,15 @@ $lms-border-color: palette(grayscale, light);
$lms-label-color: palette(grayscale, black); $lms-label-color: palette(grayscale, black);
$lms-active-color: palette(primary, base); $lms-active-color: palette(primary, base);
$white-transparent: rgba(255, 255, 255, 0);
$white-opacity-40: rgba(255, 255, 255, 0.4);
$white-opacity-60: rgba(255, 255, 255, 0.6);
$white-opacity-70: rgba(255, 255, 255, 0.7);
$white-opacity-80: rgba(255, 255, 255, 0.8);
$light-grey-transparent: rgba(200,200,200, 0);
$light-grey-solid: rgba(200,200,200, 1);
// Icons // Icons
$lms-dark-icon-color: palette(grayscale, white-t); $lms-dark-icon-color: palette(grayscale, white-t);
$lms-dark-icon-background-color: palette(grayscale, black); $lms-dark-icon-background-color: palette(grayscale, black);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment