Lightweight CSS Framework for Building Apps and Websites
https://crispy-css.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
245 lines
3.9 KiB
245 lines
3.9 KiB
/**
|
|
* helper: visibility
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
@mixin crispy__modifiers() {
|
|
|
|
/**
|
|
* typography
|
|
*
|
|
*
|
|
*/
|
|
|
|
.text-left {
|
|
text-align: left !important;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right !important;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.text-justify {
|
|
text-align: justify !important;
|
|
}
|
|
|
|
.text-uppercase {
|
|
text-transform: uppercase !important;
|
|
}
|
|
|
|
.text-lowercase {
|
|
text-transform: lowercase !important;
|
|
}
|
|
|
|
.text-crossed {
|
|
text-decoration: line-through !important;
|
|
}
|
|
|
|
.text-underline {
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
.text-capitalized {
|
|
text-transform: capitalize !important;
|
|
}
|
|
|
|
.text-italic {
|
|
font-style: italic !important;
|
|
}
|
|
|
|
.text-weight-light {
|
|
font-weight: lighter !important;
|
|
}
|
|
|
|
.text-weight-normal {
|
|
font-weight: normal !important;
|
|
}
|
|
|
|
.text-weight-bold {
|
|
font-weight: bolder !important;
|
|
}
|
|
|
|
.text-weight-medium {
|
|
font-weight: medium !important;
|
|
}
|
|
|
|
@each $name, $font-size in $crispy__font-sizes {
|
|
.text-size-#{$name} {
|
|
font-size: $font-size !important;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* floating
|
|
*
|
|
*
|
|
*/
|
|
|
|
.float-left {
|
|
float: left;
|
|
}
|
|
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
|
|
.float-none {
|
|
float: none;
|
|
}
|
|
|
|
.centered {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.clearfix {
|
|
@include crispy__clearfix();
|
|
}
|
|
|
|
/**
|
|
* colors
|
|
*
|
|
*
|
|
*/
|
|
|
|
@each $name, $color in $crispy__colors {
|
|
.text-color-#{$name} {
|
|
color: $color !important;
|
|
}
|
|
}
|
|
|
|
@each $name, $color in $crispy__colors {
|
|
.background-color-#{$name} {
|
|
background-color: $color !important;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* position
|
|
*
|
|
*
|
|
*/
|
|
|
|
.absolute {
|
|
position: absolute !important;
|
|
}
|
|
|
|
.fixed {
|
|
position: fixed !important;
|
|
}
|
|
|
|
.relative {
|
|
position: relative !important;
|
|
}
|
|
|
|
/**
|
|
* visibility
|
|
*
|
|
*
|
|
*/
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.visible {
|
|
display: block !important;
|
|
|
|
&--inline {
|
|
display: inline !important;
|
|
}
|
|
|
|
&--inline-block {
|
|
display: inline-block !important;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* borders
|
|
*
|
|
*
|
|
*/
|
|
|
|
.bordered {
|
|
border: $crispy__border !important;
|
|
}
|
|
|
|
.rounded {
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
.borderless {
|
|
border: 0 !important;
|
|
}
|
|
|
|
.radiusless
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/**
|
|
* width
|
|
*
|
|
*
|
|
*/
|
|
|
|
@each $name, $width in $crispy__width {
|
|
.width-#{$name} {
|
|
width: $width !important;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* margin & padding
|
|
*
|
|
*
|
|
*/
|
|
|
|
.marginless {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.paddingless {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
@for $i from 0 through $crispy__spacing__steps {
|
|
.margin-top-#{($i + 1)} {
|
|
margin-top: ($crispy__spacing * $i) !important;
|
|
}
|
|
|
|
.margin-left-#{($i + 1)} {
|
|
margin-left: ($crispy__spacing * $i) !important;
|
|
}
|
|
|
|
.margin-bottom-#{($i + 1)} {
|
|
margin-bottom: ($crispy__spacing * $i) !important;
|
|
}
|
|
|
|
.margin-right-#{($i + 1)} {
|
|
margin-right: ($crispy__spacing * ($i)) !important;
|
|
}
|
|
|
|
.padding-top-#{($i + 1)} {
|
|
padding-top: ($crispy__spacing * $i) !important;
|
|
}
|
|
|
|
.padding-left-#{($i + 1)} {
|
|
padding-left: ($crispy__spacing * $i) !important;
|
|
}
|
|
|
|
.padding-bottom-#{($i + 1)} {
|
|
padding-bottom: ($crispy__spacing * $i) !important;
|
|
}
|
|
|
|
.padding-right-#{($i + 1)} {
|
|
padding-right: ($crispy__spacing * $i) !important;
|
|
}
|
|
}
|
|
}
|