first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,269 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Flash of unstyled content (FOUC)
|
||||
*
|
||||
* CSS fix for FOUC issue, which pops up in latest jQuery version. These styles
|
||||
* are optional, but enabled by default. Feel free to turn them off in configuration.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
// Check if component is enabled
|
||||
@if $enable-fouc-fix {
|
||||
|
||||
|
||||
//
|
||||
// Checkboxes and Radios
|
||||
//
|
||||
// for Uniform inputs
|
||||
// requires [data-fouc] data attribute
|
||||
//
|
||||
|
||||
input[type=checkbox][data-fouc],
|
||||
input[type=radio][data-fouc] {
|
||||
visibility: hidden;
|
||||
@include size($checkbox-size);
|
||||
|
||||
// Inside .form-check container
|
||||
.form-check & {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// Inline list
|
||||
.form-check-inline:not(.form-check-switchery) & {
|
||||
position: relative;
|
||||
margin-top: (($line-height-computed - $checkbox-size) / 2);
|
||||
margin-right: $form-check-inline-input-margin-x;
|
||||
|
||||
// Right aligned
|
||||
.form-check-inline.form-check-right & {
|
||||
margin-right: 0;
|
||||
margin-left: $form-check-inline-input-margin-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Switchery
|
||||
//
|
||||
// for Switchery inputs
|
||||
// requires wrapper with .form-check-switchery class
|
||||
//
|
||||
|
||||
// Left and right alignment
|
||||
.form-check-switchery {
|
||||
input[data-fouc] {
|
||||
width: ($switchery-size * 2) + rem-calc($switchery-border-width * 2);
|
||||
height: $switchery-size + rem-calc($switchery-border-width * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Centered
|
||||
.form-check-switchery-double {
|
||||
&.form-check input[data-fouc] {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Bootstrap switch
|
||||
//
|
||||
// for Bootstrap switch inputs
|
||||
// requires wrapper with .form-check-switch class
|
||||
//
|
||||
|
||||
.form-check-switch {
|
||||
input {
|
||||
height: $input-height;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
|
||||
// Large size
|
||||
&[data-size=large] {
|
||||
height: $input-height-lg;
|
||||
}
|
||||
|
||||
// Small size
|
||||
&[data-size=small] {
|
||||
height: $input-height-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Text input
|
||||
//
|
||||
// for tags, Uniform etc.
|
||||
// includes optional sizes
|
||||
//
|
||||
|
||||
input {
|
||||
|
||||
// Base
|
||||
&[type=text][data-fouc] {
|
||||
height: $input-height;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Large size
|
||||
&[type=text].form-control-lg[data-fouc] {
|
||||
height: $input-height-lg;
|
||||
}
|
||||
|
||||
// Small size
|
||||
&[type=text].form-control-sm[data-fouc] {
|
||||
height: $input-height-sm;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Selects
|
||||
//
|
||||
// for Select2 and Uniform selects
|
||||
// single and multiple
|
||||
//
|
||||
|
||||
select {
|
||||
|
||||
// Base
|
||||
&[data-fouc]:not([aria-hidden=false]) {
|
||||
height: $input-height;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Large size
|
||||
&.form-control-lg[data-fouc]:not([aria-hidden=false]) {
|
||||
height: $input-height-lg;
|
||||
}
|
||||
|
||||
// Small size
|
||||
&.form-control-sm[data-fouc]:not([aria-hidden=false]) {
|
||||
height: $input-height-sm;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// File input
|
||||
//
|
||||
// for Uniform file input
|
||||
// includes optional sizes
|
||||
//
|
||||
|
||||
input {
|
||||
|
||||
// Base
|
||||
&[type=file][data-fouc] {
|
||||
height: $input-height;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Large size
|
||||
&[type=file].form-control-lg[data-fouc] {
|
||||
height: $input-height-lg;
|
||||
}
|
||||
|
||||
// Small size
|
||||
&[type=file].form-control-sm[data-fouc] {
|
||||
height: $input-height-sm;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Form wizard
|
||||
//
|
||||
// for Steps wizard
|
||||
// only hides main container
|
||||
//
|
||||
|
||||
.wizard-form[data-fouc] {
|
||||
opacity: 0;
|
||||
|
||||
// Show wizard
|
||||
&.wizard {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Calculate approximate container height
|
||||
&:not(.wizard) {
|
||||
padding-top: ($wizard-step-number-size + ($spacer / 2) + $line-height-computed) + ($spacer * 2);
|
||||
padding-bottom: (($input-padding-y * 2) + $line-height-computed + $spacer + rem-calc($input-border-width * 2));
|
||||
|
||||
// Hide certain elements
|
||||
fieldset:not(:first-of-type),
|
||||
h6 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Color picker
|
||||
//
|
||||
// for Spectrum color picker
|
||||
// hard coded height
|
||||
//
|
||||
|
||||
input[type=text].colorpicker-flat-full[data-fouc] {
|
||||
height: 285px;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Ace editor
|
||||
//
|
||||
// for code editor containers
|
||||
// only hides main wrapper
|
||||
//
|
||||
|
||||
pre[data-fouc] {
|
||||
&:not(.ace_editor) {
|
||||
height: $pre-scrollable-max-height;
|
||||
}
|
||||
&.ace_editor {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sliders
|
||||
//
|
||||
// for NoUI and ION sliders
|
||||
// both require .noui-pips-height-helper and .ion-height-helper classes
|
||||
//
|
||||
|
||||
|
||||
// NoUI slider
|
||||
.noui-pips-height-helper:not(.noUi-target)[data-fouc] {
|
||||
height: $slider-pips-spacer-y + $line-height-computed + $slider-height;
|
||||
}
|
||||
.noui-pips-height-helper.noui-slider-lg:not(.noUi-target)[data-fouc] {
|
||||
height: $slider-pips-spacer-y + $line-height-computed + $slider-height-lg;
|
||||
}
|
||||
.noui-pips-height-helper.noui-slider-sm:not(.noUi-target)[data-fouc] {
|
||||
height: $slider-pips-spacer-y + $line-height-computed + $slider-height-sm;
|
||||
}
|
||||
.noui-vertical-height-helper:not(.noUi-target)[data-fouc] {
|
||||
display: inline-block;
|
||||
height: $slider-vertical-height;
|
||||
}
|
||||
|
||||
// ION range slider
|
||||
input[type=text].ion-height-helper[data-fouc] {
|
||||
height: $tooltip-arrow-height + ($tooltip-padding-y * 2) + $slider-pips-font-size + ($slider-height * 4);
|
||||
}
|
||||
input[type=text].ion-pips-height-helper[data-fouc] {
|
||||
height: $tooltip-arrow-height + ($tooltip-padding-y * 2) + $slider-pips-font-size + ($slider-height * 7) + $slider-pips-spacer-y;
|
||||
}
|
||||
input[type=text].noui-height-helper:not(.noUi-target)[data-fouc] {
|
||||
height: $slider-height;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,481 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Helper classes
|
||||
*
|
||||
* Custom helper classes used in the template.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Content helpers
|
||||
// -------------------------
|
||||
|
||||
// Font size
|
||||
.font-size-lg {
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
.font-size-base {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
.font-size-sm {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
.font-size-xs {
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
|
||||
// Line height
|
||||
.line-height-lg {
|
||||
line-height: $line-height-lg;
|
||||
}
|
||||
.line-height-base {
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
.line-height-sm {
|
||||
line-height: $line-height-sm;
|
||||
}
|
||||
.line-height-xs {
|
||||
line-height: $line-height-xs;
|
||||
}
|
||||
.line-height-1 {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Opacity
|
||||
.opacity-75 {
|
||||
opacity: 0.75;
|
||||
}
|
||||
.opacity-50 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.opacity-25 {
|
||||
opacity: 0.25;
|
||||
}
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Edges
|
||||
.top {
|
||||
&-0 {
|
||||
top: 0;
|
||||
}
|
||||
&-auto {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
&-0 {
|
||||
bottom: 0;
|
||||
}
|
||||
&-auto {
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
.left {
|
||||
&-0 {
|
||||
left: 0;
|
||||
}
|
||||
&-auto {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
&-0 {
|
||||
right: 0;
|
||||
}
|
||||
&-auto {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Cursors
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.cursor-move {
|
||||
cursor: move;
|
||||
}
|
||||
.cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
.cursor-disabled {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
|
||||
// Overflow
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.overflow-visible {
|
||||
overflow: visible;
|
||||
}
|
||||
.overflow-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Borders
|
||||
// -------------------------
|
||||
|
||||
// Set border width to 0
|
||||
.border-width-0 {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// Vertical borders
|
||||
.border-y-0 {
|
||||
border-top: 0 !important;
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
// Horizontal borders
|
||||
.border-x-0 {
|
||||
border-left: 0 !important;
|
||||
border-right: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Border widths
|
||||
//
|
||||
|
||||
// Default border width
|
||||
.border-1 {
|
||||
border: $border-width solid;
|
||||
}
|
||||
.border-top-1 {
|
||||
border-top: $border-width solid;
|
||||
}
|
||||
.border-bottom-1 {
|
||||
border-bottom: $border-width solid;
|
||||
}
|
||||
.border-left-1 {
|
||||
border-left: $border-width solid;
|
||||
}
|
||||
.border-right-1 {
|
||||
border-right: $border-width solid;
|
||||
}
|
||||
.border-y-1 {
|
||||
border-top: $border-width solid;
|
||||
border-bottom: $border-width solid;
|
||||
}
|
||||
.border-x-1 {
|
||||
border-left: $border-width solid;
|
||||
border-right: $border-width solid;
|
||||
}
|
||||
|
||||
// Double border
|
||||
.border-2 {
|
||||
border: ($border-width * 2) solid;
|
||||
}
|
||||
.border-top-2 {
|
||||
border-top: ($border-width * 2) solid;
|
||||
}
|
||||
.border-bottom-2 {
|
||||
border-bottom: ($border-width * 2) solid;
|
||||
}
|
||||
.border-left-2 {
|
||||
border-left: ($border-width * 2) solid;
|
||||
}
|
||||
.border-right-2 {
|
||||
border-right: ($border-width * 2) solid;
|
||||
}
|
||||
.border-y-2 {
|
||||
border-top: ($border-width * 2) solid;
|
||||
border-bottom: ($border-width * 2) solid;
|
||||
}
|
||||
.border-x-2 {
|
||||
border-left: ($border-width * 2) solid;
|
||||
border-right: ($border-width * 2) solid;
|
||||
}
|
||||
|
||||
// Tripple border
|
||||
.border-3 {
|
||||
border: ($border-width * 3) solid;
|
||||
}
|
||||
.border-top-3 {
|
||||
border-top: ($border-width * 3) solid;
|
||||
}
|
||||
.border-bottom-3 {
|
||||
border-bottom: ($border-width * 3) solid;
|
||||
}
|
||||
.border-left-3 {
|
||||
border-left: ($border-width * 3) solid;
|
||||
}
|
||||
.border-right-3 {
|
||||
border-right: ($border-width * 3) solid;
|
||||
}
|
||||
.border-y-3 {
|
||||
border-top: ($border-width * 3) solid;
|
||||
border-bottom: ($border-width * 3) solid;
|
||||
}
|
||||
.border-x-3 {
|
||||
border-left: ($border-width * 3) solid;
|
||||
border-right: ($border-width * 3) solid;
|
||||
}
|
||||
|
||||
// Border style
|
||||
.border {
|
||||
|
||||
// Dashed
|
||||
&-dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
&-top-dashed {
|
||||
border-top-style: dashed;
|
||||
}
|
||||
&-bottom-dashed {
|
||||
border-bottom-style: dashed;
|
||||
}
|
||||
&-left-dashed {
|
||||
border-left-style: dashed;
|
||||
}
|
||||
&-right-dashed {
|
||||
border-right-style: dashed;
|
||||
}
|
||||
|
||||
// Dotted
|
||||
&-dotted {
|
||||
border-style: dotted;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Rounded corners
|
||||
// -------------------------
|
||||
|
||||
// Fully rounded borders
|
||||
.rounded-round {
|
||||
@include border-radius($border-radius-round !important);
|
||||
}
|
||||
.rounded-top-round {
|
||||
@include border-top-radius($border-radius-round !important);
|
||||
}
|
||||
.rounded-bottom-round {
|
||||
@include border-bottom-radius($border-radius-round !important);
|
||||
}
|
||||
.rounded-left-round {
|
||||
@include border-left-radius($border-radius-round !important);
|
||||
}
|
||||
.rounded-right-round {
|
||||
@include border-right-radius($border-radius-round !important);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Remove rounded corners from specific side
|
||||
//
|
||||
|
||||
.rounded-top-0 {
|
||||
@include border-top-radius(0 !important);
|
||||
}
|
||||
.rounded-bottom-0 {
|
||||
@include border-bottom-radius(0 !important);
|
||||
}
|
||||
.rounded-left-0 {
|
||||
@include border-left-radius(0 !important);
|
||||
}
|
||||
.rounded-right-0 {
|
||||
@include border-right-radius(0 !important);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Transforms
|
||||
// -------------------------
|
||||
|
||||
//
|
||||
// Rotation
|
||||
//
|
||||
|
||||
// Basic direction
|
||||
.rotate-45 {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.rotate-90 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.rotate-180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
// Inversed
|
||||
.rotate-45-inverse {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.rotate-90-inverse {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.rotate-180-inverse {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Spinner animation
|
||||
//
|
||||
|
||||
// Default
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
|
||||
// Reversed
|
||||
.spinner-reverse {
|
||||
display: inline-block;
|
||||
animation: rotation_reverse 1s linear infinite;
|
||||
}
|
||||
|
||||
// Default rotation
|
||||
@-webkit-keyframes rotation {
|
||||
0% {-webkit-transform: rotate(0deg);}
|
||||
100% {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
0% {-moz-transform: rotate(0deg);}
|
||||
100% {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-ms-keyframes rotation {
|
||||
0% {-ms-transform: rotate(0deg);}
|
||||
100% {-ms-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
0% {-o-transform: rotate(0deg);}
|
||||
100% {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
0% {transform: rotate(0deg);}
|
||||
100% {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
// Inversed rotation
|
||||
@-webkit-keyframes rotation_reverse {
|
||||
0% {-webkit-transform: rotate(0deg);}
|
||||
100% {-webkit-transform: rotate(-360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation_reverse {
|
||||
0% {-moz-transform: rotate(0deg);}
|
||||
100% {-moz-transform: rotate(-360deg);}
|
||||
}
|
||||
@-ms-keyframes rotation_reverse {
|
||||
0% {-ms-transform: rotate(0deg);}
|
||||
100% {-ms-transform: rotate(-360deg);}
|
||||
}
|
||||
@-o-keyframes rotation_reverse {
|
||||
0% {-o-transform: rotate(0deg);}
|
||||
100% {-o-transform: rotate(-360deg);}
|
||||
}
|
||||
@keyframes rotation_reverse {
|
||||
0% {transform: rotate(0deg);}
|
||||
100% {transform: rotate(-360deg);}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Sizing
|
||||
// -------------------------
|
||||
|
||||
// Auto height
|
||||
.h-auto {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Element widths
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
.w#{$infix}-auto { width: auto !important; }
|
||||
|
||||
.w#{$infix}-25 { width: 25% !important; }
|
||||
.w#{$infix}-50 { width: 50% !important; }
|
||||
.w#{$infix}-75 { width: 75% !important; }
|
||||
.w#{$infix}-100 { width: 100% !important; }
|
||||
|
||||
.wmin#{$infix}-0 { min-width: 0 !important; }
|
||||
.wmin#{$infix}-200 { min-width: 200px !important; }
|
||||
.wmin#{$infix}-250 { min-width: 250px !important; }
|
||||
.wmin#{$infix}-300 { min-width: 300px !important; }
|
||||
.wmin#{$infix}-350 { min-width: 350px !important; }
|
||||
.wmin#{$infix}-400 { min-width: 400px !important; }
|
||||
.wmin#{$infix}-450 { min-width: 450px !important; }
|
||||
.wmin#{$infix}-500 { min-width: 500px !important; }
|
||||
.wmin#{$infix}-550 { min-width: 550px !important; }
|
||||
.wmin#{$infix}-600 { min-width: 600px !important; }
|
||||
|
||||
.flex#{$infix}-1 { flex: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Misc
|
||||
// -------------------------
|
||||
|
||||
// Disable all transitions
|
||||
.no-transitions * {
|
||||
&,
|
||||
&:before,
|
||||
&:after {
|
||||
@include transition(none !important);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove caret from .dropdown-toggle element
|
||||
.caret-0 {
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove box shadow
|
||||
.shadow-0 {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// Remove outline
|
||||
.outline-0 {
|
||||
@include plain-hover-focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Text shadow
|
||||
.text-shadow-dark {
|
||||
text-shadow: 0 0 0.1875rem rgba($black, 0.5);
|
||||
}
|
||||
.text-shadow-light {
|
||||
text-shadow: 0 0 0.1875rem rgba($white, 0.5);
|
||||
}
|
||||
|
||||
|
||||
/* ------------------------------
|
||||
*
|
||||
* Theme specific styles
|
||||
*
|
||||
* ------------------------------ */
|
||||
|
||||
// Material theme
|
||||
@if $theme == 'material' {
|
||||
|
||||
// Shadows
|
||||
.shadow-1 {
|
||||
box-shadow: $shadow-depth1;
|
||||
}
|
||||
.shadow-2 {
|
||||
box-shadow: $shadow-depth2;
|
||||
}
|
||||
.shadow-3 {
|
||||
box-shadow: $shadow-depth3;
|
||||
}
|
||||
.shadow-4 {
|
||||
box-shadow: $shadow-depth4;
|
||||
}
|
||||
.shadow-5 {
|
||||
box-shadow: $shadow-depth5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Custom Limitless functions
|
||||
*
|
||||
* Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
//
|
||||
// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
|
||||
//
|
||||
// @param {Number} $num - Number to strip unit from.
|
||||
//
|
||||
// @returns {Number} The same number, sans unit.
|
||||
|
||||
@function strip-unit($num) {
|
||||
@return $num / ($num * 0 + 1);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Converts one or more pixel values into matching rem values.
|
||||
//
|
||||
// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
|
||||
// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
|
||||
//
|
||||
// @returns {List} A list of converted values.
|
||||
|
||||
$global-font-size: 100% !default;
|
||||
|
||||
@function rem-calc($values, $base: null) {
|
||||
$rem-values: ();
|
||||
$count: length($values);
|
||||
|
||||
// If no base is defined, defer to the global font size
|
||||
@if $base == null {
|
||||
$base: $global-font-size;
|
||||
}
|
||||
|
||||
// If the base font size is a %, then multiply it by 16px
|
||||
// This is because 100% font size = 16px in most all browsers
|
||||
@if unit($base) == '%' {
|
||||
$base: ($base / 100%) * 16px;
|
||||
}
|
||||
|
||||
// Using rem as base allows correct scaling
|
||||
@if unit($base) == 'rem' {
|
||||
$base: strip-unit($base) * 16px;
|
||||
}
|
||||
|
||||
@if $count == 1 {
|
||||
@return -zf-to-rem($values, $base);
|
||||
}
|
||||
|
||||
@for $i from 1 through $count {
|
||||
$rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));
|
||||
}
|
||||
|
||||
@return $rem-values;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.
|
||||
// @access private
|
||||
//
|
||||
// @param {Number} $value - Pixel value to convert.
|
||||
// @param {Number} $base [null] - Base for pixel conversion.
|
||||
//
|
||||
// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
|
||||
|
||||
@function -zf-to-rem($value, $base: null) {
|
||||
|
||||
// Check if the value is a number
|
||||
@if type-of($value) != 'number' {
|
||||
@warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
|
||||
@return $value;
|
||||
}
|
||||
|
||||
// Transform em into rem if someone hands over 'em's
|
||||
@if unit($value) == 'em' {
|
||||
$value: strip-unit($value) * 1rem;
|
||||
}
|
||||
|
||||
// Calculate rem if units for $value is not rem or em
|
||||
@if unit($value) != 'rem' {
|
||||
$value: strip-unit($value) / strip-unit($base) * 1rem;
|
||||
}
|
||||
|
||||
// Turn 0rem into 0
|
||||
@if $value == 0rem {
|
||||
$value: 0;
|
||||
}
|
||||
|
||||
@return $value;
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Custom template mixins
|
||||
*
|
||||
* All custom mixins are prefixed with "ll-" to avoid conflicts
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Content
|
||||
// ------------------------------
|
||||
|
||||
// Font smoothing
|
||||
@mixin ll-font-smoothing() {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Sizing shortcut. Bootstrap deprecated it, but I find it very handy.
|
||||
// From now on this mixin lives here.
|
||||
@mixin size($width, $height: $width) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Colors (for color system)
|
||||
//
|
||||
|
||||
// For .bg-* classes
|
||||
@mixin ll-background-variant($color) {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
// For .text-* classes
|
||||
@mixin ll-text-color-variant($color) {
|
||||
color: $color;
|
||||
|
||||
// Darken link color on hover
|
||||
&[href] {
|
||||
@include hover-focus {
|
||||
color: darken($color, 7.5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// For .border-* classes
|
||||
@mixin ll-border-color-variant($color) {
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
// For .border-top-* classes
|
||||
@mixin ll-border-top-color-variant($color) {
|
||||
border-top-color: $color;
|
||||
}
|
||||
|
||||
// For .border-bottom-* classes
|
||||
@mixin ll-border-bottom-color-variant($color) {
|
||||
border-bottom-color: $color;
|
||||
}
|
||||
|
||||
// For .border-left-* classes
|
||||
@mixin ll-border-left-color-variant($color) {
|
||||
border-left-color: $color;
|
||||
}
|
||||
|
||||
// For .border-right-* classes
|
||||
@mixin ll-border-right-color-variant($color) {
|
||||
border-right-color: $color;
|
||||
}
|
||||
Reference in New Issue
Block a user