diff --git a/lms/static/sass/_build-lms-v2.scss b/lms/static/sass/_build-lms-v2.scss index 470ce959c7..0ac909b878 100644 --- a/lms/static/sass/_build-lms-v2.scss +++ b/lms/static/sass/_build-lms-v2.scss @@ -13,3 +13,5 @@ @import 'shared-v2/navigation'; @import 'shared-v2/header'; @import 'shared-v2/footer'; +@import 'shared-v2/modal'; +@import 'shared-v2/help-tab'; diff --git a/lms/static/sass/shared-v2/_help-tab.scss b/lms/static/sass/shared-v2/_help-tab.scss new file mode 100644 index 0000000000..90e4258415 --- /dev/null +++ b/lms/static/sass/shared-v2/_help-tab.scss @@ -0,0 +1,77 @@ +.help-tab { + @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 palette(grayscale, light); + border-top-style: none; + border-radius: 0 0 ($baseline/2) + px ($baseline/2) + px; + 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); + } + } +} + +.help-buttons { + padding: ($baseline/2) + px ($baseline*2.5) + px; + + a:link, a:visited { + padding: ($baseline*0.75) + px 0; + text-align: center; + cursor: pointer; + background: palette(grayscale, white-t); + text-decoration: none; + display: block; + border: 1px solid palette(grayscale, light); + + &#feedback_link_problem { + border-bottom-style: none; + border-radius: ($baseline/2) + px ($baseline/2) + px 0 0; + } + + &#feedback_link_question { + border-top-style: none; + border-radius: 0 0 ($baseline/2) + px ($baseline/2) + px; + } + + &: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; + } + line-height: 1.4; + } + textarea[name="details"] { + height: 150px; + } +} + +#feedback_success_wrapper { + p { + padding: 0 $baseline + px $baseline + px $baseline + px; + } +} diff --git a/lms/static/sass/shared-v2/_modal.scss b/lms/static/sass/shared-v2/_modal.scss new file mode 100644 index 0000000000..7aa623f8fa --- /dev/null +++ b/lms/static/sass/shared-v2/_modal.scss @@ -0,0 +1,275 @@ +#lean_overlay { + @include background-image(radial-gradient(circle at 50% 30%, $shadow-d1, $shadow-d2)); + background: transparent; + display: none; + height:100%; + left: 0; + position: fixed; + top: 0; + width:100%; + z-index: 100; +} + +.modal { + @include span(5); + z-index: z-index(mid-front); + display: none; + position: absolute; + left: 50%; + padding: 8px; + border-radius: 3px; + box-shadow: 0 0px 5px 0 $shadow-d1; + background: $gray-d2; + color: $base-font-color; + + .inner-wrapper { + z-index: z-index(mid-front); + background: $modal-bg-color; + border-radius: 0; + border: 1px solid rgba(0, 0, 0, 0.9); + box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7); + overflow: hidden; + padding-left: ($baseline/2) + px; + padding-right: ($baseline/2) + px; + padding-bottom: ($baseline/2) + px; + position: relative; + + p { + font-size: font-size(small); + line-height: 1.4; + } + + a { + &:hover, + &:focus { + text-decoration: underline; + } + } + + .sr { + @extend .sr-only; + } + + header { + z-index: z-index(mid-front); + margin-bottom: ($baseline*1.5) + px; + overflow: hidden; + padding: 28px $baseline + px 0; + 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: ""; + display: block; + height: 400px; + left: 0; + margin: 0 auto; + position: absolute; + top: -140px; + width: 100%; + z-index: 1; + } + + 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))); + height: 1px; + width: 100%; + border: none; + margin: 0; + position: relative; + z-index: 2; + + &::after { + @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%, + rgba(200,200,200, 1) 50%, + rgba(200,200,200, 0))); + height: 1px; + width: 100%; + bottom: 0; + content: ''; + display: block; + position: absolute; + top: -1px; + } + } + + h2 { + @extend .hd-4; + position: relative; + text-align: center; + text-shadow: 0 1px rgba(255,255,255, 0.4); + z-index: 2; + text-transform: uppercase; + font-family: $font-family-serif; + + .edx { + text-transform: none; + } + } + } + + .modal-form-error { + background: tint($red,90%); + border: 1px solid rgb(143, 14, 14); + color: rgb(143, 14, 14); + display: none; + margin-bottom: $baseline + px; + padding: 12px; + } + + .notice { + background: $yellow; + border: 1px solid darken($yellow, 60%); + color: darken($yellow, 60%); + display: none; + margin-bottom: $baseline + px; + padding: 12px; + } + + .activation-message, .message { + padding: 0 ($baseline*2) + px ($baseline/2) + px; + + p { + margin-bottom: ($baseline/2) + px; + } + } + + form { + margin-bottom: 12px; + padding: 0 ($baseline*2) + px $baseline + px; + position: relative; + z-index: 2; + + .input-group { + @include clearfix(); + border-bottom: 1px solid rgb(210,210,210); + box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); + margin-bottom: ($baseline*1.5) + px; + padding-bottom: ($baseline/2) + px; + } + + label { + color: $text-color; + font: { + family: $font-family-serif; + style: italic; + } + line-height: 1.6; + + &.field-error { + display: block; + color: #8F0E0E; + + + input, + textarea { + border: 1px solid #CA1111; + color: #8F0E0E; + } + } + } + + input[type="checkbox"] { + margin-right: ($baseline/4) + px; + } + + textarea { + background: rgb(255,255,255); + display: block; + height: 45px; + margin-bottom: $baseline + px; + width: 100%; + } + + input[type="email"], + input[type="text"], + input[type="password"] { + background: rgb(255,255,255); + display: block; + height: 45px; + margin-bottom: $baseline + px; + width: 100%; + } + + .submit { + padding-top: ($baseline/2) + px; + + input[type="submit"] { + @extend .btn-brand; + display: block; + height: auto; + margin: 0 auto; + width: 100%; + white-space: normal; + } + } + } + + .close-modal { + @include transition(all 0.15s ease-out 0s); + border-radius: 2px; + cursor: pointer; + display: inline-block; + padding: 10px; + position: absolute; + right: 2px; + top: 0px; + z-index: z-index(front); + color: $lighter-base-font-color; + font: { + size: font-size(large); + family: $font-family-sans-serif; + } + line-height: 1; + text-align: center; + border: none; + background: transparent; + text-shadow: none; + letter-spacing: 0; + text-transform: none; + + &:hover, + &:focus { + color: $base-font-color; + text-decoration: none; + opacity: 0.8; + } + + &:focus { + border: none !important; + } + } + } + + #help_wrapper, + #feedback_form_wrapper, + .discussion-alert-wrapper { + padding: 0 ($baseline*1.5) + px ($baseline*1.5) + px ($baseline*1.5) + px; + + header { + margin-bottom: $baseline + px; + padding-right: 0; + padding-left: 0; + } + + .note { + font: { + size: font-size(x-small); + family: $font-family-sans-serif; + } + line-height: 1.475; + margin-top: ($baseline/2) + px; + color: $lighter-base-font-color; + } + } + + .tip { + font-size: font-size(x-small); + display: block; + color: $dark-gray; + } +} + +.leanModal_box { + @extend .modal; +}