KNACSS/sass/_library/_utilities.scss

360 lines
3.4 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
/* ---------------------------------- */
2016-05-20 08:58:56 +02:00
/* State Helpers */
/* ------------- */
2015-12-12 11:20:29 +01:00
/* invisible for all */
.is-hidden,
[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,
[disabled] {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
filter: grayscale(1);
}
ul {
&.is-unstyled,
&.unstyled {
list-style: none;
padding-left: 0;
}
2015-12-12 11:20:29 +01:00
}
2016-05-20 08:58:56 +02:00
/* Width Helpers */
/* ------------- */
2014-10-20 17:59:59 +02:00
/* blocks widths (percentage and pixels) */
2017-07-31 11:45:22 +02:00
.w10 {
2015-07-01 13:47:48 +02:00
width: 10%;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w20 {
2015-07-01 13:47:48 +02:00
width: 20%;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w25 {
2015-07-01 13:47:48 +02:00
width: 25%;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w30 {
2015-07-01 13:47:48 +02:00
width: 30%;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w33 {
2015-07-01 13:47:48 +02:00
width: 33.3333%;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w40 {
2015-07-01 13:47:48 +02:00
width: 40%;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w50 {
2015-07-01 13:47:48 +02:00
width: 50%;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w60 {
2015-07-01 13:47:48 +02:00
width: 60%;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w66 {
2015-07-01 13:47:48 +02:00
width: 66.6666%;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w70 {
2015-07-01 13:47:48 +02:00
width: 70%;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w75 {
2015-07-01 13:47:48 +02:00
width: 75%;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w80 {
2015-07-01 13:47:48 +02:00
width: 80%;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w90 {
2015-07-01 13:47:48 +02:00
width: 90%;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w100 {
2015-07-01 13:47:48 +02:00
width: 100%;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w50p {
2015-07-01 13:47:48 +02:00
width: 50px;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w100p {
2015-07-01 13:47:48 +02:00
width: 100px;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w150p {
2015-07-01 13:47:48 +02:00
width: 150px;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w200p {
2015-07-01 13:47:48 +02:00
width: 200px;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.w300p {
2015-07-01 13:47:48 +02:00
width: 300px;
2014-10-20 17:59:59 +02:00
}
2016-09-21 10:05:29 +02:00
@media (min-width: 401px) {
2017-07-31 11:45:22 +02:00
.w400p {
2016-05-24 16:45:47 +02:00
width: 400px;
}
2014-10-20 17:59:59 +02:00
2017-07-31 11:45:22 +02:00
.w500p {
2016-05-24 16:45:47 +02:00
width: 500px;
}
2014-10-20 17:59:59 +02:00
2017-07-31 11:45:22 +02:00
.w600p {
2016-05-24 16:45:47 +02:00
width: 600px;
}
2014-10-20 17:59:59 +02:00
}
2016-09-21 10:05:29 +02:00
@media (min-width: 701px) {
2014-10-20 17:59:59 +02:00
2017-07-31 11:45:22 +02:00
.w700p {
2016-05-24 16:45:47 +02:00
width: 700px;
}
2014-10-20 17:59:59 +02:00
2017-07-31 11:45:22 +02:00
.w800p {
2016-05-24 16:45:47 +02:00
width: 800px;
}
2014-10-20 17:59:59 +02:00
}
2016-09-21 10:05:29 +02:00
@media (min-width: 961px) {
2017-07-31 11:45:22 +02:00
.w960p {
2016-05-24 16:45:47 +02:00
width: 960px;
}
2014-10-20 17:59:59 +02:00
2017-07-31 11:45:22 +02:00
.mw960p {
2016-05-24 16:45:47 +02:00
max-width: 960px;
}
2017-07-31 11:45:22 +02:00
.w1140p {
2016-05-24 16:45:47 +02:00
width: 1140px;
}
2014-10-20 17:59:59 +02:00
2017-07-31 11:45:22 +02:00
.mw1140p {
2016-05-24 16:45:47 +02:00
max-width: 1140px;
}
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.wauto {
2015-07-01 13:47:48 +02:00
width: auto;
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 {
2015-07-01 13:47:48 +02:00
margin: $small-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mam {
2015-07-01 13:47:48 +02:00
margin: $medium-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mal {
2015-07-01 13:47:48 +02:00
margin: $large-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pas {
2015-07-01 13:47:48 +02:00
padding: $small-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pam {
2015-07-01 13:47:48 +02:00
padding: $medium-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pal {
2015-07-01 13:47:48 +02:00
padding: $large-value;
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 {
2015-07-01 13:47:48 +02:00
margin-top: $small-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mtm {
2015-07-01 13:47:48 +02:00
margin-top: $medium-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mtl {
2015-07-01 13:47:48 +02:00
margin-top: $large-value;
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 {
2015-07-01 13:47:48 +02:00
margin-right: $small-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mrm {
2015-07-01 13:47:48 +02:00
margin-right: $medium-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mrl {
2015-07-01 13:47:48 +02:00
margin-right: $large-value;
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 {
2015-07-01 13:47:48 +02:00
margin-bottom: $small-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mbm {
2015-07-01 13:47:48 +02:00
margin-bottom: $medium-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mbl {
2015-07-01 13:47:48 +02:00
margin-bottom: $large-value;
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 {
2015-07-01 13:47:48 +02:00
margin-left: $small-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mlm {
2015-07-01 13:47:48 +02:00
margin-left: $medium-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.mll {
2015-07-01 13:47:48 +02:00
margin-left: $large-value;
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 {
2015-07-01 13:47:48 +02:00
padding-top: $small-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.ptm {
2015-07-01 13:47:48 +02:00
padding-top: $medium-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.ptl {
2015-07-01 13:47:48 +02:00
padding-top: $large-value;
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 {
2015-07-01 13:47:48 +02:00
padding-right: $small-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.prm {
2015-07-01 13:47:48 +02:00
padding-right: $medium-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.prl {
2015-07-01 13:47:48 +02:00
padding-right: $large-value;
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 {
2015-07-01 13:47:48 +02:00
padding-bottom: $small-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pbm {
2015-07-01 13:47:48 +02:00
padding-bottom: $medium-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pbl {
2015-07-01 13:47:48 +02:00
padding-bottom: $large-value;
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 {
2015-07-01 13:47:48 +02:00
padding-left: $small-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.plm {
2015-07-01 13:47:48 +02:00
padding-left: $medium-value;
2014-10-20 17:59:59 +02:00
}
2017-07-31 11:45:22 +02:00
.pll {
2015-07-01 13:47:48 +02:00
padding-left: $large-value;
}