Verification: adding in more Sass variable/mixin/extend scaffolding
This commit is contained in:
Brian Talbot
@@ -44,6 +44,7 @@
|
||||
|
||||
// base - elements
|
||||
@import 'elements/typography';
|
||||
@import 'elements/controls';
|
||||
|
||||
// base - specific views
|
||||
@import 'views/verification';
|
||||
|
||||
@@ -41,24 +41,38 @@
|
||||
@return #{$pxval / $base}em;
|
||||
}
|
||||
|
||||
// Line-height
|
||||
// line-height
|
||||
@function lh($amount: 1) {
|
||||
@return $body-line-height * $amount;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
|
||||
|
||||
|
||||
//-----------------
|
||||
// Theme Mixin Styles
|
||||
//-----------------
|
||||
// theme mixin styles
|
||||
@mixin login_register_h1_style {}
|
||||
|
||||
@mixin footer_references_style {}
|
||||
|
||||
// ====================
|
||||
|
||||
// extends - UI - visual link
|
||||
.ui-fake-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// extends - UI - functional disable
|
||||
.ui-disabled {
|
||||
pointer-events: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// 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 -hidden elems - screenreaders
|
||||
.text-sr {
|
||||
border: 0;
|
||||
@@ -70,3 +84,39 @@
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
// extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
|
||||
.ui-no-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-indent: 0;
|
||||
|
||||
li, dt, dd {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// extends - text - image-replacement hidden text
|
||||
.text-hide {
|
||||
text-indent: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// extends - text - wrapping
|
||||
.text-wrap {
|
||||
text-wrap: wrap;
|
||||
white-space: pre-wrap;
|
||||
white-space: -moz-pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
// extends - text - text overflow by ellipsis
|
||||
.text-truncated {
|
||||
@include box-sizing(border-box);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ $fg-min-width: 810px;
|
||||
// ====================
|
||||
|
||||
// FONTS
|
||||
$sans-serif: 'Open Sans', $verdana;
|
||||
$sans-serif: 'Open Sans', $verdana, sans-serif;
|
||||
$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
|
||||
$body-font-family: $sans-serif;
|
||||
$serif: $georgia;
|
||||
@@ -35,7 +35,17 @@ $very-light-text: #fff;
|
||||
|
||||
// COLORS: misc.
|
||||
$white: rgb(255,255,255);
|
||||
$white-t0: rgba($white, 0.125);
|
||||
$white-t1: rgba($white, 0.25);
|
||||
$white-t2: rgba($white, 0.5);
|
||||
$white-t3: rgba($white, 0.75);
|
||||
|
||||
$black: rgb(0,0,0);
|
||||
$black-t0: rgba($black, 0.125);
|
||||
$black-t1: rgba($black, 0.25);
|
||||
$black-t2: rgba($black, 0.5);
|
||||
$black-t3: rgba($black, 0.75);
|
||||
|
||||
$blue: rgb(29,157,217);
|
||||
$pink: rgb(182,37,104);
|
||||
$yellow: rgb(255, 252, 221);
|
||||
@@ -47,6 +57,7 @@ $dark-gray: rgb(51, 51, 51);
|
||||
$border-color: rgb(200, 200, 200);
|
||||
$sidebar-color: rgb(246, 246, 246);
|
||||
$outer-border-color: rgb(170, 170, 170);
|
||||
|
||||
$green: rgb(37, 184, 90);
|
||||
|
||||
// COLORS: old variables
|
||||
@@ -63,11 +74,17 @@ $m-gray-d1: #7D7F83;
|
||||
$m-gray-d2: #707276;
|
||||
$m-gray-d3: #646668;
|
||||
$m-gray-d4: #050505;
|
||||
$m-gray-t0: rgba($m-gray,0.125);
|
||||
$m-gray-t1: rgba($m-gray,0.25);
|
||||
$m-gray-t2: rgba($m-gray,0.50);
|
||||
$m-gray-t3: rgba($m-gray,0.75);
|
||||
|
||||
$m-blue: #1AA1DE;
|
||||
$m-blue-l1: #2BACE6;
|
||||
$m-blue-l2: #42B5E9;
|
||||
$m-blue-l3: #59BEEC;
|
||||
$m-blue-l4: tint($m-blue,90%);
|
||||
$m-blue-l5: tint($m-blue,95%);
|
||||
$m-blue-d1: #1790C7;
|
||||
$m-blue-d2: #1580B0;
|
||||
$m-blue-d3: #126F9A;
|
||||
@@ -81,6 +98,30 @@ $m-pink-d1: #A0255B;
|
||||
$m-pink-d2: #8C204F;
|
||||
$m-pink-d3: #771C44;
|
||||
|
||||
$m-green: rgb(0, 136, 1);
|
||||
$m-green-s1: rgb(96, 188, 97);
|
||||
$m-green-l1: tint($m-green,20%);
|
||||
$m-green-l2: tint($m-green,40%);
|
||||
$m-green-l3: tint($m-green,60%);
|
||||
$m-green-l4: tint($m-green,90%);
|
||||
$m-green-l5: tint($m-green,95%);
|
||||
$m-green-d1: shade($m-green,20%);
|
||||
$m-green-d2: shade($m-green,40%);
|
||||
$m-green-d3: shade($m-green,60%);
|
||||
$m-green-d4: shade($m-green,90%);
|
||||
$m-green-t0: rgba($m-green,0.125);
|
||||
$m-green-t1: rgba($m-green,0.25);
|
||||
$m-green-t2: rgba($m-green,0.50);
|
||||
$m-green-t3: rgba($m-green,0.75);
|
||||
|
||||
// ====================
|
||||
|
||||
// shadows
|
||||
$shadow: rgba(0,0,0,0.2);
|
||||
$shadow-l1: rgba(0,0,0,0.1);
|
||||
$shadow-l2: rgba(0,0,0,0.05);
|
||||
$shadow-d1: rgba(0,0,0,0.4);
|
||||
|
||||
// ====================
|
||||
|
||||
$m-base-font-size: em(15);
|
||||
|
||||
180
lms/static/sass/elements/_controls.scss
Normal file
180
lms/static/sass/elements/_controls.scss
Normal file
@@ -0,0 +1,180 @@
|
||||
// lms - elements - controls
|
||||
// ====================
|
||||
|
||||
.btn {
|
||||
@include box-sizing(border-box);
|
||||
@include transition(color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.disabled, &[disabled] {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-pill {
|
||||
border-radius: $baseline/5;
|
||||
}
|
||||
|
||||
.btn-rounded {
|
||||
border-radius: ($baseline/2);
|
||||
}
|
||||
|
||||
.btn-edged {
|
||||
border-radius: ($baseline/10);
|
||||
}
|
||||
|
||||
// primary button
|
||||
.btn-primary {
|
||||
@extend .t-weight3;
|
||||
@extend .btn;
|
||||
@extend .btn-edged;
|
||||
border: none;
|
||||
padding: ($baseline*0.75) $baseline;
|
||||
text-align: center;
|
||||
|
||||
&:hover, &:active {
|
||||
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
|
||||
&:hover, &:active {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled, &.is-disabled, &[disabled] {
|
||||
background: $m-gray-l2;
|
||||
color: $white-t3;
|
||||
}
|
||||
}
|
||||
|
||||
// blue primary button
|
||||
.btn-primary-blue {
|
||||
@extend .btn-primary;
|
||||
box-shadow: 0 2px 1px 0 $m-blue-d4;
|
||||
background: $m-blue-d3;
|
||||
color: $white;
|
||||
|
||||
&:hover, &:active {
|
||||
background: $m-blue-d1;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
box-shadow: inset 0 2px 1px 1px $m-blue-d2;
|
||||
background: $m-blue;
|
||||
color: $m-blue-d2;
|
||||
|
||||
&:hover, &:active {
|
||||
box-shadow: inset 0 2px 1px 1px $m-blue-d3;
|
||||
color: $m-blue-d3;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled, &[disabled] {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// pink primary button
|
||||
.btn-primary-pink {
|
||||
@extend .btn-primary;
|
||||
box-shadow: 0 2px 1px 0 $m-pink-d2;
|
||||
background: $m-pink;
|
||||
color: $white;
|
||||
|
||||
&:hover, &:active {
|
||||
background: $m-pink-l3;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
box-shadow: inset 0 2px 1px 1px $m-pink-d1;
|
||||
background: $m-pink-l2;
|
||||
color: $m-pink-d1;
|
||||
|
||||
&:hover, &:active {
|
||||
box-shadow: inset 0 2px 1px 1px $m-pink-d2;
|
||||
color: $m-pink-d3;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled, &[disabled] {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// green primary button
|
||||
.btn-primary-green {
|
||||
@extend .btn-primary;
|
||||
box-shadow: 0 2px 1px 0 $m-green-d2;
|
||||
background: $m-green-d1;
|
||||
color: $white;
|
||||
|
||||
&:hover, &:active {
|
||||
background: $m-green-s1;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
box-shadow: inset 0 2px 1px 1px $m-green;
|
||||
background: $m-green-l2;
|
||||
color: $m-green;
|
||||
|
||||
&:hover, &:active {
|
||||
box-shadow: inset 0 2px 1px 1px $m-green-d1;
|
||||
color: $m-green-d1;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled, &[disabled] {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// application: canned actions
|
||||
.btn {
|
||||
font-family: $f-sans-serif;
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
@extend .t-action1;
|
||||
@extend .t-weight3;
|
||||
display: block;
|
||||
padding:($baseline*0.75) ($baseline*1.5);
|
||||
}
|
||||
|
||||
.btn-avg {
|
||||
@extend .t-action2;
|
||||
@extend .t-weight3;
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
@extend .btn-primary-blue;
|
||||
margin-bottom: $baseline;
|
||||
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-pink {
|
||||
@extend .btn-primary-pink;
|
||||
margin-bottom: $baseline;
|
||||
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: none;
|
||||
}
|
||||
}
|
||||
@@ -171,3 +171,147 @@
|
||||
.t-icon-solo {
|
||||
@include line-height(0);
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// typography weights
|
||||
.t-weight1 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.t-weight2 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.t-weight3 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.t-weight4 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.t-weight5 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// application: canned headings
|
||||
.hd-lv1 {
|
||||
@extend .t-title1;
|
||||
@extend .t-weight1;
|
||||
color: $m-gray-d4;
|
||||
margin: 0 0 ($baseline*2) 0;
|
||||
}
|
||||
|
||||
.hd-lv1-alt {
|
||||
@extend .t-title2;
|
||||
@extend .t-weight1;
|
||||
color: $m-gray-d4;
|
||||
margin: 0 0 ($baseline*2) 0;
|
||||
}
|
||||
|
||||
.hd-lv2 {
|
||||
@extend .t-title4;
|
||||
@extend .t-weight1;
|
||||
margin: 0 0 ($baseline*0.75) 0;
|
||||
border-bottom: 1px solid $m-gray-l3;
|
||||
padding-bottom: ($baseline/2);
|
||||
color: $m-gray-d4;
|
||||
}
|
||||
|
||||
.hd-lv2-alt {
|
||||
@extend .t-title4;
|
||||
@extend .t-weight1;
|
||||
margin: 0 0 ($baseline*0.75) 0;
|
||||
border-bottom: 1px solid $m-gray-t1;
|
||||
padding-bottom: ($baseline/2);
|
||||
color: $m-blue-d1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hd-lv3 {
|
||||
@extend .t-title6;
|
||||
@extend .t-weight4;
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
color: $m-gray-d4;
|
||||
}
|
||||
|
||||
.hd-lv3-alt {
|
||||
@extend .t-title6;
|
||||
@extend .t-weight3;
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
color: $m-gray-d4;
|
||||
}
|
||||
|
||||
.hd-lv4 {
|
||||
@extend .t-title6;
|
||||
@extend .t-weight2;
|
||||
margin: 0 0 $baseline 0;
|
||||
color: $m-gray-d4;
|
||||
}
|
||||
|
||||
.hd-lv4-alt {
|
||||
@extend .t-title6;
|
||||
@extend .t-weight4;
|
||||
margin: 0 0 ($baseline) 0;
|
||||
color: $m-gray-d4;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hd-lv5 {
|
||||
@extend .t-title7;
|
||||
@extend .t-weight4;
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
color: $m-gray-d4;
|
||||
}
|
||||
|
||||
// application: canned copy
|
||||
.copy-base {
|
||||
@extend .t-copy-base;
|
||||
color: $m-gray-d2;
|
||||
}
|
||||
|
||||
.copy-lead1 {
|
||||
@extend .t-copy-lead2;
|
||||
color: $m-gray;
|
||||
}
|
||||
|
||||
.copy-detail {
|
||||
@extend .t-copy-sub1;
|
||||
@extend .t-weight3;
|
||||
color: $m-gray-d1;
|
||||
}
|
||||
|
||||
.copy-metadata {
|
||||
@extend .t-copy-sub2;
|
||||
color: $m-gray-d1;
|
||||
|
||||
|
||||
.copy-metadata-value {
|
||||
@extend .t-weight2;
|
||||
}
|
||||
|
||||
.copy-metadata-value {
|
||||
@extend .t-weight4;
|
||||
}
|
||||
}
|
||||
|
||||
// application: canned links
|
||||
.copy-link {
|
||||
border-bottom: 1px dotted transparent;
|
||||
|
||||
&:hover, &:active {
|
||||
border-color: $m-blue-d2;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-badge {
|
||||
@extend .t-title8;
|
||||
@extend .t-weight5;
|
||||
border-radius: ($baseline/5);
|
||||
padding: ($baseline/2) $baseline;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user