added more preview pages and more templates
This commit is contained in:
@@ -0,0 +1,22 @@
|
||||
//
|
||||
// Gradient background
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin bg-variant-custom($color, $fallback: null) {
|
||||
& {
|
||||
@if (str_index($color, linear-gradient) == null){
|
||||
background: $color;
|
||||
fill: $color;
|
||||
}
|
||||
@else{
|
||||
fill: $fallback;
|
||||
background: $fallback;
|
||||
background: -moz-#{$color};
|
||||
background: -webkit-#{$color};
|
||||
background: -o-#{$color};
|
||||
background: -ms-#{$color};
|
||||
background: #{$color};
|
||||
}
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
// Custom button variants
|
||||
//
|
||||
|
||||
@mixin button-variant-custom($clr, $bg, $bd, $clr-hover, $bg-hover, $bd-hover) {
|
||||
color: $clr;
|
||||
background-color: $bg;
|
||||
border-color: $bd;
|
||||
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle {
|
||||
color: $clr-hover;
|
||||
background-color: $bg-hover;
|
||||
border-color: $bd-hover;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle {
|
||||
@include box-shadow($shadow-area-sm);
|
||||
|
||||
// TODO Optimize css export
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: $clr-hover;
|
||||
background-color: $bg-hover;
|
||||
border-color: $bd-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
pointer-events: none;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: $bg;
|
||||
background-color: $clr;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
// Divider-gradient
|
||||
|
||||
@mixin divider-gradient($color-1, $color-2) {
|
||||
background: rgba($color-1,1);
|
||||
background: -moz-linear-gradient(left, rgba($color-1,1) 0%, rgba($color-2,1) 50%, rgba($color-1,1) 100%);
|
||||
background: -webkit-gradient(left top, right top, color-stop(0%, rgba($color-1,1)), color-stop(50%, rgba($color-2,1)), color-stop(100%, rgba($color-1,1)));
|
||||
background: -webkit-linear-gradient(left, rgba($color-1,1) 0%, rgba($color-2,1) 50%, rgba($color-1,1) 100%);
|
||||
background: -o-linear-gradient(left, rgba($color-1,1) 0%, rgba($color-2,1) 50%, rgba($color-1,1) 100%);
|
||||
background: -ms-linear-gradient(left, rgba($color-1,1) 0%, rgba($color-2,1) 50%, rgba($color-1,1) 100%);
|
||||
background: linear-gradient(to right, rgba($color-1,1) 0%, rgba($color-2,1) 50%, rgba($color-1,1) 100%);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
// Element-groups
|
||||
|
||||
@mixin element-groups-custom($offset, $translate-offset) {
|
||||
-webkit-transform: translateY(-$offset);
|
||||
transform: translateY(-$offset);
|
||||
margin-bottom: -$offset;
|
||||
margin-left: -$translate-offset;
|
||||
|
||||
> *, > *:first-child {
|
||||
display: inline-block;
|
||||
margin-top: $offset;
|
||||
margin-left: $translate-offset;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
// CSS Flex Grid Framework
|
||||
|
||||
@mixin make-shell($gutter: 30px) {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
}
|
||||
|
||||
@mixin make-range($gutter: 30px) {
|
||||
margin-left: ceil(($gutter / -2));
|
||||
margin-right: floor(($gutter / -2));
|
||||
}
|
||||
|
||||
@mixin make-cell-spacing($gutter: 30px) {
|
||||
padding-left: ceil(($gutter / 2));
|
||||
padding-right: floor(($gutter / 2));
|
||||
}
|
||||
|
||||
@mixin make-cell($resolution, $count: 12) {
|
||||
.cell-#{$resolution}-preffix-0 {
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
@for $i from 1 through $count {
|
||||
.cell-#{$resolution}-#{$i} {
|
||||
@include flex-basis(percentage($i / $count));
|
||||
}
|
||||
|
||||
.cell-#{$resolution}-preffix-#{$i} {
|
||||
margin-left: percentage($i / $count);
|
||||
}
|
||||
|
||||
.cell-#{$resolution}-push-#{$i} {
|
||||
@include order($i);
|
||||
}
|
||||
}
|
||||
|
||||
.cell-#{$resolution}-1-5 {
|
||||
@include flex-basis(percentage(0.2));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-fallback($resolution, $count: 12) {
|
||||
@for $i from 1 through $count {
|
||||
.cell-xs-#{$i}{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: percentage($i / $count);
|
||||
}
|
||||
}
|
||||
|
||||
.cell-xs-1-5{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: percentage(0.2);
|
||||
}
|
||||
|
||||
@for $i from 1 through $count {
|
||||
.cell-sm-#{$i}{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: percentage($i / $count);
|
||||
}
|
||||
}
|
||||
|
||||
.cell-sm-1-5{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: percentage(0.2);
|
||||
}
|
||||
|
||||
@for $i from 1 through $count {
|
||||
.cell-md-#{$i}{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: percentage($i / $count);
|
||||
}
|
||||
}
|
||||
|
||||
.cell-md-1-5{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: percentage(0.2);
|
||||
}
|
||||
|
||||
@for $i from 1 through $count {
|
||||
.cell-lg-#{$i} {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: percentage($i / $count);
|
||||
}
|
||||
}
|
||||
|
||||
.cell-lg-1-5{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: percentage(0.2);
|
||||
}
|
||||
|
||||
[class*="cell-xs-preffix-"],
|
||||
[class*="cell-sm-preffix-"],
|
||||
[class*="cell-md-preffix-"],
|
||||
[class*="cell-lg-preffix-"]{
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-grid-system($resolution, $cell-count) {
|
||||
.range-#{$resolution}-center {
|
||||
@include justify-content(center);
|
||||
}
|
||||
|
||||
.range-#{$resolution}-left {
|
||||
@include justify-content(flex-start);
|
||||
}
|
||||
|
||||
.range-#{$resolution}-right {
|
||||
@include justify-content(flex-end);
|
||||
}
|
||||
|
||||
.range-#{$resolution}-justify {
|
||||
@include justify-content(space-between);
|
||||
}
|
||||
|
||||
.range-#{$resolution}-around {
|
||||
@include justify-content(space-around);
|
||||
}
|
||||
|
||||
.range-#{$resolution}-top {
|
||||
@include align-items(flex-start);
|
||||
}
|
||||
|
||||
.range-#{$resolution} {
|
||||
@include flex-direction(row);
|
||||
}
|
||||
|
||||
.range-#{$resolution}-reverse {
|
||||
@include flex-direction(row-reverse);
|
||||
}
|
||||
|
||||
.range-#{$resolution}-middle {
|
||||
@include align-items(center);
|
||||
}
|
||||
|
||||
.range-#{$resolution}-bottom {
|
||||
@include align-items(flex-end);
|
||||
}
|
||||
|
||||
.cell-#{$resolution}-top {
|
||||
@include align-self(flex-start);
|
||||
}
|
||||
|
||||
.cell-#{$resolution}-middle {
|
||||
@include align-self(center);
|
||||
}
|
||||
|
||||
.cell-#{$resolution}-bottom {
|
||||
@include align-self(flex-end);
|
||||
}
|
||||
|
||||
.range > {
|
||||
@include make-cell($resolution, $cell-count);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
// CSS Flex
|
||||
|
||||
@mixin display-flex() {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@mixin flex($grow-shrink-basis) {
|
||||
-ms-flex: $grow-shrink-basis;
|
||||
-webkit-flex: $grow-shrink-basis;
|
||||
flex: $grow-shrink-basis;
|
||||
}
|
||||
|
||||
@mixin flex-direction($direction) {
|
||||
-webkit-flex-direction: $direction;
|
||||
-ms-flex-direction: $direction;
|
||||
flex-direction: $direction;
|
||||
}
|
||||
|
||||
@mixin flex-wrap($wrap) {
|
||||
-webkit-flex-wrap: $wrap;
|
||||
-ms-flex-wrap: $wrap;
|
||||
flex-wrap: $wrap;
|
||||
}
|
||||
|
||||
@mixin flex-grow($grow) {
|
||||
-webkit-flex-grow: $grow;
|
||||
-ms-flex-positive: $grow;
|
||||
flex-grow: $grow;
|
||||
}
|
||||
|
||||
@mixin flex-basis($basis) {
|
||||
-webkit-flex-basis: $basis;
|
||||
-ms-flex-preferred-size: $basis;
|
||||
flex-basis: $basis;
|
||||
max-width: $basis;
|
||||
}
|
||||
|
||||
@mixin justify-content($align) {
|
||||
-webkit-justify-content: $align;
|
||||
@if ($align == "flex-start") {
|
||||
-ms-flex-pack: start;
|
||||
} @else if ($align == "flex-end") {
|
||||
-ms-flex-pack: end;
|
||||
} @else if ($align == "space-around") {
|
||||
-ms-flex-pack: distribute;
|
||||
} @else if ($align == "space-between") {
|
||||
-ms-flex-pack: justify;
|
||||
} @else {
|
||||
-ms-flex-pack: $align;
|
||||
}
|
||||
justify-content: $align;
|
||||
}
|
||||
|
||||
@mixin align-content($align){
|
||||
-webkit-align-content: $align;
|
||||
@if ($align == "flex-start") {
|
||||
-ms-flex-pack: start;
|
||||
} @else if ($align == "flex-end") {
|
||||
-ms-flex-pack: end;
|
||||
} @else if ($align == "space-around") {
|
||||
-ms-flex-pack: distribute;
|
||||
} @else if ($align == "space-between") {
|
||||
-ms-flex-pack: justify;
|
||||
} @else if ($align == "center") {
|
||||
-ms-flex-pack: center;
|
||||
} @else if ($align == "stretch") {
|
||||
-ms-flex-pack: stretch;
|
||||
} @else {
|
||||
-ms-flex-pack: $align;
|
||||
}
|
||||
align-content: $align;
|
||||
}
|
||||
|
||||
@mixin align-items($valign) {
|
||||
-webkit-align-items: $valign;
|
||||
@if ($valign == "flex-start") {
|
||||
-ms-flex-align: start;
|
||||
} @else if ($valign == "flex-end") {
|
||||
-ms-flex-align: end;
|
||||
} @else {
|
||||
-ms-flex-align: $valign;
|
||||
}
|
||||
align-items: $valign;
|
||||
}
|
||||
|
||||
@mixin align-self($valign) {
|
||||
-webkit-align-self: $valign;
|
||||
@if ($valign == "flex-start") {
|
||||
-ms-flex-item-align: start;
|
||||
} @else if ($valign == "flex-end") {
|
||||
-ms-flex-item-align: end;
|
||||
} @else {
|
||||
-ms-flex-item-align: $valign;
|
||||
}
|
||||
align-self: $valign;
|
||||
}
|
||||
|
||||
@mixin order($order) {
|
||||
-webkit-order: $order;
|
||||
-ms-flex-order: $order;
|
||||
order: $order
|
||||
}
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
// Form validation states
|
||||
//
|
||||
@mixin form-control-validation-custom($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
|
||||
// Color the label and help text
|
||||
.help-block,
|
||||
.control-label,
|
||||
.radio,
|
||||
.checkbox,
|
||||
.radio-inline,
|
||||
.checkbox-inline,
|
||||
&.radio label,
|
||||
&.checkbox label,
|
||||
&.radio-inline label,
|
||||
&.checkbox-inline label {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
.form-control:not(.form-control-impressed) {
|
||||
&, &:focus {
|
||||
border-color: $border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-impressed{
|
||||
&, &:focus{
|
||||
box-shadow: inset 0 0 0 1px $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Set validation states also for addons
|
||||
.input-group-addon {
|
||||
color: $white;
|
||||
border-color: $border-color;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
// Set validation states also for buttons
|
||||
.input-group-btn{
|
||||
> .btn{
|
||||
border-color: $border-color;
|
||||
background: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Set validation states also for validation message
|
||||
.form-validation{
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
//
|
||||
// Functions
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@function str-replace($string, $search, $replace: '') {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
@function rem($px-size) {
|
||||
@return str-replace(#{($px-size/100)}, px, rem);
|
||||
}
|
||||
|
||||
@function remove($list, $value, $recursive: false) {
|
||||
$result: ();
|
||||
|
||||
@for $i from 1 through length($list) {
|
||||
@if type-of(nth($list, $i)) == list and $recursive {
|
||||
$result: append($result, remove(nth($list, $i), $value, $recursive));
|
||||
} @else if nth($list, $i) != $value {
|
||||
$result: append($result, nth($list, $i));
|
||||
}
|
||||
}
|
||||
|
||||
@return $result;
|
||||
}
|
||||
|
||||
@function sort($list) {
|
||||
$sortedlist: ();
|
||||
@while length($list) > 0 {
|
||||
$value: nth($list, 1);
|
||||
@each $item in $list {
|
||||
@if $item < $value {
|
||||
$value: $item;
|
||||
}
|
||||
}
|
||||
$sortedlist: append($sortedlist, $value, 'space');
|
||||
$list: remove($list, $value);
|
||||
}
|
||||
@return $sortedlist;
|
||||
}
|
||||
|
||||
@function average($list) {
|
||||
$sum: 0;
|
||||
|
||||
@each $i in $list {
|
||||
$sum: $sum + $i;
|
||||
}
|
||||
|
||||
@return $sum / length($list);
|
||||
}
|
||||
|
||||
@function headings() {
|
||||
@return unquote("h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4,.h5, .h6");
|
||||
}
|
||||
|
||||
@function cols($resolution) {
|
||||
$selector: ();
|
||||
@each $j in 1, 2, 3, 4, 6, 12 {
|
||||
$selector: append($selector, "> .col-#{$resolution}-#{$j}:nth-child(n + #{(12/$j)+1})", comma);
|
||||
}
|
||||
|
||||
$selector: append($selector, "> .col-#{$resolution}-8.col-#{$resolution}-preffix-2");
|
||||
|
||||
@return $selector;
|
||||
}
|
||||
|
||||
@function cells($resolution) {
|
||||
$selector: ();
|
||||
@each $j in 1, 2, 3, 4, 6, 12 {
|
||||
$selector: append($selector, "> .cell-#{$resolution}-#{$j}:nth-child(n + #{(12/$j)+1})", comma);
|
||||
}
|
||||
|
||||
$selector: append($selector, "> .cell-#{$resolution}-8.cell-#{$resolution}-preffix-2");
|
||||
|
||||
@return $selector;
|
||||
}
|
||||
|
||||
@function cols-full($resolution) {
|
||||
$selector: ();
|
||||
@for $j from 1 through 12 {
|
||||
$selector: append($selector, "> .col-#{$resolution}-#{$j}:nth-child(n)", comma);
|
||||
}
|
||||
|
||||
@return $selector;
|
||||
}
|
||||
@function cells-full($resolution) {
|
||||
$selector: ();
|
||||
@for $j from 1 through 12 {
|
||||
$selector: append($selector, "> .cell-#{$resolution}-#{$j}:nth-child(n)", comma);
|
||||
}
|
||||
|
||||
@return $selector;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the unit of a length
|
||||
// @param {Number} $number - Number to remove unit from
|
||||
// @return {Number} - Unitless number
|
||||
@function strip-unit($number) {
|
||||
@if type-of($number) == 'number' and not unitless($number) {
|
||||
@return $number / ($number * 0 + 1);
|
||||
}
|
||||
|
||||
@return $number;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
//
|
||||
// Indent Utilities
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin indent-responsive($preffix, $postfix, $rules, $medias, $offsets) {
|
||||
@if ($postfix != '' and $postfix != null) {
|
||||
$postfix: #{$postfix}-;
|
||||
}
|
||||
|
||||
@if ($preffix != '' and $preffix != null) {
|
||||
$preffix: #{$preffix}-;
|
||||
}
|
||||
|
||||
@each $resolution, $alias in $medias {
|
||||
@if ($resolution == 0) {
|
||||
@each $offset in $offsets {
|
||||
.#{$preffix}#{$postfix}#{strip-unit($offset)} {
|
||||
@each $rule in $rules {
|
||||
#{$rule}: $offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
@media (min-width: $resolution) {
|
||||
@each $offset in $offsets {
|
||||
.#{$preffix}#{$alias}-#{$postfix}#{strip-unit($offset)} {
|
||||
@each $rule in $rules {
|
||||
#{$rule}: $offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
// Pull Utilities
|
||||
|
||||
@mixin make-pull-alignment($resolution: null) {
|
||||
@if ($resolution == null) {
|
||||
$resolution: ''
|
||||
} @else {
|
||||
$resolution: str_insert($resolution, '-', str_length($resolution) + 1);
|
||||
}
|
||||
.pull-#{$resolution}left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pull-#{$resolution}base {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.pull-#{$resolution}right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
//
|
||||
// Rules Utilities
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin rules-responsive($preffix, $medias, $postfix) {
|
||||
@if ($preffix != '' and $preffix != null) {
|
||||
$preffix: #{$preffix}-;
|
||||
}
|
||||
|
||||
@each $resolution, $alias in $medias {
|
||||
@if ($resolution == 0) {
|
||||
@each $offset in $offsets {
|
||||
.#{$preffix}#{$postfix} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
@media (min-width: $resolution) {
|
||||
@each $offset in $offsets {
|
||||
.#{$preffix}#{$alias}-#{$postfix} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
// Text Utilities
|
||||
|
||||
@mixin make-text-alignment($resolution: null) {
|
||||
@if ($resolution == null) {
|
||||
$resolution: ''
|
||||
} @else {
|
||||
$resolution: str_insert($resolution, '-', str_length($resolution) + 1);
|
||||
}
|
||||
.text-#{$resolution}left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-#{$resolution}center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-#{$resolution}right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-#{$resolution}justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.text-#{$resolution}nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-#{$resolution}normal {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
// Triangle
|
||||
|
||||
@mixin triangle($dir, $w, $h, $clr) {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
|
||||
@if $dir == top {
|
||||
border-width: 0 ceil($w/2) $h ceil($w/2);
|
||||
border-color: transparent transparent $clr transparent;
|
||||
} @else if $dir == bottom {
|
||||
border-width: $h ceil($w/2) 0 ceil($w/2);
|
||||
border-color: $clr transparent transparent transparent;
|
||||
} @else if $dir == left {
|
||||
border-width: ceil($h/2) $w ceil($h/2) 0;
|
||||
border-color: transparent $clr transparent transparent;
|
||||
} @else if $dir == right {
|
||||
border-width: ceil($h/2) 0 ceil($h/2) $w;
|
||||
border-color: transparent transparent transparent $clr;
|
||||
} @else if $dir == top_left {
|
||||
border-width: $w $w 0 0;
|
||||
border-color: $clr transparent transparent transparent;
|
||||
} @else if $dir == top_right {
|
||||
border-width: 0 $w $w 0;
|
||||
border-color: transparent $clr transparent transparent;
|
||||
} @else if $dir == bottom_right {
|
||||
border-width: 0 0 $w $w;
|
||||
border-color: transparent transparent $clr transparent;
|
||||
} @else if $dir == bottom_left {
|
||||
border-width: $w 0 0 $w;
|
||||
border-color: transparent transparent transparent $clr;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,235 @@
|
||||
// Unit Utilities
|
||||
@mixin unit-variant($spacing-t, $spacing-r, $spacing-b, $spacing-l, $breakpoint){
|
||||
.unit#{$breakpoint}-align-center {
|
||||
@include justify-content(center);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-align-left {
|
||||
@include justify-content(flex-start);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-align-right {
|
||||
@include justify-content(flex-end);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-align-justify {
|
||||
@include justify-content(space-between);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-align-around {
|
||||
@include justify-content(space-around);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-top{
|
||||
@include align-items(flex-start);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-middle{
|
||||
@include align-items(center);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-bottom{
|
||||
@include align-items(flex-end);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-grow-1{
|
||||
@include flex-grow(1);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-grow-2{
|
||||
@include flex-grow(2);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-grow-3{
|
||||
@include flex-grow(3);
|
||||
}
|
||||
|
||||
.unit-item#{$breakpoint}-top{
|
||||
@include align-self(flex-start);
|
||||
}
|
||||
|
||||
.unit-item#{$breakpoint}-middle{
|
||||
@include align-self(center);
|
||||
}
|
||||
|
||||
.unit-item#{$breakpoint}-bottom{
|
||||
@include align-self(flex-end);
|
||||
}
|
||||
.unit-item#{$breakpoint}-narrow{
|
||||
@include flex-grow(0);
|
||||
}
|
||||
|
||||
.unit-item#{$breakpoint}-standart{
|
||||
@include flex-grow(1);
|
||||
}
|
||||
|
||||
.unit-item#{$breakpoint}-wide{
|
||||
@include flex-grow(2);
|
||||
}
|
||||
|
||||
.unit#{$breakpoint},
|
||||
.unit#{$breakpoint}-vertical {
|
||||
@include flex-direction(column);
|
||||
|
||||
> [class*='unit-']:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
> .unit-left + .unit-right,
|
||||
> .unit-left + .unit-body {
|
||||
padding-left: 0;
|
||||
padding-top: $spacing-t;
|
||||
}
|
||||
|
||||
> .unit-body + .unit-right {
|
||||
padding-left: 0;
|
||||
padding-top: $spacing-b;
|
||||
}
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-horizontal {
|
||||
@include flex-direction(row);
|
||||
|
||||
> .unit-left + .unit-right,
|
||||
> .unit-left + .unit-body {
|
||||
padding-top: 0;
|
||||
padding-left: $spacing-l;
|
||||
}
|
||||
|
||||
> .unit-body + .unit-right {
|
||||
padding-top: 0;
|
||||
padding-left: $spacing-r;
|
||||
}
|
||||
}
|
||||
|
||||
.unit#{$breakpoint}-inverse {
|
||||
@include flex-direction(column-reverse);
|
||||
|
||||
&,
|
||||
&.unit#{$breakpoint}-vertical {
|
||||
@include flex-direction(column-reverse);
|
||||
|
||||
> [class*='unit-']:first-child {
|
||||
padding-top: $spacing-t;
|
||||
}
|
||||
|
||||
> [class*='unit-']:last-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.unit#{$breakpoint}-horizontal {
|
||||
@include flex-direction(row-reverse);
|
||||
|
||||
> [class*='unit-']:first-child {
|
||||
padding-top: 0;
|
||||
padding-left: $spacing-l;
|
||||
}
|
||||
|
||||
> [class*='unit-']:last-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin unit-spacing-variant($spacing-t, $spacing-r, $spacing-b, $spacing-l, $breakpoint){
|
||||
&.unit#{$breakpoint},
|
||||
&.unit#{$breakpoint}-vertical {
|
||||
> [class*='unit-']:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
> .unit-left + .unit-right,
|
||||
> .unit-left + .unit-body {
|
||||
padding-left: 0;
|
||||
padding-top: $spacing-t;
|
||||
}
|
||||
|
||||
> .unit-body + .unit-right {
|
||||
padding-left: 0;
|
||||
padding-top: $spacing-b;
|
||||
}
|
||||
}
|
||||
|
||||
&.unit#{$breakpoint}-horizontal {
|
||||
> .unit-left + .unit-right,
|
||||
> .unit-left + .unit-body {
|
||||
padding-top: 0;
|
||||
padding-left: $spacing-l;
|
||||
}
|
||||
|
||||
> .unit-body + .unit-right {
|
||||
padding-top: 0;
|
||||
padding-left: $spacing-r;
|
||||
}
|
||||
}
|
||||
|
||||
&.unit#{$breakpoint}-inverse {
|
||||
&,
|
||||
&.unit#{$breakpoint}-vertical {
|
||||
> [class*='unit-']:first-child {
|
||||
padding-top: $spacing-t;
|
||||
}
|
||||
|
||||
> [class*='unit-']:last-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.unit#{$breakpoint}-horizontal {
|
||||
> [class*='unit-']:first-child {
|
||||
padding-top: 0;
|
||||
padding-left: $spacing-l;
|
||||
}
|
||||
|
||||
> [class*='unit-']:last-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin unit-spacing($medias, $spacing-t, $spacing-r:$spacing-t, $spacing-b:$spacing-t, $spacing-l:$spacing-r){
|
||||
@each $resolution, $alias in $medias {
|
||||
@if ($alias != '' and $alias != null) {
|
||||
$breakpoint: -#{$alias};
|
||||
@media (min-width: $resolution) {
|
||||
@include unit-spacing-variant($spacing-t, $spacing-r, $spacing-b, $spacing-l, $breakpoint);
|
||||
}
|
||||
} @else {
|
||||
$breakpoint: '';
|
||||
@include unit-spacing-variant($spacing-t, $spacing-r, $spacing-b, $spacing-l, $breakpoint);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin unit-responsive($medias, $spacing-t, $spacing-r:$spacing-t, $spacing-b:$spacing-t, $spacing-l:$spacing-r) {
|
||||
.unit {
|
||||
@include display-flex();
|
||||
@include flex(0 1 100%);
|
||||
@include flex-direction(column);
|
||||
}
|
||||
|
||||
.unit-body{
|
||||
@include flex(0 1 auto);
|
||||
}
|
||||
|
||||
.unit-left,
|
||||
.unit-right{
|
||||
@include flex(0 0 auto);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@each $resolution, $alias in $medias {
|
||||
@if ($alias != '' and $alias != null) {
|
||||
$breakpoint: -#{$alias};
|
||||
@media (min-width: $resolution) {
|
||||
@include unit-variant($spacing-t, $spacing-r, $spacing-b, $spacing-l, $breakpoint);
|
||||
}
|
||||
} @else {
|
||||
$breakpoint: '';
|
||||
@include unit-variant($spacing-t, $spacing-r, $spacing-b, $spacing-l, $breakpoint);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
// Custom CSS Vendors
|
||||
|
||||
@mixin transform($trfm) {
|
||||
-webkit-transform: $trfm;
|
||||
transform: $trfm;
|
||||
}
|
||||
|
||||
@mixin animation($anim) {
|
||||
-webkit-animation: $anim;
|
||||
animation: $anim;
|
||||
}
|
||||
|
||||
@mixin keyframes($name) {
|
||||
@-webkit-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
@keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sprite-animation() {
|
||||
@include keyframes(sprite-animation) {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
// Visibility Utilities
|
||||
|
||||
@mixin make-visible( $type: block, $resolution: null){
|
||||
@if ($resolution == null) {
|
||||
$resolution: ''
|
||||
} @else {
|
||||
$resolution: str_insert($resolution, '-', str_length($resolution) + 1);
|
||||
}
|
||||
|
||||
@if ($type == flex) {
|
||||
.reveal-#{$resolution}#{$type}{
|
||||
display: -ms-flexbox !important;
|
||||
display: -webkit-flex !important;
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
.reveal-#{$resolution}#{$type}{
|
||||
display: $type !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-hidden($resolution: null){
|
||||
@if ($resolution == null) {
|
||||
$resolution: ''
|
||||
} @else {
|
||||
$resolution: str_insert($resolution, '-', 0);
|
||||
}
|
||||
|
||||
.veil#{$resolution}{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user