From 88d06a16e507fb74a10babe8fd58c69fd7dc79e2 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Tue, 2 Jul 2013 01:28:27 -0400 Subject: [PATCH] Studio: renames and re-orgs app-wide Sass extends --- cms/static/sass/_mixins-inherited.scss | 1 - cms/static/sass/views/_textbooks.scss | 6 +- common/static/sass/_mixins.scss | 153 ++++++++++++++----------- 3 files changed, 89 insertions(+), 71 deletions(-) delete mode 120000 cms/static/sass/_mixins-inherited.scss diff --git a/cms/static/sass/_mixins-inherited.scss b/cms/static/sass/_mixins-inherited.scss deleted file mode 120000 index f64a720561..0000000000 --- a/cms/static/sass/_mixins-inherited.scss +++ /dev/null @@ -1 +0,0 @@ -../../../common/static/sass/_mixins-inherited.scss \ No newline at end of file diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss index ab2599581f..964615e16e 100644 --- a/cms/static/sass/views/_textbooks.scss +++ b/cms/static/sass/views/_textbooks.scss @@ -115,7 +115,7 @@ body.course.textbooks { } .delete { - @extend .btn-non; + @extend .ui-btn-non; } } @@ -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%; diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index 64248734c3..1fa270e68a 100644 --- a/common/static/sass/_mixins.scss +++ b/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 - UI - window +.ui-window { + @include clearfix(); + @include border-radius(3px); + @include box-shadow(0 1px 1px $shadow-l1); + margin-bottom: $baseline; + border: 1px solid $gray-l2; + background: $white; } -// 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 - 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; @@ -172,8 +138,8 @@ // secondary button .btn-secondary { - @extend .btn; - @extend .btn-pill; + @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); @@ -236,8 +202,61 @@ } } -// 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; +} + +// content - text overflow by ellipsis +.cont-overflow-elip { + @include box-sizing(border-box); + display: block; + width: auto; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +>>>>>>> Studio: renames and re-orgs app-wide Sass extends