132 lines
3.0 KiB
SCSS
132 lines
3.0 KiB
SCSS
|
|
// Converted Variables
|
|
|
|
|
|
// Custom Media Query Variables
|
|
|
|
|
|
/*
|
|
|
|
HEIGHTS
|
|
Docs: http://tachyons.io/docs/layout/heights/
|
|
|
|
Base:
|
|
h = height
|
|
min-h = min-height
|
|
min-vh = min-height vertical screen height
|
|
vh = vertical screen height
|
|
|
|
Modifiers
|
|
1 = 1st step in height scale
|
|
2 = 2nd step in height scale
|
|
3 = 3rd step in height scale
|
|
4 = 4th step in height scale
|
|
5 = 5th step in height scale
|
|
|
|
-25 = literal value 25%
|
|
-50 = literal value 50%
|
|
-75 = literal value 75%
|
|
-100 = literal value 100%
|
|
|
|
-auto = string value of auto
|
|
-inherit = string value of inherit
|
|
|
|
Media Query Extensions:
|
|
-ns = not-small
|
|
-m = medium
|
|
-l = large
|
|
|
|
*/
|
|
|
|
/* Height Scale */
|
|
|
|
.h1 { height: $height-1; }
|
|
.h2 { height: $height-2; }
|
|
.h3 { height: $height-3; }
|
|
.h4 { height: $height-4; }
|
|
.h5 { height: $height-5; }
|
|
|
|
/* Height Percentages - Based off of height of parent */
|
|
|
|
.h-25 { height: 25%; }
|
|
.h-50 { height: 50%; }
|
|
.h-75 { height: 75%; }
|
|
.h-100 { height: 100%; }
|
|
|
|
.min-h-100 { min-height: 100%; }
|
|
|
|
/* Screen Height Percentage */
|
|
|
|
.vh-25 { height: 25vh; }
|
|
.vh-50 { height: 50vh; }
|
|
.vh-75 { height: 75vh; }
|
|
.vh-100 { height: 100vh; }
|
|
|
|
.min-vh-100 { min-height: 100vh; }
|
|
|
|
|
|
/* String Properties */
|
|
|
|
.h-auto { height: auto; }
|
|
.h-inherit { height: inherit; }
|
|
|
|
@media #{$breakpoint-not-small} {
|
|
.h1-ns { height: $height-1; }
|
|
.h2-ns { height: $height-2; }
|
|
.h3-ns { height: $height-3; }
|
|
.h4-ns { height: $height-4; }
|
|
.h5-ns { height: $height-5; }
|
|
.h-25-ns { height: 25%; }
|
|
.h-50-ns { height: 50%; }
|
|
.h-75-ns { height: 75%; }
|
|
.h-100-ns { height: 100%; }
|
|
.min-h-100-ns { min-height: 100%; }
|
|
.vh-25-ns { height: 25vh; }
|
|
.vh-50-ns { height: 50vh; }
|
|
.vh-75-ns { height: 75vh; }
|
|
.vh-100-ns { height: 100vh; }
|
|
.min-vh-100-ns { min-height: 100vh; }
|
|
.h-auto-ns { height: auto; }
|
|
.h-inherit-ns { height: inherit; }
|
|
}
|
|
|
|
@media #{$breakpoint-medium} {
|
|
.h1-m { height: $height-1; }
|
|
.h2-m { height: $height-2; }
|
|
.h3-m { height: $height-3; }
|
|
.h4-m { height: $height-4; }
|
|
.h5-m { height: $height-5; }
|
|
.h-25-m { height: 25%; }
|
|
.h-50-m { height: 50%; }
|
|
.h-75-m { height: 75%; }
|
|
.h-100-m { height: 100%; }
|
|
.min-h-100-m { min-height: 100%; }
|
|
.vh-25-m { height: 25vh; }
|
|
.vh-50-m { height: 50vh; }
|
|
.vh-75-m { height: 75vh; }
|
|
.vh-100-m { height: 100vh; }
|
|
.min-vh-100-m { min-height: 100vh; }
|
|
.h-auto-m { height: auto; }
|
|
.h-inherit-m { height: inherit; }
|
|
}
|
|
|
|
@media #{$breakpoint-large} {
|
|
.h1-l { height: $height-1; }
|
|
.h2-l { height: $height-2; }
|
|
.h3-l { height: $height-3; }
|
|
.h4-l { height: $height-4; }
|
|
.h5-l { height: $height-5; }
|
|
.h-25-l { height: 25%; }
|
|
.h-50-l { height: 50%; }
|
|
.h-75-l { height: 75%; }
|
|
.h-100-l { height: 100%; }
|
|
.min-h-100-l { min-height: 100%; }
|
|
.vh-25-l { height: 25vh; }
|
|
.vh-50-l { height: 50vh; }
|
|
.vh-75-l { height: 75vh; }
|
|
.vh-100-l { height: 100vh; }
|
|
.min-vh-100-l { min-height: 100vh; }
|
|
.h-auto-l { height: auto; }
|
|
.h-inherit-l { height: inherit; }
|
|
}
|