├── _tables.scss ├── _reset.scss ├── _breakpoints.scss ├── _sidebar.scss ├── _depth.scss ├── corpus.scss ├── _images.scss ├── _buttons.scss ├── _borders.scss ├── _utilities.scss ├── _grid.scss ├── README.md ├── _colors.scss ├── _positioning.scss ├── _variables.scss ├── _animation.scss ├── _syntax.scss ├── _whitespace.scss ├── _sizing.scss ├── _typography.scss └── _forms.scss /_tables.scss: -------------------------------------------------------------------------------- 1 | table { 2 | border-collapse: separate; 3 | border-spacing: 0; 4 | max-width: 100%; 5 | width: 100%; 6 | } 7 | 8 | th { 9 | text-align: left; 10 | font-weight: bold; 11 | } 12 | 13 | th, 14 | td { 15 | padding: .25rem 1rem; 16 | line-height: inherit; 17 | } 18 | 19 | th { vertical-align: bottom } 20 | td { vertical-align: top } 21 | -------------------------------------------------------------------------------- /_reset.scss: -------------------------------------------------------------------------------- 1 | //==================================================== 2 | // Reset - customized version from Basscss v7.0.0 3 | //==================================================== 4 | 5 | *, 6 | *:before, 7 | *:after { 8 | margin: 0; 9 | padding: 0; 10 | box-sizing: border-box; 11 | -webkit-overflow-scrolling: touch; 12 | } 13 | 14 | body { margin: 0 } 15 | img { width: 100% } 16 | svg { max-height: 100% } 17 | -------------------------------------------------------------------------------- /_breakpoints.scss: -------------------------------------------------------------------------------- 1 | $small-break: 480px !default; 2 | $medium-break: 800px !default; 3 | 4 | @mixin small() { 5 | @media screen and (max-width: $small-break) { 6 | @content; 7 | } 8 | } 9 | 10 | @mixin medium() { 11 | @media screen and (max-width: $medium-break) { 12 | @content; 13 | } 14 | } 15 | 16 | @mixin large() { 17 | @media screen and (min-width: $small-break) { 18 | @content; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /_sidebar.scss: -------------------------------------------------------------------------------- 1 | $sidebar-width: 300px !default; 2 | 3 | .sidebar { 4 | width: $sidebar-width; 5 | @include medium { 6 | width: 100%; 7 | height: auto; 8 | } 9 | } 10 | 11 | // If sidebar exists, 12 | // offset
by it's width 13 | .sidebar + main { 14 | margin-left: $sidebar-width; 15 | @include medium { 16 | margin-left: 0; 17 | } 18 | } 19 | 20 | .sidebar.fixed, 21 | .sidebar.absolute, { 22 | @include medium { 23 | position: static; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /_depth.scss: -------------------------------------------------------------------------------- 1 | // ==================================================== 2 | // Depth 3 | // ==================================================== 4 | 5 | .depth-0 { z-index: -1; } 6 | .depth-1 { z-index: 100; } 7 | .depth-2 { z-index: 200; } 8 | .depth-3 { z-index: 300; } 9 | .depth-4 { z-index: 400; } 10 | .depth-5 { z-index: 500; } 11 | .depth-6 { z-index: 600; } 12 | .depth-7 { z-index: 700; } 13 | .depth-8 { z-index: 800; } 14 | .depth-9 { z-index: 900; } 15 | .depth-10 { z-index: 1000; } 16 | -------------------------------------------------------------------------------- /corpus.scss: -------------------------------------------------------------------------------- 1 | // Import Order 2 | 3 | @import "corpus/reset"; 4 | @import "corpus/breakpoints"; 5 | @import "corpus/animation"; 6 | @import "corpus/utilities"; 7 | @import "corpus/whitespace"; 8 | @import "corpus/grid"; 9 | @import "corpus/sidebar"; 10 | @import "corpus/sizing"; 11 | @import "corpus/colors"; 12 | @import "corpus/positioning"; 13 | @import "corpus/depth"; 14 | @import "corpus/typography"; 15 | @import "corpus/tables"; 16 | @import "corpus/images"; 17 | @import "corpus/borders"; 18 | @import "corpus/forms"; 19 | @import "corpus/buttons"; 20 | @import "corpus/syntax"; 21 | -------------------------------------------------------------------------------- /_images.scss: -------------------------------------------------------------------------------- 1 | //==================================================== 2 | // Background/Image Size & Position 3 | //==================================================== 4 | 5 | .bg-no-repeat { background-repeat: no-repeat; } 6 | .bg-cover { background-size: cover; } 7 | .bg-contain { background-size: contain; } 8 | .bg-center { background-position: center; } 9 | .bg-top { background-position: top; } 10 | .bg-right { background-position: right; } 11 | .bg-bottom { background-position: bottom; } 12 | .bg-left { background-position: left; } 13 | 14 | .bg-fixed { background-attachment: fixed; } 15 | .bg-local { background-attachment: local; } 16 | 17 | .img-cover { object-fit: cover; } 18 | .img-contain { object-fit: contain; } 19 | .img-fill { object-fit: fill; } 20 | .img-scale-down { object-fit: scale-down; } 21 | -------------------------------------------------------------------------------- /_buttons.scss: -------------------------------------------------------------------------------- 1 | //==================================================== 2 | // Buttons 3 | //==================================================== 4 | 5 | button, 6 | input[type=submit] { 7 | cursor: pointer; 8 | outline: none; 9 | white-space: nowrap; 10 | -webkit-appearance: none; 11 | 12 | color: $white; 13 | background: $accent; 14 | border: $border-1 $border-style transparent; 15 | text-align: center; 16 | line-height: 1; 17 | height: auto; 18 | // keeps buttons from filling flex container 19 | align-self: flex-start; 20 | display: inline-block; 21 | border-radius: $border-radius; 22 | padding: $padding; 23 | transition: box-shadow 200ms; 24 | 25 | &:hover { box-shadow: inset 0 0 0 20rem fade-out($black, 0.9);} 26 | &:active { transform: translateY(1px); } 27 | &:disabled { opacity: 0.6; transition: none; cursor: progress; } 28 | 29 | @include small { 30 | width: 100%; 31 | } 32 | } 33 | 34 | .btn { 35 | @extend button; 36 | &:hover { 37 | color: $white; 38 | } 39 | } 40 | 41 | .btn-large { 42 | padding: 1.5rem; 43 | } 44 | 45 | .btn-secondary { 46 | background: $midgrey; 47 | } 48 | 49 | .btn-outline { 50 | color: $accent; 51 | background-color: transparent; 52 | border-color: currentColor; 53 | transition: background 200ms, color 200ms; 54 | &:hover { 55 | color: $white; 56 | background: $accent; 57 | box-shadow: none; 58 | border-color: transparent; 59 | } 60 | } 61 | 62 | .btn-small { 63 | padding: 0.5rem; 64 | } 65 | 66 | .btn-tiny { 67 | font-size: 80%; 68 | padding: 0.25rem; 69 | } 70 | -------------------------------------------------------------------------------- /_borders.scss: -------------------------------------------------------------------------------- 1 | //==================================================== 2 | // Borders 3 | //==================================================== 4 | 5 | $border-style: solid !default; 6 | $border-color: rgba(0,0,0,0.1) !default; 7 | $border-radius: 3px !default; 8 | 9 | $border-1: 1px !default; 10 | $border-2: 2px !default; 11 | $border-3: 3px !default; 12 | 13 | .b0 { border: none !important; } 14 | .b1 { border: $border-1 $border-style $border-color; } 15 | .b2 { border: $border-2 $border-style $border-color; } 16 | .b3 { border: $border-3 $border-style $border-color; } 17 | 18 | // Top 19 | .bt0 { border-top: none !important; } 20 | .bt1 { border-top: $border-1 $border-style $border-color; } 21 | .bt2 { border-top: $border-2 $border-style $border-color; } 22 | .bt3 { border-top: $border-3 $border-style $border-color; } 23 | 24 | // Right 25 | .br0 { border-right: none !important; } 26 | .br1 { border-right: $border-1 $border-style $border-color; } 27 | .br2 { border-right: $border-2 $border-style $border-color; } 28 | .br3 { border-right: $border-3 $border-style $border-color; } 29 | 30 | // Bottom 31 | .bb0 { border-bottom: none !important; } 32 | .bb1 { border-bottom: $border-1 $border-style $border-color; } 33 | .bb2 { border-bottom: $border-2 $border-style $border-color; } 34 | .bb3 { border-bottom: $border-3 $border-style $border-color; } 35 | 36 | // Left 37 | .bl0 { border-left: none !important; } 38 | .bl1 { border-left: $border-1 $border-style $border-color; } 39 | .bl2 { border-left: $border-2 $border-style $border-color; } 40 | .bl3 { border-left: $border-3 $border-style $border-color; } 41 | 42 | //==================================================== 43 | // Border Radius 44 | //==================================================== 45 | 46 | .rounded { border-radius: $border-radius; } 47 | .not-rounded { border-radius: 0; } 48 | .circle { border-radius: 50%; } 49 | -------------------------------------------------------------------------------- /_utilities.scss: -------------------------------------------------------------------------------- 1 | //==================================================== 2 | // Display 3 | //==================================================== 4 | 5 | .hidden { display: none; } 6 | .block { display: block; } 7 | .flex { display: flex; } 8 | .inline { display: inline; } 9 | .inline-block { display: inline-block; } 10 | .inline-flex { display: inline-flex; } 11 | 12 | .overflow-hidden { overflow: hidden; } 13 | .overflow-scroll { overflow: scroll; } 14 | .overflow-auto { overflow: auto; } 15 | 16 | .hide-on-small { @include small { display: none !important; }} 17 | .hide-on-medium { @include medium { display: none !important; }} 18 | .hide-on-large { @include large { display: none !important; }} 19 | 20 | //==================================================== 21 | // Text wrap 22 | //==================================================== 23 | 24 | .pre { white-space: pre; } 25 | .nowrap { white-space: nowrap; } 26 | 27 | //==================================================== 28 | // Scrolling 29 | //==================================================== 30 | 31 | .scroll-horizontal { 32 | overflow-x: scroll; 33 | overflow-y: hidden; 34 | } 35 | 36 | .scroll-vertical { 37 | overflow-x: hidden; 38 | overflow-y: scroll; 39 | } 40 | 41 | .no-scrollbar::-webkit-scrollbar { 42 | width: 0px; 43 | height: 0px; 44 | background: transparent; 45 | } 46 | 47 | //==================================================== 48 | // Textareas 49 | //==================================================== 50 | 51 | .resize-none { resize: none; } 52 | .resize-vertical { resize: vertical; } 53 | .resize-horizontal { resize: horizontal; } 54 | 55 | //==================================================== 56 | // Misc. 57 | //==================================================== 58 | 59 | .cursor-pointer { 60 | cursor: pointer; 61 | } 62 | 63 | .no-pointer-events { 64 | pointer-events: none; 65 | } 66 | 67 | .disabled { 68 | opacity: 0.5; 69 | cursor: not-allowed; 70 | pointer-events: none; 71 | } 72 | -------------------------------------------------------------------------------- /_grid.scss: -------------------------------------------------------------------------------- 1 | //==================================================== 2 | // Grid Componets 3 | //==================================================== 4 | 5 | .column { 6 | display: flex; 7 | flex-direction: column; 8 | flex: 1 1 auto; 9 | height: auto; 10 | flex-wrap: nowrap; 11 | @include small { 12 | min-width: 100%; 13 | } 14 | } 15 | 16 | .row { 17 | display: flex; 18 | flex: 1 1 auto; 19 | height: auto; 20 | flex-direction: row; 21 | flex-wrap: wrap; 22 | } 23 | 24 | .row > .column { 25 | @include small { 26 | width: 100% !important; 27 | } 28 | } 29 | 30 | //==================================================== 31 | // Gutters 32 | //==================================================== 33 | 34 | // Add .gutters to .row/.column elements 35 | .gutters { padding: $padding; } 36 | 37 | // All direct descendants of .gutters get margin 38 | .gutters > .column, 39 | .gutters > .row { 40 | margin: $margin; 41 | @include small { 42 | width: 100% !important; 43 | min-width: 0; 44 | } 45 | } 46 | 47 | // offset padding/margin to maintain width 48 | .gutters > { 49 | .w5 { width: calc(5% - #{$padding + $margin}); } 50 | .w10 { width: calc(10% - #{$padding + $margin}); } 51 | .w15 { width: calc(15% - #{$padding + $margin}); } 52 | .w20 { width: calc(20% - #{$padding + $margin}); } 53 | .w25 { width: calc(25% - #{$padding + $margin}); } 54 | .w30 { width: calc(30% - #{$padding + $margin}); } 55 | .w35 { width: calc(35% - #{$padding + $margin}); } 56 | .w40 { width: calc(40% - #{$padding + $margin}); } 57 | .w45 { width: calc(45% - #{$padding + $margin}); } 58 | .w50 { width: calc(50% - #{$padding + $margin}); } 59 | .w55 { width: calc(55% - #{$padding + $margin}); } 60 | .w60 { width: calc(60% - #{$padding + $margin}); } 61 | .w65 { width: calc(65% - #{$padding + $margin}); } 62 | .w70 { width: calc(70% - #{$padding + $margin}); } 63 | .w75 { width: calc(75% - #{$padding + $margin}); } 64 | .w80 { width: calc(80% - #{$padding + $margin}); } 65 | .w85 { width: calc(85% - #{$padding + $margin}); } 66 | .w90 { width: calc(90% - #{$padding + $margin}); } 67 | .w95 { width: calc(95% - #{$padding + $margin}); } 68 | .w100 { width: calc(100% - #{$padding + $margin}); } 69 | } 70 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Corpus 2 | #### A collection of CSS things 3 | 4 | Corpus is yet another CSS toolkit. It’s basically a collection of the things I find [myself](http://jamiewilson.io) returning to for each new project. It uses [Flexbox](http://tympanus.net/codrops/css_reference/flexbox/) for the grid system, [viewport-based heights and percentage-based widths](http://bitsofco.de/2015/viewport-vs-percentage-units/), is heavily influenced by Basscss’s [White Space](http://www.basscss.com/docs/white-space/) module, and has a few useful greyscale color utilities. For syntax highlighting I'm using [Prism.js](http://prismjs.com/) and my own [Predawn](https://packagecontrol.io/packages/Predawn) color scheme, with code set in [Office Code Pro](https://github.com/nathco/Office-Code-Pro). Styles are written in SCSS. 5 | 6 | ### Docs 7 | 8 | The docs currently live here: https://github.com/jamiewilson/corpus-site, and is kept in a separate repo (rather than a branch) in order to make it possible to symlink the .scss files into other projects. This makes it easier to make revisions back into the Corpus source files within the context of the docs site and also requires less `git pull`ing to keep separate projects up to date. 9 | 10 | ### Alpha 11 | Please note that Corpus is in an Alpha stage right now and hasn't been tested much. Feel free to leave feedback and requests on the Issues page. 12 | 13 | ### The MIT License (MIT) 14 | Copyright (c) 2015 Jamie Wilson 15 | 16 | Permission is hereby granted, free of charge, to any person obtaining a copy 17 | of this software and associated documentation files (the "Software"), to deal 18 | in the Software without restriction, including without limitation the rights 19 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 20 | copies of the Software, and to permit persons to whom the Software is 21 | furnished to do so, subject to the following conditions: 22 | 23 | The above copyright notice and this permission notice shall be included in 24 | all copies or substantial portions of the Software. 25 | 26 | The software is provided "as is", without warranty of any kind, express or 27 | implied, including but not limited to the warranties of merchantability, 28 | fitness for a particular purpose and noninfringement. In no event shall the 29 | authors or copyright holders be liable for any claim, damages or other 30 | liability, whether in an action of contract, tort or otherwise, arising from, 31 | out of or in connection with the software or the use or other dealings in 32 | the software. 33 | -------------------------------------------------------------------------------- /_colors.scss: -------------------------------------------------------------------------------- 1 | $accent: #F18260 !default; 2 | $white: #fff !default; 3 | $silver: #F4F4F4 !default; 4 | $lightgrey: #ececec !default; 5 | $grey: #ccc !default; 6 | $midgrey: #777 !default; 7 | $darkgrey: #444 !default; 8 | $black: #222 !default; 9 | $trueblack: #000 !default; 10 | 11 | //==================================================== 12 | // Text Colors 13 | //==================================================== 14 | 15 | .color-accent { color: $accent; } 16 | .color-white { color: $white; } 17 | .color-silver { color: $silver; } 18 | .color-lightgrey { color: $lightgrey; } 19 | .color-grey { color: $grey; } 20 | .color-midgrey { color: $midgrey; } 21 | .color-darkgrey { color: $darkgrey; } 22 | .color-black { color: $black; } 23 | .color-trueblack { color: $trueblack; } 24 | .color-inherit { color: inherit; } 25 | .color-transparent { color: transparent; } 26 | 27 | //==================================================== 28 | // Background Colors 29 | //==================================================== 30 | 31 | .bg-accent { background-color: $accent; } 32 | .bg-white { background-color: $white; } 33 | .bg-silver { background-color: $silver; } 34 | .bg-lightgrey { background-color: $lightgrey; } 35 | .bg-grey { background-color: $grey; } 36 | .bg-midgrey { background-color: $midgrey; } 37 | .bg-darkgrey { background-color: $darkgrey; } 38 | .bg-black { background-color: $black; } 39 | .bg-trueblack { background-color: $trueblack; } 40 | .bg-transparent { background-color: transparent; } 41 | 42 | //==================================================== 43 | // Border Colors / _borders.scss 44 | //==================================================== 45 | 46 | // TODO: Figure out best way to eliminate !important 47 | // !important needed to override color property in shorthand 48 | 49 | .border-accent { border-color: $accent !important; } 50 | .border-white { border-color: $white !important; } 51 | .border-silver { border-color: $silver !important; } 52 | .border-lightgrey { border-color: $lightgrey !important; } 53 | .border-grey { border-color: $grey !important; } 54 | .border-midgrey { border-color: $midgrey !important; } 55 | .border-darkgrey { border-color: $darkgrey !important; } 56 | .border-black { border-color: $black !important; } 57 | .border-trueblack { border-color: $trueblack !important; } 58 | .border-current { border-color: currentColor !important; } 59 | .border-transparent { border-color: transparent !important; } 60 | -------------------------------------------------------------------------------- /_positioning.scss: -------------------------------------------------------------------------------- 1 | // ==================================================== 2 | // Basic Positioning Properties 3 | // ==================================================== 4 | 5 | .relative { position: relative; } 6 | .absolute { position: absolute; } 7 | .fixed { position: fixed; } 8 | 9 | // ==================================================== 10 | // Positioning for Flex Items 11 | // ==================================================== 12 | 13 | // Columns & Rows need reversed styles to create the same effect 14 | 15 | .center { align-items: center; justify-content: center; } 16 | .top-left { align-items: flex-start; justify-content: flex-start; } 17 | .bottom-right { align-items: flex-end; justify-content: flex-end; } 18 | 19 | .column.top-center { align-items: center; justify-content: flex-start; } 20 | .column.top-right { align-items: flex-end; justify-content: flex-start; } 21 | .column.center-left { align-items: flex-start; justify-content: center; } 22 | .column.center-right { align-items: flex-end; justify-content: center; } 23 | .column.bottom-left { align-items: flex-start; justify-content: flex-end; } 24 | .column.bottom-center { align-items: center; justify-content: flex-end; } 25 | 26 | .row.top-center { align-items: flex-start; justify-content: center; } 27 | .row.top-right { align-items: flex-start; justify-content: flex-end; } 28 | .row.center-left { align-items: center; justify-content: flex-start; } 29 | .row.center-right { align-items: center; justify-content: flex-end; } 30 | .row.bottom-left { align-items: flex-end; justify-content: flex-start; } 31 | .row.bottom-center { align-items: flex-end; justify-content: center; } 32 | 33 | // ==================================================== 34 | // Flex Item Alignment 35 | // ==================================================== 36 | 37 | .space-around { justify-content: space-around; } 38 | .space-between { justify-content: space-between; } 39 | 40 | .align-top { align-items: flex-start; } 41 | .align-middle { align-items: middle; } 42 | .align-baseline { align-items: baseline; } 43 | .align-stretch { align-items: stretch; } 44 | 45 | //==================================================== 46 | // Flex Order 47 | //==================================================== 48 | 49 | .order-1 { order: 1; } 50 | .order-2 { order: 2; } 51 | .order-3 { order: 3; } 52 | .order-4 { order: 4; } 53 | .order-5 { order: 5; } 54 | .order-6 { order: 6; } 55 | .order-7 { order: 7; } 56 | .order-8 { order: 8; } 57 | .order-9 { order: 9; } 58 | .order-10 { order: 10; } 59 | 60 | // ==================================================== 61 | // Absolute Positioning 62 | // ==================================================== 63 | 64 | .top { top: 0; } 65 | .right { right: 0; } 66 | .bottom { bottom: 0; } 67 | .left { left: 0; } 68 | 69 | .absolute-center { 70 | position: absolute; 71 | top: 0; 72 | right: 0; 73 | bottom: 0; 74 | left: 0; 75 | margin: auto 76 | } 77 | 78 | // ==================================================== 79 | // Floats 80 | // ==================================================== 81 | 82 | .float-left { float: left; } 83 | .float-right { float: right; } 84 | -------------------------------------------------------------------------------- /_variables.scss: -------------------------------------------------------------------------------- 1 | // // You can overwrite any of the variables referenced in Corpus 2 | // // by uncommenting the line or whole file and redefining it 3 | 4 | // //==================================================== 5 | // // _typography.scss 6 | // //==================================================== 7 | 8 | // @font-face { font-family: 'Office Code Pro'; src: url('../fonts/OfficeCodePro-Regular.woff'); } 9 | // $base-font: 'Helvetica Neue', Helvetica, sans-serif; 10 | // $mono-font: 'Office Code Pro', Monaco, Consolas, monospace; 11 | // $base-font-size: 1rem; 12 | // $base-line-height: 1.6; 13 | 14 | // $h1: $base-font-size * 2.25; 15 | // $h2: $base-font-size * 1.75; 16 | // $h3: $base-font-size * 1.5; 17 | // $h4: $base-font-size * 1.25; 18 | // $h5: $base-font-size * 1.125; 19 | // $h6: $base-font-size; 20 | 21 | // //==================================================== 22 | // // _sizing.scss 23 | // //==================================================== 24 | 25 | // $container-width: 1000px; 26 | 27 | // //==================================================== 28 | // // _sidebar.scss 29 | // //==================================================== 30 | 31 | // $sidebar-width: 300px; 32 | 33 | // //==================================================== 34 | // // _colors.scss 35 | // //==================================================== 36 | 37 | // $accent: #F18260; 38 | // $white: #fff; 39 | // $silver: #F4F4F4; 40 | // $lightgrey: #ececec; 41 | // $grey: #ccc; 42 | // $midgrey: #777; 43 | // $darkgrey: #444; 44 | // $black: #222; 45 | // $trueblack: #000; 46 | 47 | // //==================================================== 48 | // // _syntax.scss 49 | // //==================================================== 50 | 51 | // // Cools 52 | // $paleblue: #BDDCDC; 53 | // $blue: #92BFBF; 54 | // $slate: #5F777E; 55 | // $palegreen: #D0EDA7; 56 | // $green: #B4D388; 57 | // $darkgreen: #809161; 58 | 59 | // // Warms 60 | // $paleyellow: #F5F5AE; 61 | // $yellow: #EDE480; 62 | // $orange: #F49D62; 63 | // $red: #CF5340; 64 | // $darkred: #893121; 65 | // $maroon: #55201B; 66 | 67 | // //==================================================== 68 | // // _whitespace.scss 69 | // //==================================================== 70 | 71 | // $padding: 1rem; 72 | // $margin: 1rem; 73 | 74 | // //==================================================== 75 | // // _borders.scss 76 | // //==================================================== 77 | 78 | // $border-style: solid; 79 | // $border-color: rgba(0,0,0,0.1); 80 | // $border-radius: 3px; 81 | 82 | // $border-1: 1px; 83 | // $border-2: 2px; 84 | // $border-3: 3px; 85 | 86 | // //==================================================== 87 | // // _breakpoints.scss 88 | // //==================================================== 89 | 90 | // $small-break: 480px; 91 | // $medium-break: 800px; 92 | 93 | // @mixin small() { 94 | // @media screen and (max-width: $small-break) { 95 | // @content; 96 | // } 97 | // } 98 | 99 | // @mixin medium() { 100 | // @media screen and (max-width: $medium-break) { 101 | // @content; 102 | // } 103 | // } 104 | 105 | // @mixin large() { 106 | // @media screen and (min-width: $small-break) { 107 | // @content; 108 | // } 109 | // } 110 | -------------------------------------------------------------------------------- /_animation.scss: -------------------------------------------------------------------------------- 1 | //==================================================== 2 | // Animation 3 | //==================================================== 4 | 5 | @keyframes fadeIn { 6 | from { opacity: 0; } 7 | to { opacity: 1; }} 8 | 9 | @keyframes fadeOut { 10 | from { opacity: 1; } 11 | to { opacity: 0; }} 12 | 13 | @keyframes fadeInUp { 14 | from { opacity: 0; transform: translateY(1.5rem); } 15 | to { opacity: 1; transform: translateY(0); }} 16 | 17 | @keyframes fadeInDown { 18 | from { opacity: 0; transform: translateY(-1.5rem); } 19 | to { opacity: 1; transform: translateY(0); }} 20 | 21 | @keyframes scaleUp { 22 | from { transform: scale(0); } 23 | to { transform: scale(1); }} 24 | 25 | @keyframes scaleDown { 26 | from { transform: scale(1); } 27 | to { transform: scale(0); }} 28 | 29 | @keyframes slideUp { 30 | from { transform: translateY(25vh); } 31 | to { transform: translateY(0); }} 32 | 33 | @keyframes slideDown { 34 | from { transform: translateY(-25vh); } 35 | to { transform: translateY(0); }} 36 | 37 | @keyframes slideLeft { 38 | from { transform: translateX(25vh); } 39 | to { transform: translateX(0); }} 40 | 41 | @keyframes slideRight { 42 | from { transform: translateX(-25vh); } 43 | to { transform: translateX(0); }} 44 | 45 | @keyframes flipIn { 46 | from { opacity: 0; transform: scaleY(0); } 47 | to { opacity: 1; transform: scaleY(1); }} 48 | 49 | @keyframes flipOut { 50 | from { opacity: 1; transform: scaleY(1); } 51 | to { opacity: 0; transform: scaleY(0); }} 52 | 53 | @keyframes rotateRight { 54 | from { transform: rotate(0deg); } 55 | to { transform: rotate(360deg); }} 56 | 57 | @keyframes rotateLeft { 58 | from { transform: rotate(360deg); } 59 | to { transform: rotate(0deg); }} 60 | 61 | @keyframes flash { 62 | from { opacity: 1; } 63 | to { opacity: 0.25; }} 64 | 65 | @keyframes shake { 66 | 15% { transform: translateX(0.5rem); } 67 | 30% { transform: translateX(-0.4rem); } 68 | 45% { transform: translateX(0.3rem); } 69 | 60% { transform: translateX(-0.2rem); } 70 | 75% { transform: translateX(0.1rem); } 71 | 90% { transform: translateX(0); } 72 | 90% { transform: translateX(0); }} 73 | 74 | //==================================================== 75 | // Animation Utility Classes 76 | //==================================================== 77 | 78 | .fadeIn { animation: fadeIn 500ms; } 79 | .fadeOut { animation: fadeOut 500ms; } 80 | 81 | .fadeInUp { animation: fadeInUp 500ms; } 82 | .fadeInDown { animation: fadeInDown 500ms; } 83 | 84 | .slideUp { animation: slideUp 200ms ease-in-out; } 85 | .slideDown { animation: slideDown 200ms ease-in-out; } 86 | 87 | .slideRight { animation: slideRight 200ms ease-in-out; } 88 | .slideLeft { animation: slideLeft 200ms ease-in-out; } 89 | 90 | .scaleUp { animation: scaleUp 200ms ease-in-out; } 91 | .scaleDown { animation: scaleDown 200ms ease-in-out; } 92 | 93 | .flipIn { animation: flipIn 200ms cubic-bezier(0.5, -0.5, 0.5, 1.5) } 94 | .flipOut { animation: flipOut 200ms cubic-bezier(0.5, -0.5, 0.5, 1.5) } 95 | 96 | .rotateRight { animation: rotateRight 500ms; } 97 | .rotateLeft { animation: rotateLeft 500ms; } 98 | 99 | .flash { animation: flash 500ms 3; } 100 | .shake { animation: shake 200ms; } 101 | -------------------------------------------------------------------------------- /_syntax.scss: -------------------------------------------------------------------------------- 1 | // Cools 2 | $paleblue: #BDDCDC !default; 3 | $blue: #92BFBF !default; 4 | $slate: #5F777E !default; 5 | $palegreen: #D0EDA7 !default; 6 | $green: #B4D388 !default; 7 | $darkgreen: #809161 !default; 8 | 9 | // Warms 10 | $paleyellow: #F5F5AE !default; 11 | $yellow: #EDE480 !default; 12 | $orange: #F49D62 !default; 13 | $red: #CF5340 !default; 14 | $darkred: #893121 !default; 15 | $maroon: #55201B !default; 16 | 17 | //==================================================== 18 | // Code Blocks 19 | //==================================================== 20 | 21 | pre { margin-bottom: $margin; } 22 | 23 | pre[class*="language-"], 24 | code[class*="language-"] { 25 | position: relative; 26 | color: $yellow; 27 | } 28 | 29 | pre::-webkit-scrollbar { height: 12px; width: 12px; overflow: visible; } 30 | pre::-webkit-scrollbar-track { background: none; } 31 | pre::-webkit-scrollbar-corner { background: none; } 32 | pre::-webkit-scrollbar-thumb { background: $accent; border: 5px solid $black; } 33 | 34 | //==================================================== 35 | // Syntax Highlighting 36 | //==================================================== 37 | 38 | 39 | pre[class*="language-"].language-markup, 40 | code[class*="language-"].language-markup, 41 | pre[class*="language-"].language-html, 42 | code[class*="language-"].language-html, 43 | pre[class*="language-"].language-javascript, 44 | code[class*="language-"].language-javascript { 45 | color: $white; 46 | } 47 | 48 | .token.comment, 49 | .token.prolog, 50 | .token.doctype, 51 | .token.cdata, 52 | .token.entity, 53 | .language-css .token.string, 54 | .language-scss .token.string, 55 | .style .token.string { 56 | color: $midgrey; 57 | } 58 | 59 | .token.property, 60 | .language-markup .token.punctuation { 61 | color: $blue; 62 | } 63 | 64 | .token.tag, 65 | .token.boolean, 66 | .token.number, 67 | .token.constant, 68 | .token.symbol, 69 | .token.deleted, 70 | .language-css .token.selector, 71 | .language-scss .token.selector { 72 | color: $green; 73 | } 74 | 75 | .token.selector, 76 | .token.attr-name, 77 | .token.string, 78 | .token.char, 79 | .token.builtin, 80 | .token.inserted, 81 | .language-clike .token.boolean, 82 | .language-javascript .token.keyword, 83 | .language-javascript .token.number, 84 | .language-css .token.keyword, 85 | .language-scss .token.keyword { 86 | color: $yellow; 87 | } 88 | 89 | .token.punctuation { 90 | color: $silver; 91 | } 92 | 93 | .token.attr-value, 94 | .token.keyword, 95 | .language-clike .token.string, 96 | .language-javascript .token.string { 97 | color: $paleblue; 98 | } 99 | 100 | .token.operator, 101 | .token.atrule, 102 | .token.function, 103 | .token.url, 104 | .token.regex, 105 | .token.variable { 106 | color: $orange; 107 | } 108 | 109 | .token.important, { 110 | color: $red; 111 | } 112 | 113 | .token.entity { 114 | cursor: help; 115 | } 116 | 117 | //==================================================== 118 | // Lanquage Indicator 119 | //==================================================== 120 | 121 | pre[class*='language-'][data-language]::before { 122 | content: attr(data-language); 123 | position: absolute; 124 | top: 0; 125 | right: 0; 126 | padding: 4px 8px; 127 | font-family: $base-font; 128 | font-size: 10px; 129 | background: $darkgrey; 130 | color: $grey; 131 | text-transform: uppercase; 132 | border-radius: 0 0 0 5px; 133 | } 134 | 135 | .no-indicator:before { 136 | display: none; 137 | } 138 | 139 | //==================================================== 140 | // Line Numbers 141 | //==================================================== 142 | 143 | pre.line-numbers { 144 | padding-left: 4.5em; 145 | counter-reset: linenumber; 146 | } 147 | 148 | pre.line-numbers > code { 149 | position: relative; 150 | } 151 | 152 | .line-numbers .line-numbers-rows { 153 | position: absolute; 154 | pointer-events: none; 155 | top: 0; 156 | left: -4.5em; 157 | width: 3em; /* works for line-numbers below 1000 lines */ 158 | border-right: 1px solid $darkgrey; 159 | user-select: none; 160 | } 161 | 162 | .line-numbers-rows > span { 163 | pointer-events: none; 164 | display: block; 165 | counter-increment: linenumber; 166 | } 167 | 168 | .line-numbers-rows > span:before { 169 | content: counter(linenumber); 170 | color: lighten($darkgrey, 10%) ; 171 | display: block; 172 | padding-right: 0.8em; 173 | text-align: right; 174 | } 175 | -------------------------------------------------------------------------------- /_whitespace.scss: -------------------------------------------------------------------------------- 1 | //==================================================== 2 | // Padding 3 | //==================================================== 4 | 5 | $padding: 1rem !default; 6 | $margin: 1rem !default; 7 | 8 | // All 9 | .p0 { padding: 0 !important; } 10 | .p1 { padding: $padding; } 11 | .p2 { padding: $padding * 2; } 12 | .p3 { padding: $padding * 3; } 13 | .p4 { padding: $padding * 4; } 14 | .p5 { padding: $padding * 5; } 15 | 16 | // Top 17 | .pt0 { padding-top: 0 !important; } 18 | .pt1 { padding-top: $padding; } 19 | .pt2 { padding-top: $padding * 2; } 20 | .pt3 { padding-top: $padding * 3; } 21 | .pt4 { padding-top: $padding * 4; } 22 | .pt5 { padding-top: $padding * 5; } 23 | 24 | // Right 25 | .pr0 { padding-right: 0 !important; } 26 | .pr1 { padding-right: $padding; } 27 | .pr2 { padding-right: $padding * 2; } 28 | .pr3 { padding-right: $padding * 3; } 29 | .pr4 { padding-right: $padding * 4; } 30 | .pr5 { padding-right: $padding * 5; } 31 | 32 | // Bottom 33 | .pb0 { padding-bottom: 0 !important; } 34 | .pb1 { padding-bottom: $padding; } 35 | .pb2 { padding-bottom: $padding * 2; } 36 | .pb3 { padding-bottom: $padding * 3; } 37 | .pb4 { padding-bottom: $padding * 4; } 38 | .pb5 { padding-bottom: $padding * 5; } 39 | 40 | // Left 41 | .pl0 { padding-left: 0 !important; } 42 | .pl1 { padding-left: $padding; } 43 | .pl2 { padding-left: $padding * 2; } 44 | .pl3 { padding-left: $padding * 3; } 45 | .pl4 { padding-left: $padding * 4; } 46 | .pl5 { padding-left: $padding * 5; } 47 | 48 | // Top-Bottom 49 | .ptb0 { padding-top: 0 !important; padding-bottom: 0 !important; } 50 | .ptb1 { padding-top: $padding; padding-bottom: $padding; } 51 | .ptb2 { padding-top: $padding * 2; padding-bottom: $padding * 2; } 52 | .ptb3 { padding-top: $padding * 3; padding-bottom: $padding * 3; } 53 | .ptb4 { padding-top: $padding * 4; padding-bottom: $padding * 4; } 54 | .ptb5 { padding-top: $padding * 5; padding-bottom: $padding * 5; } 55 | 56 | // Left-Right 57 | .plr0 { padding-left: 0 !important; padding-right: 0 !important; } 58 | .plr1 { padding-left: $padding; padding-right: $padding; } 59 | .plr2 { padding-left: $padding * 2; padding-right: $padding * 2; } 60 | .plr3 { padding-left: $padding * 3; padding-right: $padding * 3; } 61 | .plr4 { padding-left: $padding * 4; padding-right: $padding * 4; } 62 | .plr5 { padding-left: $padding * 5; padding-right: $padding * 5; } 63 | 64 | //==================================================== 65 | // Margins 66 | //==================================================== 67 | 68 | // Auto 69 | .ma { margin: auto; } 70 | 71 | // All 72 | .m0 { margin: 0 !important; } 73 | .m1 { margin: $margin; } 74 | .m2 { margin: $margin * 2; } 75 | .m3 { margin: $margin * 3; } 76 | .m4 { margin: $margin * 4; } 77 | .m5 { margin: $margin * 5; } 78 | 79 | // Top 80 | .mt0 { margin-top: 0 !important; } 81 | .mt1 { margin-top: $margin; } 82 | .mt2 { margin-top: $margin * 2; } 83 | .mt3 { margin-top: $margin * 3; } 84 | .mt4 { margin-top: $margin * 4; } 85 | .mt5 { margin-top: $margin * 5; } 86 | 87 | // Right 88 | .mr0 { margin-right: 0 !important; } 89 | .mr1 { margin-right: $margin; } 90 | .mr2 { margin-right: $margin * 2; } 91 | .mr3 { margin-right: $margin * 3; } 92 | .mr4 { margin-right: $margin * 4; } 93 | .mr5 { margin-right: $margin * 5; } 94 | 95 | // Bottom 96 | .mb0 { margin-bottom: 0 !important; } 97 | .mb1 { margin-bottom: $margin; } 98 | .mb2 { margin-bottom: $margin * 2; } 99 | .mb3 { margin-bottom: $margin * 3; } 100 | .mb4 { margin-bottom: $margin * 4; } 101 | .mb5 { margin-bottom: $margin * 5; } 102 | 103 | // Left 104 | .ml0 { margin-left: 0 !important; } 105 | .ml1 { margin-left: $margin; } 106 | .ml2 { margin-left: $margin * 2; } 107 | .ml3 { margin-left: $margin * 3; } 108 | .ml4 { margin-left: $margin * 4; } 109 | .ml5 { margin-left: $margin * 5; } 110 | 111 | // Top/Bottom 112 | .mtb0 { margin-top: 0 !important; margin-bottom: 0 !important; } 113 | .mtb1 { margin-top: $margin; margin-bottom: $margin; } 114 | .mtb2 { margin-top: $margin * 2; margin-bottom: $margin * 2; } 115 | .mtb3 { margin-top: $margin * 3; margin-bottom: $margin * 3; } 116 | .mtb4 { margin-top: $margin * 4; margin-bottom: $margin * 4; } 117 | .mtb5 { margin-top: $margin * 5; margin-bottom: $margin * 5; } 118 | 119 | // Left/Right 120 | .mlr0 { margin-left: 0 !important; margin-right: 0 !important; } 121 | .mlr1 { margin-left: $margin; margin-right: $margin; } 122 | .mlr2 { margin-left: $margin * 2; margin-right: $margin * 2; } 123 | .mlr3 { margin-left: $margin * 3; margin-right: $margin * 3; } 124 | .mlr4 { margin-left: $margin * 4; margin-right: $margin * 4; } 125 | .mlr5 { margin-left: $margin * 5; margin-right: $margin * 5; } 126 | -------------------------------------------------------------------------------- /_sizing.scss: -------------------------------------------------------------------------------- 1 | //==================================================== 2 | // Sizing 3 | //==================================================== 4 | 5 | .fullscreen { min-height: 100vh; min-width: 100%; } 6 | 7 | //==================================================== 8 | // Flex Sizing 9 | //==================================================== 10 | 11 | .flex1 { flex: 1; } 12 | .flex2 { flex: 2; } 13 | .flex3 { flex: 3; } 14 | .flex4 { flex: 4; } 15 | .flex5 { flex: 5; } 16 | 17 | //==================================================== 18 | // Width 19 | //==================================================== 20 | 21 | .w-auto { width: auto !important; } 22 | .w-inherit { width: inherit !important; } 23 | .w-initial { width: initial !important; } 24 | 25 | // Viewport-based width 26 | .vw5 { width: 5vw; } 27 | .vw10 { width: 10vw; } 28 | .vw15 { width: 15vw; } 29 | .vw20 { width: 20vw; } 30 | .vw25 { width: 25vw; } 31 | .vw30 { width: 30vw; } 32 | .vw35 { width: 35vw; } 33 | .vw40 { width: 40vw; } 34 | .vw45 { width: 45vw; } 35 | .vw50 { width: 50vw; } 36 | .vw55 { width: 55vw; } 37 | .vw60 { width: 60vw; } 38 | .vw65 { width: 65vw; } 39 | .vw70 { width: 70vw; } 40 | .vw75 { width: 75vw; } 41 | .vw80 { width: 80vw; } 42 | .vw85 { width: 85vw; } 43 | .vw90 { width: 90vw; } 44 | .vw95 { width: 95vw; } 45 | .vw100 { width: 100vw;} 46 | 47 | // Percentage-based width 48 | .w5 { width: 5%; } 49 | .w10 { width: 10%; } 50 | .w15 { width: 15%; } 51 | .w20 { width: 20%; } 52 | .w25 { width: 25%; } 53 | .w30 { width: 30%; } 54 | .w35 { width: 35%; } 55 | .w40 { width: 40%; } 56 | .w45 { width: 45%; } 57 | .w50 { width: 50%; } 58 | .w55 { width: 55%; } 59 | .w60 { width: 60%; } 60 | .w65 { width: 65%; } 61 | .w70 { width: 70%; } 62 | .w75 { width: 75%; } 63 | .w80 { width: 80%; } 64 | .w85 { width: 85%; } 65 | .w90 { width: 90%; } 66 | .w95 { width: 95%; } 67 | .w100 { width: 100%;} 68 | 69 | .max-w5 { max-width: 5%; } 70 | .max-w10 { max-width: 10%; } 71 | .max-w15 { max-width: 15%; } 72 | .max-w20 { max-width: 20%; } 73 | .max-w25 { max-width: 25%; } 74 | .max-w30 { max-width: 30%; } 75 | .max-w35 { max-width: 35%; } 76 | .max-w40 { max-width: 40%; } 77 | .max-w45 { max-width: 45%; } 78 | .max-w50 { max-width: 50%; } 79 | .max-w55 { max-width: 55%; } 80 | .max-w60 { max-width: 60%; } 81 | .max-w65 { max-width: 65%; } 82 | .max-w70 { max-width: 70%; } 83 | .max-w75 { max-width: 75%; } 84 | .max-w80 { max-width: 80%; } 85 | .max-w85 { max-width: 85%; } 86 | .max-w90 { max-width: 90%; } 87 | .max-w95 { max-width: 95%; } 88 | .max-w100 { max-width: 100%;} 89 | 90 | .min-w5 { min-width: 5%; } 91 | .min-w10 { min-width: 10%; } 92 | .min-w15 { min-width: 15%; } 93 | .min-w20 { min-width: 20%; } 94 | .min-w25 { min-width: 25%; } 95 | .min-w30 { min-width: 30%; } 96 | .min-w35 { min-width: 35%; } 97 | .min-w40 { min-width: 40%; } 98 | .min-w45 { min-width: 45%; } 99 | .min-w50 { min-width: 50%; } 100 | .min-w55 { min-width: 55%; } 101 | .min-w60 { min-width: 60%; } 102 | .min-w65 { min-width: 65%; } 103 | .min-w70 { min-width: 70%; } 104 | .min-w75 { min-width: 75%; } 105 | .min-w80 { min-width: 80%; } 106 | .min-w85 { min-width: 85%; } 107 | .min-w90 { min-width: 90%; } 108 | .min-w95 { min-width: 95%; } 109 | .min-w100 { min-width: 100%;} 110 | 111 | //==================================================== 112 | // Height 113 | //==================================================== 114 | 115 | .h-auto { height: auto !important; } 116 | .h-inherit { height: inherit !important; } 117 | .h-initial { height: initial !important; } 118 | 119 | // Viewport-based height 120 | .vh5 { height: 5vh; } 121 | .vh10 { height: 10vh; } 122 | .vh15 { height: 15vh; } 123 | .vh20 { height: 20vh; } 124 | .vh25 { height: 25vh; } 125 | .vh30 { height: 30vh; } 126 | .vh35 { height: 35vh; } 127 | .vh40 { height: 40vh; } 128 | .vh45 { height: 45vh; } 129 | .vh50 { height: 50vh; } 130 | .vh55 { height: 55vh; } 131 | .vh60 { height: 60vh; } 132 | .vh65 { height: 65vh; } 133 | .vh70 { height: 70vh; } 134 | .vh75 { height: 75vh; } 135 | .vh80 { height: 80vh; } 136 | .vh85 { height: 85vh; } 137 | .vh90 { height: 90vh; } 138 | .vh95 { height: 95vh; } 139 | .vh100 { height: 100vh;} 140 | 141 | // Percentage-based height 142 | .h5 { height: 5%; } 143 | .h10 { height: 10%; } 144 | .h15 { height: 15%; } 145 | .h20 { height: 20%; } 146 | .h25 { height: 25%; } 147 | .h30 { height: 30%; } 148 | .h35 { height: 35%; } 149 | .h40 { height: 40%; } 150 | .h45 { height: 45%; } 151 | .h50 { height: 50%; } 152 | .h55 { height: 55%; } 153 | .h60 { height: 60%; } 154 | .h65 { height: 65%; } 155 | .h70 { height: 70%; } 156 | .h75 { height: 75%; } 157 | .h80 { height: 80%; } 158 | .h85 { height: 85%; } 159 | .h90 { height: 90%; } 160 | .h95 { height: 95%; } 161 | .h100 { height: 100%;} 162 | -------------------------------------------------------------------------------- /_typography.scss: -------------------------------------------------------------------------------- 1 | //==================================================== 2 | // Typography 3 | //==================================================== 4 | 5 | @font-face { font-family: 'Office Code Pro'; src: url('../fonts/OfficeCodePro-Regular.woff'); } 6 | $base-font: 'Helvetica Neue', Helvetica, sans-serif !default; 7 | $mono-font: 'Office Code Pro', Monaco, Consolas, monospace !default; 8 | $base-font-size: 1rem !default; 9 | $base-line-height: 1.6 !default; 10 | 11 | $h1: $base-font-size * 2.25 !default; 12 | $h2: $base-font-size * 1.75 !default; 13 | $h3: $base-font-size * 1.5 !default; 14 | $h4: $base-font-size * 1.25 !default; 15 | $h5: $base-font-size * 1.125 !default; 16 | $h6: $base-font-size !default; 17 | 18 | ::selection { 19 | background: $black; 20 | color: $accent; 21 | } 22 | 23 | h1, h2, h3, h4, h5, h6 { 24 | font-weight: 400; 25 | margin-bottom: 1rem; 26 | } 27 | 28 | 29 | h1, .h1 { font-size: $h1; line-height: 1.2; } 30 | h2, .h2 { font-size: $h2; line-height: 1.3; } 31 | h3, .h3 { font-size: $h3; line-height: 1.4; } 32 | h4, .h4 { font-size: $h4; line-height: 1.5; } 33 | h5, .h5 { font-size: $h5; } 34 | h6, .h6 { font-size: $h6; } 35 | 36 | body { 37 | font-size: $base-font-size; 38 | background-color: $white; 39 | color: $black; 40 | font-family: $base-font; 41 | line-height: $base-line-height; 42 | } 43 | 44 | a, 45 | .link { 46 | color: $accent; 47 | text-decoration: none; 48 | transition: color 200ms; 49 | cursor: pointer; 50 | } 51 | 52 | a:hover { 53 | color: $accent; 54 | } 55 | 56 | h1 a, .h1 a, 57 | h2 a, .h2 a, 58 | h3 a, .h3 a { 59 | color: inherit; 60 | text-decoration: underline; 61 | } 62 | 63 | p { 64 | margin-top: 0; 65 | margin-bottom: 1rem; 66 | } 67 | 68 | //==================================================== 69 | // Lists 70 | //==================================================== 71 | 72 | li ul, li ol { margin: 0 1rem; } 73 | ul { list-style-type: disc; } 74 | ol { list-style-type: decimal; } 75 | ol ol { list-style: lower-alpha; } 76 | ol ol ol { list-style: lower-roman; } 77 | ol ol ol ol { list-style: lower-alpha; } 78 | 79 | //==================================================== 80 | // Code 81 | //==================================================== 82 | 83 | pre, code, samp, style { font-family: $mono-font; } 84 | 85 | pre { 86 | background-color: $black; 87 | color: $white; 88 | font-size: 0.875rem; 89 | padding: $padding * 2; 90 | overflow: auto; 91 | } 92 | 93 | pre code { 94 | background-color: inherit; 95 | border-radius: 0; 96 | color: inherit; 97 | padding: 0; 98 | } 99 | 100 | code { 101 | background-color: $silver; 102 | border-radius: 3px; 103 | font-size: 0.875rem; 104 | padding: 0.15em 0.4em; 105 | } 106 | 107 | .bg-silver code, 108 | .bg-grey code { 109 | background-color: $black; 110 | color: $white; 111 | } 112 | 113 | hr { 114 | border: 0; 115 | border-bottom: 1px solid fade-out($trueblack, 0.9); 116 | } 117 | 118 | //==================================================== 119 | // Text Length & Alignment 120 | //==================================================== 121 | 122 | .optimal-length { max-width: 70ch; } 123 | .text-align-center { text-align: center; } 124 | .text-align-left { text-align: left; } 125 | .text-align-right { text-align: right; } 126 | 127 | //==================================================== 128 | // Styles & Transforms 129 | //==================================================== 130 | 131 | .uppercase { text-transform: uppercase; } 132 | .lowercase { text-transform: lowercase; } 133 | .capitalize { text-transform: capitalize; } 134 | .italic { font-style: italic; } 135 | .tracked { letter-spacing: 4px; } 136 | .underline { text-decoration: underline; } 137 | .no-underline { text-decoration: none; } 138 | .list-style-none { list-style-type: none; } 139 | .list-inline li { display: inline; } 140 | 141 | .thin {font-weight: 200; } 142 | .regular {font-weight: 400; } 143 | .bold {font-weight: 700; } 144 | 145 | //==================================================== 146 | // Styles & Transforms 147 | //==================================================== 148 | 149 | @include large { 150 | .two-columns { column-count: 2; } 151 | .three-columns { column-count: 3; } 152 | .four-columns { column-count: 4; } 153 | .five-columns { column-count: 5; } 154 | } 155 | 156 | //==================================================== 157 | // Letter Spacing 158 | //==================================================== 159 | 160 | .ls0 { letter-spacing: 0px !important; } 161 | .ls1 { letter-spacing: 1px; } 162 | .ls2 { letter-spacing: 2px; } 163 | .ls3 { letter-spacing: 3px; } 164 | .ls4 { letter-spacing: 4px; } 165 | .ls5 { letter-spacing: 5px; } 166 | 167 | //==================================================== 168 | // Line-Height 169 | //==================================================== 170 | 171 | .lh0 { line-height: 0; } 172 | .lh1 { line-height: 1; } 173 | .lh2 { line-height: 1.2; } 174 | .lh3 { line-height: 1.3; } 175 | .lh4 { line-height: 1.4; } 176 | .lh5 { line-height: 1.5; } 177 | .lh6 { line-height: 1.6; } 178 | .lh7 { line-height: 1.7; } 179 | .lh8 { line-height: 1.8; } 180 | .lh9 { line-height: 1.9; } 181 | 182 | //==================================================== 183 | // Font Sizing 184 | //==================================================== 185 | 186 | .fs-base { font-size: $base-font-size; } 187 | .fs-xsmall { font-size: 50%; } 188 | .fs-small { font-size: 75%; } 189 | .fs-large { font-size: 125%; } 190 | .fs-xlarge { font-size: 150%; } 191 | .fs-xxlarge { font-size: 175%; } 192 | .fs-double { font-size: 200%; } 193 | -------------------------------------------------------------------------------- /_forms.scss: -------------------------------------------------------------------------------- 1 | input, 2 | select, 3 | textarea, 4 | fieldset { 5 | font-family: inherit; 6 | font-size: 1rem; 7 | border: none; 8 | border-radius: 0; 9 | } 10 | 11 | label { vertical-align: middle; } 12 | 13 | select { -webkit-appearance: none; } 14 | 15 | textarea { 16 | line-height: 1.75; 17 | padding: .5rem .5rem; 18 | vertical-align: top; 19 | } 20 | 21 | .input[type=button], 22 | .input[type=date], 23 | .input[type=datetime], 24 | .input[type=email], 25 | .input[type=file], 26 | .input[type=hidden], 27 | .input[type=image], 28 | .input[type=month], 29 | .input[type=number], 30 | .input[type=password], 31 | .input[type=range], 32 | .input[type=reset], 33 | .input[type=search], 34 | .input[type=submit], 35 | .input[type=tel], 36 | .input[type=text], 37 | .input[type=time], 38 | .input[type=url], 39 | .input[type=week],, 40 | .select, 41 | .textarea { 42 | border-color: $border-color; 43 | border-style: $border-style; 44 | border-width: $border-1; 45 | font-size: $base-font-size; 46 | height: auto; 47 | outline: none; 48 | padding: $padding; 49 | width: 100%; 50 | transition: border-color 200ms; 51 | 52 | &:focus { 53 | border-color: $midgrey; 54 | } 55 | } 56 | 57 | .input[required], 58 | .input:invalid, 59 | .input:valid { 60 | padding-right: 2.5rem; 61 | text-overflow: ellipsis; 62 | overflow: hidden; 63 | } 64 | 65 | .input:invalid, 66 | .input:valid { 67 | background-repeat: no-repeat; 68 | background-size: 8px; 69 | background-position: right 1rem center; 70 | } 71 | 72 | .input.textarea[required], 73 | .input.textarea:invalid, 74 | .input.textarea:valid { 75 | background-position: right 1rem top 1rem; 76 | } 77 | 78 | .input[required] { background-image: url('data:image/svg+xml;utf8,'); } 79 | .input:valid { background-image: url('data:image/svg+xml;utf8,'); } 80 | .input:focus:invalid { background-image: url('data:image/svg+xml;utf8,'); } 81 | 82 | .input[novalidate], 83 | .input.novalidate, 84 | .input.hide-validate-icon { 85 | background-image: none; 86 | padding-right: $padding; 87 | } 88 | 89 | .input-wrap, 90 | .radio-group, 91 | .checkbox-group, 92 | .fieldset { 93 | margin-bottom: $margin * 2; 94 | } 95 | 96 | .label { 97 | display: inline-block; 98 | margin-bottom: $margin / 2; 99 | } 100 | 101 | .fieldset { 102 | background-color: $silver; 103 | border: $border-1 $border-style $border-color; 104 | padding: $padding ($padding * 2); 105 | } 106 | 107 | //==================================================== 108 | // Checkbox/Radio 109 | //==================================================== 110 | 111 | .input[type=checkbox], 112 | .input[type=radio] { 113 | display: inline; 114 | } 115 | 116 | .radio-group, 117 | .checkbox-group { 118 | border-radius: $border-radius; 119 | background-color: $silver; 120 | padding: $padding ($padding * 1.5); 121 | } 122 | 123 | .radio-wrap, 124 | .checkbox-wrap { 125 | display: inline-block; 126 | margin-right: $margin; 127 | &:last-child { margin-right: 0; } 128 | 129 | @include small { 130 | display: block; 131 | } 132 | } 133 | 134 | .stacked .radio-wrap:not(:last-child), 135 | .stacked .checkbox-wrap:not(:last-child) { 136 | display: block; 137 | } 138 | 139 | //==================================================== 140 | // Inline input group 141 | //==================================================== 142 | 143 | .input-group { 144 | display: flex; 145 | flex-direction: row; 146 | align-items: center; 147 | } 148 | 149 | //==================================================== 150 | // Select Menus 151 | //==================================================== 152 | .select { 153 | background-image: url('data:image/svg+xml;utf8,'); 154 | background-repeat: no-repeat; 155 | background-position: right 1rem center; 156 | } 157 | 158 | //==================================================== 159 | // Color Input 160 | //==================================================== 161 | 162 | .input[type=color] { 163 | background-color: $white; 164 | cursor: pointer; 165 | outline: none; 166 | height: 50px; 167 | padding: 5px; 168 | @media only screen 169 | and (min-device-width: 320px) 170 | and (max-device-width: 480px) 171 | and (-webkit-min-device-pixel-ratio: 2) { 172 | padding: 1rem; 173 | } 174 | } 175 | 176 | input[type=color]::-webkit-color-swatch { 177 | border: none !important; 178 | } 179 | input[type=color]::-webkit-color-swatch-wrapper { 180 | padding: 0 !important; 181 | } 182 | 183 | //==================================================== 184 | // HTML Date Picker 185 | //==================================================== 186 | 187 | ::-webkit-calendar-picker-indicator, 188 | ::-webkit-calendar-picker-indicator:hover { 189 | background: transparent; 190 | color: $accent; 191 | padding: 0; 192 | padding-left: 1rem; 193 | } 194 | 195 | ::-webkit-datetime-edit-fields-wrapper { padding: 0; } 196 | ::-webkit-inner-spin-button { display: none; } 197 | 198 | //==================================================== 199 | // File Upload 200 | //==================================================== 201 | 202 | .input[type=file] { 203 | font-size: 0.75rem; 204 | background-color: $silver; 205 | display: block; 206 | } 207 | 208 | //==================================================== 209 | // Reset Button 210 | //==================================================== 211 | 212 | .input[type=reset] { 213 | background-color: $silver; 214 | border-color: $grey; 215 | color: $black; 216 | cursor: pointer; 217 | } 218 | --------------------------------------------------------------------------------