Alex Aragón
7 years ago
parent
bf907adde9
commit
6574a5b63d
@ -0,0 +1,194 @@ |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Fixed Width |
||||
// --------------------------------------------------------- |
||||
|
||||
.w-1\/4r, .sz-1\/4r { width: 0.25rem; } |
||||
.w-1\/2r, .sz-1\/2r { width: 0.5rem; } |
||||
.w-3\/4r, .sz-3\/4r { width: 0.75rem; } |
||||
.w-1r, .sz-1r { width: 1rem; } |
||||
.w-3\/2r, .sz-3\/2r { width: 1.5rem; } |
||||
.w-2r, .sz-2r { width: 2rem; } |
||||
.w-5\/2r, .sz-5\/2r { width: 2.5rem; } |
||||
.w-3r, .sz-3r { width: 3rem; } |
||||
.w-7\/2r, .sz-7\/2r { width: 3.5rem; } |
||||
.w-4r, .sz-4r { width: 4rem; } |
||||
.w-9\/2r, .sz-9\/2r { width: 4.5rem; } |
||||
.w-5r, .sz-5r { width: 5rem; } |
||||
.w-11\/2r, .sz-11\/2r { width: 5.5rem; } |
||||
.w-6r, .sz-6r { width: 6rem; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Relative Width |
||||
// --------------------------------------------------------- |
||||
|
||||
.w-0 { width: 0px; } |
||||
.w-10p { width: 10%; } |
||||
.w-20p { width: 20%; } |
||||
.w-30p { width: 30%; } |
||||
.w-40p { width: 40%; } |
||||
.w-50p { width: 50%; } |
||||
.w-60p { width: 60%; } |
||||
.w-70p { width: 70%; } |
||||
.w-80p { width: 80%; } |
||||
.w-90p { width: 90%; } |
||||
.w-100p { width: 100%; } |
||||
.w-1px { width: 1px; } |
||||
.w-a { width: auto; } |
||||
|
||||
|
||||
// --------------------------------------------------------- |
||||
// @Fixed Height |
||||
// --------------------------------------------------------- |
||||
|
||||
.h-1\/4r, .sz-1\/4r { height: 0.25rem; } |
||||
.h-1\/2r, .sz-1\/2r { height: 0.5rem; } |
||||
.h-3\/4r, .sz-3\/4r { height: 0.75rem; } |
||||
.h-1r, .sz-1r { height: 1rem; } |
||||
.h-3\/2r, .sz-3\/2r { height: 1.5rem; } |
||||
.h-2r, .sz-2r { height: 2rem; } |
||||
.h-5\/2r, .sz-5\/2r { height: 2.5rem; } |
||||
.h-3r, .sz-3r { height: 3rem; } |
||||
.h-7\/2r, .sz-7\/2r { height: 3.5rem; } |
||||
.h-4r, .sz-4r { height: 4rem; } |
||||
.h-9\/2r, .sz-9\/2r { height: 4.5rem; } |
||||
.h-5r, .sz-5r { height: 5rem; } |
||||
.h-11\/2r, .sz-11\/2r { height: 5.5rem; } |
||||
.h-6r, .sz-6r { height: 6rem; } |
||||
|
||||
|
||||
.h-0 { height: 0; } |
||||
.h-auto { height: auto; } |
||||
.h-100p { height: 100%; } |
||||
.h-100vh { height: 100vh; } |
||||
|
||||
|
||||
// --------------------------------------------------------- |
||||
// @Max Size |
||||
// --------------------------------------------------------- |
||||
|
||||
.mw-100p { max-width: 100%; } |
||||
.mh-100p { max-height: 100%; } |
||||
|
||||
|
||||
// --------------------------------------------------------- |
||||
// @Quick Border Helpers |
||||
// --------------------------------------------------------- |
||||
|
||||
.bd { border: #{$border-width} solid #{$border-color} !important; } |
||||
.bdT { border-top: #{$border-width} solid #{$border-color} !important; } |
||||
.bdR { border-right: #{$border-width} solid #{$border-color} !important; } |
||||
.bdB { border-bottom: #{$border-width} solid #{$border-color} !important; } |
||||
.bdL { border-left: #{$border-width} solid #{$border-color} !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Border Width |
||||
// --------------------------------------------------------- |
||||
|
||||
@for $i from 0 through 5 { |
||||
.bdw-#{$i} { border-width: #{$i}px !important; } |
||||
.bdwT-#{$i} { border-top-width: #{$i}px !important; } |
||||
.bdwR-#{$i} { border-right-width: #{$i}px !important; } |
||||
.bdwB-#{$i} { border-bottom-width: #{$i}px !important; } |
||||
.bdwL-#{$i} { border-left-width: #{$i}px !important; } |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Border Radius |
||||
// --------------------------------------------------------- |
||||
|
||||
@for $i from 0 to 5 { |
||||
.bdrs-#{$i} { border-radius: #{$i}px !important; } |
||||
|
||||
.bdrsT-#{$i} { |
||||
border-top-left-radius: #{$i}px !important; |
||||
border-top-right-radius: #{$i}px !important; |
||||
} |
||||
|
||||
.bdrsR-#{$i} { |
||||
border-top-right-radius: #{$i}px !important; |
||||
border-bottom-right-radius: #{$i}px !important; |
||||
} |
||||
|
||||
.bdrsB-#{$i} { |
||||
border-bottom-left-radius: #{$i}px !important; |
||||
border-bottom-right-radius: #{$i}px !important; |
||||
} |
||||
|
||||
.bdrsL-#{$i} { |
||||
border-top-left-radius: #{$i}px !important; |
||||
border-bottom-left-radius: #{$i}px !important; |
||||
} |
||||
} |
||||
|
||||
.bdrs-50p { border-radius: 50% !important; } |
||||
.bdrs-10em { border-radius: 10em !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Border Style |
||||
// --------------------------------------------------------- |
||||
|
||||
.bds-n { border-style: none !important; } |
||||
.bds-s { border-style: solid !important; } |
||||
.bds-dt { border-style: dotted !important; } |
||||
.bds-ds { border-style: dashed !important; } |
||||
.bds-db { border-style: double !important; } |
||||
.bds-g { border-style: groove !important; } |
||||
.bds-r { border-style: ridge !important; } |
||||
.bds-i { border-style: inset !important; } |
||||
.bds-o { border-style: outset !important; } |
||||
|
||||
|
||||
.peers { |
||||
box-sizing: border-box; |
||||
display: flex !important; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
flex-flow: row wrap; |
||||
height: auto; |
||||
max-width: 100%; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
.peer { |
||||
display: block; |
||||
height: auto; |
||||
flex: 0 0 auto; |
||||
} |
||||
|
||||
.peer-greed { |
||||
flex: 1 1 auto; |
||||
// overflow: hidden; |
||||
} |
||||
|
||||
.peers-greed > .peer, |
||||
.peers-greed > .peers { |
||||
flex: 1 1 auto; |
||||
} |
||||
|
||||
.peer > img { |
||||
max-width: none; |
||||
} |
||||
|
||||
.peer-greed > img { |
||||
max-width: 100%; |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Align Items |
||||
// --------------------------------------------------------- |
||||
|
||||
.ai-fs { align-items: flex-start; } |
||||
.ai-fe { align-items: flex-end; } |
||||
.ai-c { align-items: center; } |
||||
.ai-b { align-items: baseline; } |
||||
.ai-s { align-items: stretch; } |
||||
|
||||
|
||||
// --------------------------------------------------------- |
||||
// @Pseudo Elements |
||||
// --------------------------------------------------------- |
||||
|
||||
.no-after::after { display: none !important; } |
||||
.no-before::before { display: none !important; } |
||||
@ -1 +1,3 @@ |
||||
@import "mediaqueriesranges"; |
||||
@import "mediaqueriesranges"; |
||||
@import "border"; |
||||
@import "typography"; |
||||
@ -0,0 +1,95 @@ |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Text Align |
||||
// --------------------------------------------------------- |
||||
|
||||
.ta-c { text-align: center !important; } |
||||
.ta-l { text-align: left !important; } |
||||
.ta-r { text-align: right !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Text Transform |
||||
// --------------------------------------------------------- |
||||
|
||||
.tt-n { text-transform: none !important; } |
||||
.tt-u { text-transform: uppercase !important; } |
||||
.tt-l { text-transform: lowercase !important; } |
||||
.tt-c { text-transform: capitalize !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Font Style |
||||
// --------------------------------------------------------- |
||||
|
||||
.fs-i { font-style: italic !important; } |
||||
.fs-o { font-style: oblique !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Text Decoration |
||||
// --------------------------------------------------------- |
||||
|
||||
.td-n { text-decoration: none !important; } |
||||
.td-o { text-decoration: overline !important; } |
||||
.td-lt { text-decoration: line-through !important; } |
||||
.td-u { text-decoration: underline !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @White Space |
||||
// --------------------------------------------------------- |
||||
|
||||
.whs-nw { white-space: nowrap !important; } |
||||
.whs-p { white-space: pre !important; } |
||||
.whs-n { white-space: normal !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Word Break |
||||
// --------------------------------------------------------- |
||||
|
||||
.wob-n { word-break: normal !important; } |
||||
.wob-ba { word-break: break-all !important; } |
||||
.wob-k { word-break: keep-all !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Word Wrap |
||||
// --------------------------------------------------------- |
||||
|
||||
.wow-bw { word-wrap: break-word !important; } |
||||
.wow-n { word-wrap: normal !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Text Overflow |
||||
// --------------------------------------------------------- |
||||
|
||||
.tov-e { text-overflow: ellipsis !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Font Size |
||||
// --------------------------------------------------------- |
||||
|
||||
.fsz-xs { font-size: 0.75rem !important; } |
||||
.fsz-sm { font-size: 0.87rem !important; } |
||||
.fsz-def { font-size: 1rem !important; } |
||||
.fsz-md { font-size: 1.15rem !important; } |
||||
.fsz-lg { font-size: 1.4rem !important; } |
||||
.fsz-xl { font-size: 1.7rem !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Font Weight |
||||
// --------------------------------------------------------- |
||||
|
||||
.fw-100 { font-weight: 100 !important; } |
||||
.fw-200 { font-weight: 200 !important; } |
||||
.fw-300 { font-weight: 300 !important; } |
||||
.fw-400 { font-weight: 400 !important; } |
||||
.fw-500 { font-weight: 500 !important; } |
||||
.fw-600 { font-weight: 600 !important; } |
||||
.fw-700 { font-weight: 700 !important; } |
||||
.fw-800 { font-weight: 800 !important; } |
||||
.fw-900 { font-weight: 900 !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Line Height |
||||
// --------------------------------------------------------- |
||||
|
||||
.lh-0 { line-height: 0 !important; } |
||||
.lh-1 { line-height: 1 !important; } |
||||
.lh-3\/2 { line-height: 1.5 !important; } |
||||
Loading…
Reference in new issue