Skip to content

E
edx-platform
Commit 1ff0a3b4 by AlasdairSwan Committed by GitHub
Options

Merge pull request #12709 from edx/alasdair/ECOM-4469-modals-sass-cleanup 

Clean up the help tab Sass included on Pattern Library pages
parents f5b42c89 a8563257
Showing with 111 additions and 83 deletions
lms/static/sass/shared-v2/_help-tab.scss
.help-tab { .help-tab {
@include transform(rotate(-90deg)); @include transform(rotate(-90deg));
@include transform-origin(0 0); @include transform-origin(0 0);
z-index: z-index(front); z-index: z-index(front);
top: 250px; top: 250px;
left: 0; left: 0;
position: fixed; position: fixed;
a:link, a:link,
a:visited { a:visited {
cursor: pointer; cursor: pointer;
border: 1px solid $lms-border-color; border: 1px solid $lms-border-color;
border-top-style: none; border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2); border-radius: 0 0 ($baseline/2) ($baseline/2);
background: transparentize(palette(grayscale, white-t), 0.25); background: transparentize(palette(grayscale, white-t), 0.25);
color: transparentize(palette(grayscale-cool, x-dark), 0.25); color: transparentize(palette(grayscale-cool, x-dark), 0.25);
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
padding: 6px 22px 11px; padding: 6px 22px 11px;
display: inline-block; display: inline-block;
&:hover, &:hover,
&:focus { &:focus {
color: palette(grayscale, white-t); color: palette(grayscale, white-t);
background: palette(primary, base); background: palette(primary, base);
}
} }
}
} }
.help-buttons { .help-buttons {
padding: ($baseline/2) ($baseline*2.5); padding: ($baseline/2) ($baseline*2.5);
a:link, a:visited { a:link,
padding: ($baseline*0.75) 0; a:visited {
text-align: center; padding: ($baseline*0.75) 0;
cursor: pointer; text-align: center;
background: palette(grayscale, white-t); cursor: pointer;
text-decoration: none; background: palette(grayscale, white-t);
display: block; text-decoration: none;
border: 1px solid $lms-border-color; display: block;
border: 1px solid $lms-border-color;
&#feedback_link_problem { &#feedback_link_problem {
border-bottom-style: none; border-bottom-style: none;
border-radius: ($baseline/2) ($baseline/2) 0 0; border-radius: ($baseline/2) ($baseline/2) 0 0;
} }
&#feedback_link_question { &#feedback_link_question {
border-top-style: none; border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2); border-radius: 0 0 ($baseline/2) ($baseline/2);
} }
&:hover, &:focus { &:hover,
color: palette(grayscale, white-t); &:focus {
background: palette(primary, base); color: palette(grayscale, white-t);
background: palette(primary, base);
}
} }
}
} }
#feedback_form { #feedback_form {
input, input,
textarea { textarea {
font: { font: {
size: font-size(base); size: font-size(base);
family: $font-family-sans-serif; family: $font-family-sans-serif;
}
line-height: 1.4;
}
textarea[name="details"] {
height: 150px;
} }
line-height: 1.4;
}
textarea[name="details"] {
height: 150px;
}
} }
#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