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 {
@include transform(rotate(-90deg));
@include transform-origin(0 0);
z-index: z-index(front);
top: 250px;
left: 0;
position: fixed;
@include transform(rotate(-90deg));
@include transform-origin(0 0);
z-index: z-index(front);
top: 250px;
left: 0;
position: fixed;
a:link,
a:visited {
cursor: pointer;
border: 1px solid $lms-border-color;
border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2);
background: transparentize(palette(grayscale, white-t), 0.25);
color: transparentize(palette(grayscale-cool, x-dark), 0.25);
font-weight: bold;
text-decoration: none;
padding: 6px 22px 11px;
display: inline-block;
a:link,
a:visited {
cursor: pointer;
border: 1px solid $lms-border-color;
border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2);
background: transparentize(palette(grayscale, white-t), 0.25);
color: transparentize(palette(grayscale-cool, x-dark), 0.25);
font-weight: bold;
text-decoration: none;
padding: 6px 22px 11px;
display: inline-block;
&:hover,
&:focus {
color: palette(grayscale, white-t);
background: palette(primary, base);
&:hover,
&:focus {
color: palette(grayscale, white-t);
background: palette(primary, base);
}
}
}
}
.help-buttons {
padding: ($baseline/2) ($baseline*2.5);
padding: ($baseline/2) ($baseline*2.5);
a:link, a:visited {
padding: ($baseline*0.75) 0;
text-align: center;
cursor: pointer;
background: palette(grayscale, white-t);
text-decoration: none;
display: block;
border: 1px solid $lms-border-color;
a:link,
a:visited {
padding: ($baseline*0.75) 0;
text-align: center;
cursor: pointer;
background: palette(grayscale, white-t);
text-decoration: none;
display: block;
border: 1px solid $lms-border-color;
&#feedback_link_problem {
border-bottom-style: none;
border-radius: ($baseline/2) ($baseline/2) 0 0;
}
&#feedback_link_problem {
border-bottom-style: none;
border-radius: ($baseline/2) ($baseline/2) 0 0;
}
&#feedback_link_question {
border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2);
}
&#feedback_link_question {
border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2);
}
&:hover, &:focus {
color: palette(grayscale, white-t);
background: palette(primary, base);
&:hover,
&:focus {
color: palette(grayscale, white-t);
background: palette(primary, base);
}
}
}
}
#feedback_form {
input,
textarea {
font: {
size: font-size(base);
family: $font-family-sans-serif;
input,
textarea {
font: {
size: font-size(base);
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 {
p {
padding: 0 $baseline $baseline $baseline;
}
p {
padding: 0 $baseline $baseline;
}
}
lms/static/sass/shared-v2/_modal.scss
#lean_overlay {
@include background-image(radial-gradient(circle at 50% 30%, $shadow-d1, $shadow-d2));
background: transparent;
display: none;
height:100%;
left: 0;
......@@ -27,7 +26,7 @@
background: $modal-bg-color;
border-radius: 0;
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;
padding-left: ($baseline/2);
padding-right: ($baseline/2);
......@@ -54,8 +53,14 @@
position: relative;
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
content: "";
@include background-image(
radial-gradient(
50% 50%, circle closest-side,
$white-opacity-80 0%,
$white-transparent 100%
)
);
content: '';
display: block;
height: 400px;
left: 0;
......@@ -63,24 +68,34 @@
position: absolute;
top: -140px;
width: 100%;
z-index: 1;
z-index: z-index(base);
}
hr {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.8) 50%,
rgba(255,255,255, 0)));
@include background-image(
linear-gradient(
180deg,
$white-transparent 0%,
$white-opacity-80 50%,
$white-transparent
)
);
height: 1px;
width: 100%;
border: none;
margin: 0;
position: relative;
z-index: 2;
z-index: z-index(base);
&::after {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
@include background-image(
linear-gradient(
180deg,
$light-grey-transparent 0%,
$light-grey-solid 50%,
$light-grey-transparent
)
);
height: 1px;
width: 100%;
bottom: 0;
......@@ -95,8 +110,8 @@
@extend .hd-4;
position: relative;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.4);
z-index: 2;
text-shadow: 0 1px $white-opacity-40;
z-index: z-index(base);
text-transform: uppercase;
font-family: $font-family-serif;
......@@ -107,9 +122,9 @@
}
.modal-form-error {
background: tint($red,90%);
border: 1px solid rgb(143, 14, 14);
color: rgb(143, 14, 14);
background: palette(error, xx-trans);
border: 1px solid palette(error, dark);
color: palette(error, dark);
display: none;
margin-bottom: $baseline;
padding: 12px;
......@@ -140,8 +155,8 @@
.input-group {
@include clearfix();
border-bottom: 1px solid rgb(210,210,210);
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
border-bottom: 1px solid palette(grayscale, light);
box-shadow: 0 1px 0 0 $white-opacity-60;
margin-bottom: ($baseline*1.5);
padding-bottom: ($baseline/2);
}
......@@ -156,11 +171,12 @@
&.field-error {
display: block;
color: #8F0E0E;
color: palette(error, dark);
+ input, + textarea {
border: 1px solid #CA1111;
color: #8F0E0E;
+ input,
+ textarea {
border: 1px solid palette(error, dark);
color: palette(error, dark);
}
}
}
......@@ -170,7 +186,7 @@
}
textarea {
background: rgb(255,255,255);
background: palette(grayscale, white-t);
display: block;
height: 45px;
margin-bottom: $baseline;
......@@ -180,7 +196,7 @@
input[type="email"],
input[type="text"],
input[type="password"] {
background: rgb(255,255,255);
background: palette(grayscale, white-t);
display: block;
height: 45px;
margin-bottom: $baseline;
......@@ -240,7 +256,7 @@
#help_wrapper,
#feedback_form_wrapper,
.discussion-alert-wrapper {
padding: 0 ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
padding: 0 ($baseline*1.5) ($baseline*1.5);
header {
@include padding-left(0);
......
lms/static/sass/shared-v2/_variables.scss
......@@ -7,6 +7,15 @@ $lms-border-color: palette(grayscale, light);
$lms-label-color: palette(grayscale, black);
$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
$lms-dark-icon-color: palette(grayscale, white-t);
$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