$text-sizes: ( 'base': $global-font-size, 'large': $lead-font-size, 'small': $small-font-size ); .u-text { @each $text-size, $text-size-value in $text-sizes { @include m(#{$text-size}) { font-size: $text-size-value; } } } .u-color--base { color: $ub-txt !important; } .u-text--capitalized { text-transform: capitalize; } .u-text--uppercase { text-transform: uppercase; } .u-text--centered { text-align: center; } .u-text--right { text-align: right; } .u-text--strikethrough { text-decoration: line-through; } .u-text--middled { vertical-align: middle; } .u-text--bolded { font-weight: bold !important; } .u-flex { display: flex; } .u-show { display: block !important; } .u-hidden { display: none !important; } .u-float-none { float: none !important;} $border-radius-aligns: (top-left, bottom-left, top-right, bottom-right); @each $border-radius-align in $border-radius-aligns { .u-br-#{$border-radius-align}--base { border-#{$border-radius-align}-radius: $global-radius; } } $border-radius-sides: (top, bottom); @each $border-radius-side in $border-radius-sides { .u-br-#{$border-radius-side}--base { border-#{$border-radius-side}-left-radius: $global-radius; border-#{$border-radius-side}-right-radius: $global-radius; } } .u-br--2xbase { border-radius: $global-radius * 2 !important; } $margins: ( 'zero': 0, 'xs': $ub-small-margin * .7, 'small': $ub-small-margin, 'base': $ub-base-margin, 'large': $ub-large-margin, 'xlarge': $ub-xlarge-margin, 'xxlarge': $ub-xxlarge-margin, ); $margins-align: (top, bottom, right, left); @each $margin-type, $margin-value in $margins { @each $align in $margins-align { .u-margin-#{$align}--#{$margin-type} { margin-#{$align}: $margin-value !important; } } .u-margin-horizontal--#{$margin-type} { margin-left: $margin-value; margin-right: $margin-value; } .u-margin-vertical--#{$margin-type} { margin-bottom: $margin-value; margin-top: $margin-value; } } $paddings: ( 'zero': 0, 'tiny': 5px, 'xs': $ub-small-margin * .7, 'small': $ub-small-margin, 'base': $ub-base-margin, 'large': $ub-large-margin, 'xlarge': $ub-xlarge-margin, ); $paddings-align: (top, bottom, left, right); @each $padding-type, $padding-value in $paddings { @each $align in $paddings-align { .u-padding-#{$align}--#{$padding-type} { padding-#{$align}: $padding-value !important; } } .u-padding-horizontal--#{$padding-type} { padding-left: $padding-value; padding-right: $padding-value; } } $align-directions: (top, bottom, left, right); $align-types: (padding, margin); @each $align-dir in $align-directions { @each $align-type in $align-types { .u-#{$align-type}-#{$align-dir}--gutter-half { @include add-gutter($type: #{$align-type}, $subtype: #{$align-dir}, $x: .5); } .u-#{$align-type}-#{$align-dir}--gutter { @include add-gutter($type: #{$align-type}, $subtype: #{$align-dir}); } .u-#{$align-type}-#{$align-dir}--gutter2x { @include add-gutter($type: #{$align-type}, $subtype: #{$align-dir}); } } } $bg: ( light: $ub-white, base: $ub-panel-bg, dark: $ub-hero-bg, primary: $ub-primary1, tooltip: darken($ub-tooltip, 1%), ls: map-get($ub-leadership, bg), ); .u-bg--base-gradient { background-image: $ub-gray-gradient; } @each $bg-type, $bg-color in $bg { .u-bg--#{$bg-type} { background-color: $bg-color; } } .u-wrap { @each $bg-type, $bg-color in $bg { @include m($bg-type) { @extend .u-bg--#{$bg-type}; padding: $ub-base-padding; } } } .u-pd-content { @include add-top-bottom-padding; } .u-pd-content--xlarge { @include add-top-bottom-padding(2); } .u-link--disabled { &, a { color: $medium-gray; cursor: not-allowed; } } .u-hr-small { @include clearfix; border-bottom: 2px solid map-get($ub-yellow, base); border-radius: 2px; border-top: 3px solid map-get($ub-yellow, base); margin-bottom: $ub-base-margin; width: 52px; } .u-hr-small--green { border-color: map-get($ub-green, base); } .u-hr-small--ls { border-color: map-get($ub-leadership, base); } .u-centered { margin-left: auto; margin-right: auto; } .u-container { @include m(condensed) { max-width: 30rem; } } .u-inline { display: inline; }