KNACSS/sass/_override-helpers.scss

352 lines
4.8 KiB
SCSS
Raw Normal View History

2015-12-12 11:20:29 +01:00
/* ---------------------------------- */
/* ==state helpers */
/* ---------------------------------- */
/* 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,
ul.unstyled {
list-style: none;
padding-left: 0;
}
2014-10-20 17:59:59 +02:00
/* ---------------------------------- */
/* ==visual helpers */
/* .. use them with parcimony ! */
/* ---------------------------------- */
/* blocks widths (percentage and pixels) */
.#{$kna-namespace}w10 {
2015-07-01 13:47:48 +02:00
width: 10%;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w20 {
2015-07-01 13:47:48 +02:00
width: 20%;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w25 {
2015-07-01 13:47:48 +02:00
width: 25%;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w30 {
2015-07-01 13:47:48 +02:00
width: 30%;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w33 {
2015-07-01 13:47:48 +02:00
width: 33.3333%;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w40 {
2015-07-01 13:47:48 +02:00
width: 40%;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w50 {
2015-07-01 13:47:48 +02:00
width: 50%;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w60 {
2015-07-01 13:47:48 +02:00
width: 60%;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w66 {
2015-07-01 13:47:48 +02:00
width: 66.6666%;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w70 {
2015-07-01 13:47:48 +02:00
width: 70%;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w75 {
2015-07-01 13:47:48 +02:00
width: 75%;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w80 {
2015-07-01 13:47:48 +02:00
width: 80%;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w90 {
2015-07-01 13:47:48 +02:00
width: 90%;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w100 {
2015-07-01 13:47:48 +02:00
width: 100%;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w50p {
2015-07-01 13:47:48 +02:00
width: 50px;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w100p {
2015-07-01 13:47:48 +02:00
width: 100px;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w150p {
2015-07-01 13:47:48 +02:00
width: 150px;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w200p {
2015-07-01 13:47:48 +02:00
width: 200px;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w300p {
2015-07-01 13:47:48 +02:00
width: 300px;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w400p {
2015-07-01 13:47:48 +02:00
width: 400px;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w500p {
2015-07-01 13:47:48 +02:00
width: 500px;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w600p {
2015-07-01 13:47:48 +02:00
width: 600px;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w700p {
2015-07-01 13:47:48 +02:00
width: 700px;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w800p {
2015-07-01 13:47:48 +02:00
width: 800px;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w960p {
2015-07-01 13:47:48 +02:00
width: 960px;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mw960p {
2015-07-01 13:47:48 +02:00
max-width: 960px;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}w1140p {
2015-07-01 13:47:48 +02:00
width: 1140px;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mw1140p {
2015-07-01 13:47:48 +02:00
max-width: 1140px;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}wauto {
2015-07-01 13:47:48 +02:00
width: auto;
2014-10-20 17:59:59 +02:00
}
/* spacing helpers
p,m = padding,margin
a,t,r,b,l = all,top,right,bottom,left
s,m,l,n = small, medium, large, none
*/
.#{$kna-namespace}man,
.#{$kna-namespace}ma0 {
2015-07-01 13:47:48 +02:00
margin: 0;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}pan,
.#{$kna-namespace}pa0 {
2015-07-01 13:47:48 +02:00
padding: 0;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mas {
2015-07-01 13:47:48 +02:00
margin: $small-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mam {
2015-07-01 13:47:48 +02:00
margin: $medium-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mal {
2015-07-01 13:47:48 +02:00
margin: $large-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}pas {
2015-07-01 13:47:48 +02:00
padding: $small-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}pam {
2015-07-01 13:47:48 +02:00
padding: $medium-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}pal {
2015-07-01 13:47:48 +02:00
padding: $large-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mtn,
.#{$kna-namespace}mt0 {
2015-07-01 13:47:48 +02:00
margin-top: 0;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mts {
2015-07-01 13:47:48 +02:00
margin-top: $small-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mtm {
2015-07-01 13:47:48 +02:00
margin-top: $medium-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mtl {
2015-07-01 13:47:48 +02:00
margin-top: $large-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mrn,
.#{$kna-namespace}mr0 {
2015-07-01 13:47:48 +02:00
margin-right: 0;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mrs {
2015-07-01 13:47:48 +02:00
margin-right: $small-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mrm {
2015-07-01 13:47:48 +02:00
margin-right: $medium-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mrl {
2015-07-01 13:47:48 +02:00
margin-right: $large-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mbn,
.#{$kna-namespace}mb0 {
2015-07-01 13:47:48 +02:00
margin-bottom: 0;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mbs {
2015-07-01 13:47:48 +02:00
margin-bottom: $small-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mbm {
2015-07-01 13:47:48 +02:00
margin-bottom: $medium-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mbl {
2015-07-01 13:47:48 +02:00
margin-bottom: $large-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mln,
.#{$kna-namespace}ml0 {
2015-07-01 13:47:48 +02:00
margin-left: 0;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mls {
2015-07-01 13:47:48 +02:00
margin-left: $small-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mlm {
2015-07-01 13:47:48 +02:00
margin-left: $medium-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}mll {
2015-07-01 13:47:48 +02:00
margin-left: $large-value;
2014-10-20 17:59:59 +02:00
}
2015-12-12 11:20:29 +01:00
.#{$kna-namespace}mauto {
margin: auto;
}
.#{$kna-namespace}mtauto {
margin-top: auto;
}
.#{$kna-namespace}mrauto {
margin-right: auto;
}
.#{$kna-namespace}mbauto {
margin-bottom: auto;
}
.#{$kna-namespace}mlauto {
margin-left: auto;
}
.#{$kna-namespace}ptn,
.#{$kna-namespace}pt0 {
2015-07-01 13:47:48 +02:00
padding-top: 0;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}pts {
2015-07-01 13:47:48 +02:00
padding-top: $small-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}ptm {
2015-07-01 13:47:48 +02:00
padding-top: $medium-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}ptl {
2015-07-01 13:47:48 +02:00
padding-top: $large-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}prn,
.#{$kna-namespace}pr0 {
2015-07-01 13:47:48 +02:00
padding-right: 0;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}prs {
2015-07-01 13:47:48 +02:00
padding-right: $small-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}prm {
2015-07-01 13:47:48 +02:00
padding-right: $medium-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}prl {
2015-07-01 13:47:48 +02:00
padding-right: $large-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}pbn,
.#{$kna-namespace}pb0 {
2015-07-01 13:47:48 +02:00
padding-bottom: 0;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}pbs {
2015-07-01 13:47:48 +02:00
padding-bottom: $small-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}pbm {
2015-07-01 13:47:48 +02:00
padding-bottom: $medium-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}pbl {
2015-07-01 13:47:48 +02:00
padding-bottom: $large-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}pln,
.#{$kna-namespace}pl0 {
2015-07-01 13:47:48 +02:00
padding-left: 0;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}pls {
2015-07-01 13:47:48 +02:00
padding-left: $small-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}plm {
2015-07-01 13:47:48 +02:00
padding-left: $medium-value;
2014-10-20 17:59:59 +02:00
}
.#{$kna-namespace}pll {
2015-07-01 13:47:48 +02:00
padding-left: $large-value;
}