mirror of
https://github.com/WordPress/five-for-the-future.git
synced 2025-04-23 03:23:42 +03:00
136 lines
2 KiB
SCSS
136 lines
2 KiB
SCSS
// Kube. CSS & JS Framework
|
|
// Copyright (c) 2009-2017, Imperavi LLC.
|
|
// License: MIT
|
|
|
|
[class*="col-"] {
|
|
margin: inherit;
|
|
}
|
|
|
|
// Grid Row
|
|
.row {
|
|
@include grid-row;
|
|
|
|
// Gutters
|
|
&.gutters > .row {
|
|
margin-left: -$grid-gutter;
|
|
|
|
@include breakpoint(sm) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
& > [class*='col-'] {
|
|
margin-left: $grid-gutter;
|
|
|
|
@include breakpoint(sm) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
&.around {
|
|
@include flex-items-space-around;
|
|
}
|
|
&.between {
|
|
@include flex-items-space-between;
|
|
}
|
|
&.auto {
|
|
& .col {
|
|
@include flex-item-grow(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Grid Columns
|
|
@include generate-grid-columns;
|
|
|
|
// Offset
|
|
[class^='offset-'],
|
|
[class*=' offset-'] {
|
|
@include breakpoint(sm) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
// Ordering
|
|
.first { order: -1; }
|
|
.last { order: 1; }
|
|
|
|
@include breakpoint(sm) {
|
|
.row {
|
|
& [class*='col-'] {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
}
|
|
&.gutters {
|
|
& [class*='col-'] {
|
|
margin-bottom: $text-margin-bottom;
|
|
}
|
|
}
|
|
}
|
|
.first-sm { order: -1; }
|
|
.last-sm { order: 1; }
|
|
}
|
|
|
|
// Push
|
|
.gutters .column.push-left,
|
|
.push-left { margin-right: auto; }
|
|
|
|
.gutters .column.push-right,
|
|
.push-right { margin-left: auto; }
|
|
|
|
.gutters .column.push-center,
|
|
.push-center { margin-left: auto; margin-right: auto; }
|
|
|
|
.gutters .column.push-middle,
|
|
.push-middle { margin-top: auto; margin-bottom: auto; }
|
|
|
|
.push-bottom { margin-top: auto; }
|
|
|
|
@include breakpoint(sm) {
|
|
|
|
.gutters .column.push-left-sm,
|
|
.push-left-sm { margin-left: 0; }
|
|
|
|
.gutters .column.push-center-sm,
|
|
.push-center-sm { margin-left: auto; margin-right: auto;}
|
|
|
|
.push-top-sm { margin-top: 0; }
|
|
|
|
}
|
|
|
|
// Flex Alignment
|
|
.align-middle {
|
|
@include flex-items-middle;
|
|
}
|
|
.align-right {
|
|
@include flex-items-right;
|
|
}
|
|
.align-center {
|
|
@include flex-items-center;
|
|
}
|
|
|
|
@include breakpoint(sm) {
|
|
.align-left-sm { @include flex-items-left; }
|
|
}
|
|
|
|
// Float
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
.float-left {
|
|
float: left;
|
|
}
|
|
|
|
@include breakpoint(sm) {
|
|
.float-right { float: none; }
|
|
.float-left { float: none; }
|
|
}
|
|
|
|
// Fixed
|
|
.fixed {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: $z-over-content;
|
|
width: 100%;
|
|
}
|