app/assets/stylesheets/lcms/engine/utils/_helpers.scss
// stylelint-disable declaration-no-important
$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 * 0.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 * 0.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: 0.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}; // stylelint-disable-line scss/at-extend-no-missing-placeholder
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;
}