KNACSS/sass/_library/_utilities.scss

360 lines
3.9 KiB
SCSS
Raw Normal View History

2015-12-12 11:20:29 +01:00
/* ---------------------------------- */
2016-05-20 08:58:56 +02:00
/* ==Helpers */
2015-12-12 11:20:29 +01:00
/* ---------------------------------- */
2017-11-13 15:50:06 +01:00
/* Typo Helpers */
/* ------------- */
.u-bold {
font-weight: $weight-bold;
}
.u-italic {
font-style: italic;
}
.u-normal {
font-weight: normal;
font-style: normal;
}
.u-uppercase {
text-transform: uppercase;
}
.u-lowercase {
text-transform: lowercase;
}
.u-smaller {
font-size: 0.6em;
}
.u-small {
font-size: 0.8em;
}
.u-big {
font-size: 1.2em;
}
.u-bigger {
font-size: 1.5em;
}
.u-biggest {
font-size: 2em;
}
2017-12-22 09:53:01 +01:00
.u-txt-wrap {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.u-txt-ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
}
@if variable-exists(hyphens) and $hyphens==true {
@media (max-width: ($small - 1)) {
div,
textarea,
table,
td,
th,
code,
pre,
samp {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
}
}
2016-05-20 08:58:56 +02:00
/* State Helpers */
/* ------------- */
2015-12-12 11:20:29 +01:00
/* invisible for all */
.is-hidden,
2017-08-01 10:53:59 +02:00
.js-hidden,
2015-12-12 11:20:29 +01:00
[hidden] {
display: none;
}
/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
.visually-hidden {
position: absolute !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
}
.is-disabled,
2017-08-01 10:53:59 +02:00
.js-disabled,
2017-08-01 09:20:53 +02:00
[disabled],
.is-disabled ~ label,
[disabled] ~ label {
2015-12-12 11:20:29 +01:00
opacity: 0.5;
2017-08-01 09:20:53 +02:00
cursor: not-allowed !important;
2015-12-12 11:20:29 +01:00
filter: grayscale(1);
}
ul {
&.is-unstyled,
&.unstyled {
list-style: none;
padding-left: 0;
}
2015-12-12 11:20:29 +01:00
}
2017-08-03 09:20:14 +02:00
.color--inverse {
2017-10-13 10:59:40 +02:00
color: $white;
2017-08-03 09:20:14 +02:00
}
2016-05-20 08:58:56 +02:00
/* Width Helpers */
/* ------------- */
2014-10-20 17:59:59 +02:00
/* blocks widths (percentage and pixels) */
$i: 100;
2014-10-20 17:59:59 +02:00
@while $i > 0 {
.w#{$i} {
width: $i * 1%;
}
$i: $i - 5;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w66 {
width: calc(100% / 3 * 2);
2014-10-20 17:59:59 +02:00
}
.w33 {
width: calc(100% / 3);
2014-10-20 17:59:59 +02:00
}
$i: 1000;
2014-10-20 17:59:59 +02:00
.wauto {
width: auto;
2014-10-20 17:59:59 +02:00
}
.w960p {
width: 960px;
2014-10-20 17:59:59 +02:00
}
.mw960p {
max-width: 960px;
2014-10-20 17:59:59 +02:00
}
.w1140p {
width: 1140px;
2014-10-20 17:59:59 +02:00
}
.mw1140p {
max-width: 1140px;
2014-10-20 17:59:59 +02:00
}
@while $i > 0 {
.w#{$i}p {
width: $i * 1px;
}
$i: $i - 50;
2014-10-20 17:59:59 +02:00
}
2016-05-20 08:58:56 +02:00
/* Spacing Helpers */
/* --------------- */
2017-07-31 11:45:22 +02:00
.man,
.ma0 {
2015-07-01 13:47:48 +02:00
margin: 0;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pan,
.pa0 {
2015-07-01 13:47:48 +02:00
padding: 0;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mas {
margin: $spacer-small;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mam {
margin: $spacer-medium;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mal {
margin: $spacer-large;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pas {
padding: $spacer-small;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pam {
padding: $spacer-medium;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pal {
padding: $spacer-large;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mtn,
.mt0 {
2015-07-01 13:47:48 +02:00
margin-top: 0;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mts {
margin-top: $spacer-small;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mtm {
margin-top: $spacer-medium;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mtl {
margin-top: $spacer-large;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mrn,
.mr0 {
2015-07-01 13:47:48 +02:00
margin-right: 0;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mrs {
margin-right: $spacer-small;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mrm {
margin-right: $spacer-medium;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mrl {
margin-right: $spacer-large;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mbn,
.mb0 {
2015-07-01 13:47:48 +02:00
margin-bottom: 0;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mbs {
margin-bottom: $spacer-small;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mbm {
margin-bottom: $spacer-medium;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mbl {
margin-bottom: $spacer-large;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mln,
.ml0 {
2015-07-01 13:47:48 +02:00
margin-left: 0;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mls {
margin-left: $spacer-small;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mlm {
margin-left: $spacer-medium;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mll {
margin-left: $spacer-large;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mauto {
2015-12-12 11:20:29 +01:00
margin: auto;
}
2017-07-31 11:45:22 +02:00
.mtauto {
2015-12-12 11:20:29 +01:00
margin-top: auto;
}
2017-07-31 11:45:22 +02:00
.mrauto {
2015-12-12 11:20:29 +01:00
margin-right: auto;
}
2017-07-31 11:45:22 +02:00
.mbauto {
2015-12-12 11:20:29 +01:00
margin-bottom: auto;
}
2017-07-31 11:45:22 +02:00
.mlauto {
2015-12-12 11:20:29 +01:00
margin-left: auto;
}
2017-07-31 11:45:22 +02:00
.ptn,
.pt0 {
2015-07-01 13:47:48 +02:00
padding-top: 0;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pts {
padding-top: $spacer-small;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.ptm {
padding-top: $spacer-medium;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.ptl {
padding-top: $spacer-large;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.prn,
.pr0 {
2015-07-01 13:47:48 +02:00
padding-right: 0;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.prs {
padding-right: $spacer-small;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.prm {
padding-right: $spacer-medium;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.prl {
padding-right: $spacer-large;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pbn,
.pb0 {
2015-07-01 13:47:48 +02:00
padding-bottom: 0;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pbs {
padding-bottom: $spacer-small;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pbm {
padding-bottom: $spacer-medium;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pbl {
padding-bottom: $spacer-large;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pln,
.pl0 {
2015-07-01 13:47:48 +02:00
padding-left: 0;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pls {
padding-left: $spacer-small;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.plm {
padding-left: $spacer-medium;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pll {
padding-left: $spacer-large;
}