Merge pull request #319 from edx/talbs/studio-sassmixins
Studio Sass Mixin/Extend Re-Org
This commit is contained in:
@@ -576,7 +576,7 @@ p, ul, ol, dl {
|
||||
|
||||
// misc
|
||||
hr.divide {
|
||||
@extend .text-sr;
|
||||
@extend .cont-text-sr;
|
||||
}
|
||||
|
||||
.item-details {
|
||||
@@ -824,7 +824,7 @@ hr.divide {
|
||||
|
||||
// basic utility
|
||||
.sr {
|
||||
@extend .text-sr;
|
||||
@extend .cont-text-sr;
|
||||
}
|
||||
|
||||
.fake-link {
|
||||
@@ -877,7 +877,7 @@ body.js {
|
||||
text-align: center;
|
||||
|
||||
.label {
|
||||
@extend .text-sr;
|
||||
@extend .cont-text-sr;
|
||||
}
|
||||
|
||||
[class^="icon-"] {
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
../../../common/static/sass/_mixins-inherited.scss
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
// gray primary button
|
||||
.btn-primary-gray {
|
||||
@extend .btn-primary;
|
||||
@extend .ui-btn-primary;
|
||||
background: $gray-l1;
|
||||
border-color: $gray-l2;
|
||||
color: $white;
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
// blue primary button
|
||||
.btn-primary-blue {
|
||||
@extend .btn-primary;
|
||||
@extend .ui-btn-primary;
|
||||
background: $blue;
|
||||
border-color: $blue-s1;
|
||||
color: $white;
|
||||
@@ -48,7 +48,7 @@
|
||||
|
||||
// green primary button
|
||||
.btn-primary-green {
|
||||
@extend .btn-primary;
|
||||
@extend .ui-btn-primary;
|
||||
background: $green;
|
||||
border-color: $green;
|
||||
color: $white;
|
||||
@@ -71,7 +71,7 @@
|
||||
|
||||
// gray secondary button
|
||||
.btn-secondary-gray {
|
||||
@extend .btn-secondary;
|
||||
@extend .ui-btn-secondary;
|
||||
border-color: $gray-l3;
|
||||
color: $gray-l1;
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
|
||||
// blue secondary button
|
||||
.btn-secondary-blue {
|
||||
@extend .btn-secondary;
|
||||
@extend .ui-btn-secondary;
|
||||
border-color: $blue-l3;
|
||||
color: $blue;
|
||||
|
||||
@@ -114,7 +114,7 @@
|
||||
|
||||
// green secondary button
|
||||
.btn-secondary-green {
|
||||
@extend .btn-secondary;
|
||||
@extend .ui-btn-secondary;
|
||||
border-color: $green-l4;
|
||||
color: $green-l2;
|
||||
|
||||
@@ -148,9 +148,9 @@
|
||||
// ====================
|
||||
|
||||
// simple dropdown button styling - should we move this elsewhere?
|
||||
.btn-dd {
|
||||
@extend .btn;
|
||||
@extend .btn-pill;
|
||||
.ui-btn-dd {
|
||||
@extend .ui-btn;
|
||||
@extend .ui-btn-pill;
|
||||
padding:($baseline/4) ($baseline/2);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
@@ -158,7 +158,7 @@
|
||||
text-align: center;
|
||||
|
||||
&:hover, &:active {
|
||||
@extend .fake-link;
|
||||
@extend .ui-fake-link;
|
||||
border-color: $gray-l3;
|
||||
}
|
||||
|
||||
@@ -169,8 +169,8 @@
|
||||
}
|
||||
|
||||
// layout-based buttons - nav dd
|
||||
.btn-dd-nav-primary {
|
||||
@extend .btn-dd;
|
||||
.ui-btn-dd-nav-primary {
|
||||
@extend .ui-btn-dd;
|
||||
background: $white;
|
||||
border-color: $white;
|
||||
color: $gray-d1;
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
// ====================
|
||||
|
||||
.wrapper-header {
|
||||
@extend .depth3;
|
||||
box-shadow: 0 1px 2px 0 $shadow-l1;
|
||||
@extend .ui-depth3;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-shadow: 0 1px 2px 0 $shadow-l1;
|
||||
margin: 0;
|
||||
padding: 0 $baseline;
|
||||
background: $white;
|
||||
@@ -22,7 +22,6 @@
|
||||
// ====================
|
||||
|
||||
// basic layout
|
||||
|
||||
.wrapper-l, .wrapper-r {
|
||||
background: $white;
|
||||
}
|
||||
@@ -76,7 +75,7 @@
|
||||
|
||||
.title {
|
||||
@extend .t-action2;
|
||||
@extend .btn-dd-nav-primary;
|
||||
@extend .ui-btn-dd-nav-primary;
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
|
||||
.label, .icon-caret-down {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
// ====================
|
||||
|
||||
.modal-cover {
|
||||
@extend .depth3;
|
||||
@extend .ui-depth3;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -13,7 +13,7 @@
|
||||
}
|
||||
|
||||
.modal {
|
||||
@extend .depth4;
|
||||
@extend .ui-depth4;
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
@@ -61,7 +61,7 @@
|
||||
|
||||
// lean modal alternative
|
||||
#lean_overlay {
|
||||
@extend .depth4;
|
||||
@extend .ui-depth4;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
nav {
|
||||
|
||||
ol, ul {
|
||||
@extend .no-list;
|
||||
@extend .cont-no-list;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
.wrapper-inner {
|
||||
@include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
|
||||
@extend .depth0;
|
||||
@extend .ui-depth0;
|
||||
display: none;
|
||||
width: 100% !important;
|
||||
border-bottom: 1px solid $white;
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
// sock - actions
|
||||
.list-cta {
|
||||
@extend .depth1;
|
||||
@extend .ui-depth1;
|
||||
position: absolute;
|
||||
top: -($baseline*0.75);
|
||||
width: 100%;
|
||||
@@ -27,7 +27,7 @@
|
||||
text-align: center;
|
||||
|
||||
.cta-show-sock {
|
||||
@extend .btn-pill;
|
||||
@extend .ui-btn-pill;
|
||||
@extend .t-action4;
|
||||
background: $gray-l5;
|
||||
padding: ($baseline/2) $baseline;
|
||||
|
||||
@@ -144,8 +144,8 @@
|
||||
|
||||
// prompts
|
||||
.wrapper-prompt {
|
||||
@extend .depth5;
|
||||
@include transition(all $tmg-f3 ease-in-out 0s);
|
||||
@extend .ui-depth5;
|
||||
@include transition(all $tmg-f3 ease-in-out 0s);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
background: $black-t0;
|
||||
@@ -242,7 +242,7 @@
|
||||
|
||||
// notifications
|
||||
.wrapper-notification {
|
||||
@extend .depth5;
|
||||
@extend .ui-depth5;
|
||||
@include clearfix();
|
||||
box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $blue;
|
||||
position: fixed;
|
||||
@@ -444,7 +444,7 @@
|
||||
}
|
||||
|
||||
.copy p {
|
||||
@extend .text-sr;
|
||||
@extend .cont-text-sr;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -453,7 +453,7 @@
|
||||
|
||||
// alerts
|
||||
.wrapper-alert {
|
||||
@extend .depth2;
|
||||
@extend .ui-depth2;
|
||||
@include box-sizing(border-box);
|
||||
box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
|
||||
position: relative;
|
||||
@@ -599,7 +599,7 @@
|
||||
text-align: center;
|
||||
|
||||
.label {
|
||||
@extend .text-sr;
|
||||
@extend .cont-text-sr;
|
||||
}
|
||||
|
||||
[class^="icon"] {
|
||||
@@ -696,7 +696,7 @@ body.uxdesign.alerts {
|
||||
}
|
||||
|
||||
.content-primary {
|
||||
@extend .window;
|
||||
@extend .ui-window;
|
||||
width: flex-grid(12, 12);
|
||||
margin-right: flex-gutter();
|
||||
padding: $baseline ($baseline*1.5);
|
||||
|
||||
@@ -14,7 +14,7 @@ body.course.checklists {
|
||||
|
||||
// checklists - general
|
||||
.course-checklist {
|
||||
@extend .window;
|
||||
@extend .ui-window;
|
||||
margin: 0 0 ($baseline*2) 0;
|
||||
|
||||
&:last-child {
|
||||
@@ -23,7 +23,7 @@ body.course.checklists {
|
||||
|
||||
// visual status
|
||||
.viz-checklist-status {
|
||||
@extend .text-hide;
|
||||
@extend .cont-text-hide;
|
||||
@include size(100%,($baseline/4));
|
||||
position: relative;
|
||||
display: block;
|
||||
@@ -40,7 +40,7 @@ body.course.checklists {
|
||||
background: $green;
|
||||
|
||||
.int {
|
||||
@extend .text-sr;
|
||||
@extend .cont-text-sr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
// ====================
|
||||
|
||||
body.course.export {
|
||||
|
||||
|
||||
.export-overview {
|
||||
@extend .window;
|
||||
@extend .ui-window;
|
||||
@include clearfix;
|
||||
padding: 30px 40px;
|
||||
}
|
||||
@@ -40,7 +40,7 @@ body.course.export {
|
||||
}
|
||||
|
||||
.export-form-wrapper {
|
||||
|
||||
|
||||
.export-form {
|
||||
float: left;
|
||||
width: 35%;
|
||||
@@ -122,4 +122,4 @@ body.course.export {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
6
cms/static/sass/views/_import.scss
vendored
6
cms/static/sass/views/_import.scss
vendored
@@ -2,9 +2,9 @@
|
||||
// ====================
|
||||
|
||||
body.course.import {
|
||||
|
||||
|
||||
.import-overview {
|
||||
@extend .window;
|
||||
@extend .ui-window;
|
||||
@include clearfix;
|
||||
padding: 30px 40px;
|
||||
}
|
||||
@@ -103,4 +103,4 @@ body.course.import {
|
||||
color: #fff;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ body.course.settings {
|
||||
}
|
||||
|
||||
.content-primary {
|
||||
@extend .window;
|
||||
@extend .ui-window;
|
||||
width: flex-grid(9, 12);
|
||||
margin-right: flex-gutter();
|
||||
padding: $baseline ($baseline*1.5);
|
||||
|
||||
@@ -171,7 +171,7 @@ body.course.static-pages {
|
||||
}
|
||||
|
||||
.static-page-details {
|
||||
@extend .window;
|
||||
@extend .ui-window;
|
||||
padding: 32px 40px;
|
||||
|
||||
.row {
|
||||
|
||||
@@ -115,7 +115,7 @@ body.course.textbooks {
|
||||
}
|
||||
|
||||
.delete {
|
||||
@extend .btn-non;
|
||||
@extend .ui-btn-non;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -188,7 +188,7 @@ body.course.textbooks {
|
||||
|
||||
.chapters-fields,
|
||||
.textbook-fields {
|
||||
@extend .no-list;
|
||||
@extend .cont-no-list;
|
||||
|
||||
.field {
|
||||
margin: 0 0 ($baseline*0.75) 0;
|
||||
@@ -320,7 +320,7 @@ body.course.textbooks {
|
||||
}
|
||||
|
||||
.action-upload {
|
||||
@extend .btn-flat-outline;
|
||||
@extend .ui-btn-flat-outline;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 0;
|
||||
@@ -348,7 +348,7 @@ body.course.textbooks {
|
||||
|
||||
|
||||
.action-add-chapter {
|
||||
@extend .btn-flat-outline;
|
||||
@extend .ui-btn-flat-outline;
|
||||
@include font-size(16);
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -365,7 +365,7 @@ body.course.textbooks {
|
||||
|
||||
// dialog
|
||||
.wrapper-dialog {
|
||||
@extend .depth5;
|
||||
@extend .ui-depth5;
|
||||
@include transition(all 0.05s ease-in-out);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
Reference in New Issue
Block a user