diff options
Diffstat (limited to 'assets/sass')
| -rw-r--r-- | assets/sass/_mixins.scss | 116 | ||||
| -rw-r--r-- | assets/sass/_reset.scss | 128 | ||||
| -rw-r--r-- | assets/sass/style.scss | 5 |
3 files changed, 248 insertions, 1 deletions
diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss index 9dc3ada..a373209 100644 --- a/assets/sass/_mixins.scss +++ b/assets/sass/_mixins.scss @@ -5,6 +5,14 @@ // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Responsive // Usage: @include mq(tabletp) {} +// iPhone min device width cheat sheet: +// +// iPhone 4 and 4S: 320px +// iPhone 5, 5S, 5C and 5SE: 320px +// iPhone 6, 6S, 7 and 8: 375px +// iPhone 6+, 7+ and 8+: 414px +// iPhone X: 375px +$break-phonem: 320px; $break-phonel: 480px; $break-tabletp: 768px; $break-tabletl: 1024px; @@ -12,7 +20,10 @@ $break-laptop: 1220px; $break-desktop: 1600px; @mixin mq($media) { - @if $media == phonel { + @if $media == phonem { + @media only screen and (min-width: $break-phonem) { @content; } + } + @else if $media == phonel { @media only screen and (min-width: $break-phonel) { @content; } } @else if $media == tabletp { @@ -28,3 +39,106 @@ $break-desktop: 1600px; @media only screen and (min-width: $break-desktop) { @content; } } } + +// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Transitions +// Usage: @include transition(color .3s ease); + +@mixin transition($args...) { + -webkit-transition: $args; + -moz-transition: $args; + -ms-transition: $args; + -o-transition: $args; + transition: $args; +} + +// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Appearance +// Used to display an element using platform-native styling based +// on the operating system's theme. +// +// Usage: @include appearance(button); + +@mixin appearance($value) { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Placeholder +// Style the placeholder text of a form element. +// +// Usage: @include input-placeholder(#ABB7B7, 15%); + +@mixin input-placeholder($color, $alpha) { + ::-webkit-input-placeholder { + color: lighten($color, $alpha); + } + + ::-moz-placeholder { + color: lighten($color, $alpha); + } + + :-ms-input-placeholder { + color: lighten($color, $alpha); + } + + :-moz-placeholder { + color: lighten($color, $alpha); + } +} + +// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Box Sizing +// Sets how the total width and height of an element is calculated. +// +// Usage: @include box-sizing (border-box); + +@mixin box-sizing ($value) { + -webkit-box-sizing: $value; + -moz-box-sizing: $value; + box-sizing: $value; +} + + +// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Box Shadow +// +// Usage: @include box-shadow (0 0 2px 1px #e21a23!important); + +@mixin box-shadow ($args...) { + -webkit-box-shadow: $args; + -moz-box-shadow: $args; + box-shadow: $args; +} + + +// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Border Radius +// +// Usage: @include border-radius (10% 30% 50% 70%); + +@mixin border-radius ($args...) { + -webkit-border-radius: $args; + -moz-border-radius: $args; + border-radius: $args; +} + +// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Flex Wrap +// Sets whether flex items are forced onto one line or can wrap onto +// multiple lines. +// +// Usage: @include flex-wrap (wrap); + +@mixin flex-wrap ($value) { + -webkit-flex-wrap: $value; + -ms-flex-wrap: $value; + flex-wrap: $value; +} + +// - - - - - - - - - - - - - - - - - - - - - - - - - - - Box Decoration Break +// Specifies how an element's fragments should be rendered when broken across +// multiple lines, columns, or pages. +// +// Usage: @include box-decoration-break (clone); + +@mixin box-decoration-break ($value) { + -webkit-box-decoration-break: $value; + -ms-box-decoration-break: $value; + box-decoration-break: $value; +} diff --git a/assets/sass/_reset.scss b/assets/sass/_reset.scss new file mode 100644 index 0000000..d7dd1a2 --- /dev/null +++ b/assets/sass/_reset.scss @@ -0,0 +1,128 @@ +// - - - - - - - - - - - - - - - - - - +// Reset +// - - - - - - - - - - - - - - - - - - + +@import "_mixins"; + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, a, +abbr, address, cite, code, del, dfn, em, img, +ins, kbd, q, s, samp, small, strong, sub, sup, tt, +var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, +label, legend, table, caption, tbody, tfoot, +thead, tr, th, td, article, aside, canvas, details, +figcaption, figure, footer, header, hgroup, menu, +nav, section, summary, time, mark, audio, video { + margin: 0; + padding: 0; +} + +article, aside, details, figcaption, figure, footer, +header, hgroup, menu, nav, section { + display: block; +} + +h1, h2, h3, h4, h5, h6 { + font-size: 100%; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +strong, b, mark { + font-weight: 700; + font-style: inherit; +} + +em, i, cite, q, address, dfn, var { + font-style: italic; + font-weight: inherit; +} + +abbr[title],dfn[title] { + cursor: help; + border-bottom: 1px dotted; +} + +ins { + border-bottom: 1px solid; +} + +a, u, ins { + text-decoration: none; +} + +del, s { + text-decoration: line-through; +} + +pre, code, samp, kbd { + font-family: monospace; +} + +small { + font-size: .75em; +} + +img { + border: 0; + font-style: italic; +} + +input, select, option, optgroup, textarea { + font: inherit; +} + +* { + @include box-sizing (border-box); + margin: 0; + padding: 0; +} + +article, aside, details, figcaption, figure, footer, +header, hgroup, nav, section { + display: block; +} + +audio[controls], canvas, video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +html { + font-size: 100%; + -webkit-overflow-scrolling: touch; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +body { + margin: 0; + text-rendering: optimizeLegibility; +} + +img { + border: 0; + -ms-interpolation-mode: bicubic; + display: block; +} + +img, object, embed { + max-width: 100%; + height: auto; +} + +input { + @include appearance(none); +} + +header, footer, section { + position: relative; + float: left; + clear: both; + width: 100%; +} diff --git a/assets/sass/style.scss b/assets/sass/style.scss index 91b45a2..1546192 100644 --- a/assets/sass/style.scss +++ b/assets/sass/style.scss @@ -20,6 +20,11 @@ $text-color: #454545; $heading-color: #404040; $link-color: #841212; +// - - - - - - - - - - Foundations + +@import "_reset"; + +// - - - - - - - - - - Global styles @import "ed"; @import "syntax"; @import "customize"; |