Skip to content

E
edx-platform
Commit 978d33ba by Brian Talbot
Options

Merge pull request #319 from edx/talbs/studio-sassmixins 

Studio Sass Mixin/Extend Re-Org
parents 51037650 388724c4
Showing with 134 additions and 123 deletions
cms/static/sass/_base.scss
......@@ -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-"] {
......
cms/static/sass/_mixins-inherited.scss deleted 120000 → 0
../../../common/static/sass/_mixins-inherited.scss
\ No newline at end of file
cms/static/sass/elements/_controls.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;
......
cms/static/sass/elements/_header.scss
......@@ -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 {
......
cms/static/sass/elements/_modal.scss
......@@ -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;
......
cms/static/sass/elements/_navigation.scss
......@@ -5,7 +5,7 @@
nav {
ol, ul {
@extend .no-list;
@extend .cont-no-list;
}
.nav-item {
......
cms/static/sass/elements/_sock.scss
......@@ -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;
......
cms/static/sass/elements/_system-feedback.scss
......@@ -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);
......
cms/static/sass/views/_checklists.scss
......@@ -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;
}
}
}
......
cms/static/sass/views/_export.scss
......@@ -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 {
}
}
}
}
\ No newline at end of file
}
cms/static/sass/views/_import.scss
......@@ -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;
}
}
\ No newline at end of file
}
cms/static/sass/views/_settings.scss
......@@ -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);
......
cms/static/sass/views/_static-pages.scss
......@@ -171,7 +171,7 @@ body.course.static-pages {
}
.static-page-details {
@extend .window;
@extend .ui-window;
padding: 32px 40px;
.row {
......
cms/static/sass/views/_textbooks.scss
......@@ -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;
......
common/static/sass/_mixins.scss
......@@ -26,7 +26,6 @@
@include size($size);
}
// ====================
// mixins - placeholder styling
......@@ -44,78 +43,45 @@
// ====================
// extends - layout
// used for page/view-level wrappers (for centering/grids)
.wrapper {
// extends - UI - used for page/view-level wrappers (for centering/grids)
.ui-wrapper {
@include clearfix();
@include box-sizing(border-box);
width: 100%;
}
// removes list styling/spacing when using uls, ols for navigation and less content-centric cases
.no-list {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
li {
margin: 0;
padding: 0;
}
}
// extends - image-replacement hidden text
.text-hide {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
// extends - hidden elems - screenreaders
.text-sr {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
// extends - wrapping
.text-wrap {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
// extends - UI - window
.ui-window {
@include clearfix();
border-radius: 3px;
box-shadow: 0 1px 1px $shadow-l1;
margin-bottom: $baseline;
border: 1px solid $gray-l2;
background: $white;
}
// extends - visual link
.fake-link {
// extends - UI - visual link
.ui-fake-link {
cursor: pointer;
}
// extends - functional disable
.disabled {
// extends - UI - functional disable
.ui-disabled {
pointer-events: none;
outline: none;
}
// extends - depth levels
.depth0 { z-index: 0; }
.depth1 { z-index: 10; }
.depth2 { z-index: 100; }
.depth3 { z-index: 1000; }
.depth4 { z-index: 10000; }
.depth5 { z-index: 100000; }
// extends - UI - depth levels
.ui-depth0 { z-index: 0; }
.ui-depth1 { z-index: 10; }
.ui-depth2 { z-index: 100; }
.ui-depth3 { z-index: 1000; }
.ui-depth4 { z-index: 10000; }
.ui-depth5 { z-index: 100000; }
// ====================
// extends - buttons
.btn {
// extends - UI - buttons
.ui-btn {
@include box-sizing(border-box);
@include transition(color 0.25s ease-in-out 0s, border-color 0.25s ease-in-out 0s, background 0.25s ease-in-out 0s, box-shadow 0.25s ease-in-out 0s);
display: inline-block;
......@@ -139,18 +105,18 @@
}
// pill button
.btn-pill {
.ui-btn-pill {
border-radius: ($baseline/5);
}
.btn-rounded {
.ui-btn-rounded {
border-radius: ($baseline/2);
}
// primary button
.btn-primary {
@extend .btn;
@extend .btn-pill;
.ui-btn-primary {
@extend .ui-btn;
@extend .ui-btn-pill;
padding:($baseline/2) $baseline;
border-width: 1px;
border-style: solid;
......@@ -171,9 +137,9 @@
}
// secondary button
.btn-secondary {
@extend .btn;
@extend .btn-pill;
.ui-btn-secondary {
@extend .ui-btn;
@extend .ui-btn-pill;
border-width: 1px;
border-style: solid;
padding:($baseline/2) $baseline;
......@@ -190,7 +156,7 @@
}
}
.btn-flat-outline {
.ui-btn-flat-outline {
@extend .t-action4;
@include transition(all .15s);
font-weight: 600;
......@@ -217,7 +183,7 @@
}
// button with no button shell until hover for understated actions
.btn-non {
.ui-btn-non {
@include transition(all .15s);
border: none;
border-radius: ($baseline/4);
......@@ -232,12 +198,62 @@
}
span {
@extend .text-sr;
@extend .cont-text-sr;
}
}
// UI archetypes - well
// extends - UI archetypes - well
.ui-well {
box-shadow: inset 0 1px 2px 1px $shadow;
padding: ($baseline*0.75);
}
// ====================
// extends - content - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
.cont-no-list {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
li {
margin: 0;
padding: 0;
}
}
// extends - content - image-replacement hidden text
.cont-text-hide {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
// extends - content - hidden elems - screenreaders
.cont-text-sr {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
// extends - content - wrapping
.cont-text-wrap {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
// extends - content - text overflow by ellipsis
.cont-truncated {
@include box-sizing(border-box);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
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