├── index.js ├── readme.md ├── .travis.yml ├── base ├── _placeholders.scss ├── _icon_buttons.scss ├── _hints.scss ├── _grid.scss ├── _icons.scss ├── _typography.scss ├── _tables.scss ├── _mixins.scss ├── _variables.scss ├── _forms.scss └── _buttons.scss ├── gosheets.scss ├── package.json ├── LICENSE └── .sass-lint.yml /index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # goSheets 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 8 4 | before_install: 5 | - npm install -g sass 6 | script: 7 | - npm test 8 | -------------------------------------------------------------------------------- /base/_placeholders.scss: -------------------------------------------------------------------------------- 1 | // Placeholder classes will honor the cascade 2 | // in the order that they are defined and imported. 3 | // Not from the place in which they are extended to. 4 | 5 | %element--no-margin { 6 | margin: 0; 7 | } 8 | -------------------------------------------------------------------------------- /gosheets.scss: -------------------------------------------------------------------------------- 1 | @import './base/variables'; 2 | @import './base/mixins'; 3 | @import './base/grid'; 4 | @import './base/typography'; 5 | @import './base/icons'; 6 | @import './base/forms'; 7 | @import './base/buttons'; 8 | @import './base/icon_buttons'; 9 | @import './base/tables'; 10 | @import './base/hints'; 11 | @import './base/placeholders'; 12 | -------------------------------------------------------------------------------- /base/_icon_buttons.scss: -------------------------------------------------------------------------------- 1 | .go-icon-button { 2 | @include transition(background-color); 3 | 4 | border: 0; 5 | border-radius: $global-radius--round; 6 | color: $base-dark; 7 | cursor: pointer; 8 | display: inline-flex; 9 | outline-color: $theme-light-border; 10 | padding: .5rem; 11 | 12 | &:hover { 13 | background-color: $theme-light-bg-hover; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tangoe/gosheets", 3 | "version": "1.0.0", 4 | "author": "Tangoe Mobile", 5 | "homepage": "https://github.com/mobi/gosheets#readme", 6 | "description": "Global interface styles for the goDesign system.", 7 | "main": "index.js", 8 | "style": "gosheets.scss", 9 | "license": "MIT", 10 | "scripts": { 11 | "test": "sass gosheets.scss gosheets.css" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/mobi/gosheets.git" 16 | }, 17 | "bugs": { 18 | "url": "https://github.com/mobi/gosheets/issues" 19 | }, 20 | "keywords": [ 21 | "css", 22 | "sass", 23 | "scss" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /base/_hints.scss: -------------------------------------------------------------------------------- 1 | .go-hint { 2 | font-size: .75rem; 3 | font-style: italic; 4 | line-height: 1rem; 5 | margin: $column-gutter--half 0; 6 | padding-bottom: $column-gutter--quarter; 7 | padding-left: $column-gutter--three-quarters; 8 | padding-top: $column-gutter--quarter; 9 | position: relative; 10 | 11 | &::before { 12 | background: $theme-light-border; 13 | border-radius: $global-radius; 14 | bottom: 0; 15 | content: ''; 16 | left: 0; 17 | position: absolute; 18 | top: 0; 19 | width: 4px; 20 | } 21 | 22 | &:last-child { 23 | margin-bottom: 0; 24 | } 25 | } 26 | 27 | .go-hint--error { 28 | padding-top: 0; 29 | 30 | &::before { 31 | background-image: $ui-color-negative-gradient; 32 | } 33 | } 34 | 35 | .go-hint__status { 36 | display: block; 37 | font-size: .5rem; 38 | font-style: normal; 39 | font-weight: $weight-bold; 40 | text-transform: uppercase; 41 | } 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Tangoe 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /base/_grid.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | .go-container { 6 | display: flex; 7 | flex-wrap: wrap; 8 | margin: 0 (-$column-gutter); 9 | } 10 | 11 | .go-column { 12 | flex: 1 1 auto; 13 | padding: 0 $column-gutter $column-gutter--double; 14 | } 15 | 16 | @each $name, $size in $column-sizes { 17 | .go-column--#{$name} { 18 | flex-basis: percentage($size); 19 | width: percentage($size); 20 | 21 | @if ($name <= 25) { 22 | @extend %tablet__flex-basis--50; 23 | @extend %mobile__flex-basis--100; 24 | } @else { 25 | @extend %tablet__flex-basis--100; 26 | } 27 | 28 | } 29 | } 30 | 31 | %mobile__flex-basis--100 { 32 | @media (max-width: $breakpoint_mobile) { 33 | flex-basis: 100%; 34 | } 35 | } 36 | 37 | %tablet__flex-basis--50 { 38 | @media (max-width: $breakpoint_tablet) { 39 | flex-basis: 50%; 40 | } 41 | } 42 | 43 | %tablet__flex-basis--100 { 44 | @media (max-width: $breakpoint_tablet) { 45 | flex-basis: 100%; 46 | } 47 | } 48 | 49 | // Modifiers 50 | 51 | .go-container--no-wrap { 52 | flex-wrap: nowrap; 53 | } 54 | 55 | .go-container--align-center { 56 | align-items: center; 57 | } 58 | 59 | .go-column--no-padding { 60 | padding-bottom: 0; 61 | } 62 | 63 | .go-column--no-grow { 64 | flex-grow: 0; 65 | } 66 | 67 | .go-column--collapse { 68 | flex-basis: auto; 69 | flex-grow: 0; 70 | width: auto; 71 | } 72 | -------------------------------------------------------------------------------- /base/_icons.scss: -------------------------------------------------------------------------------- 1 | $icon-sizes: (small: 1rem, medium: 1.5rem, large: 2rem); 2 | 3 | // This .go-icon selector styles are borrowed verbatim from the material 4 | // icons documentation and applied to our own bem style block class. 5 | .go-icon { 6 | // sass-lint:disable-block no-vendor-prefixes property-sort-order 7 | font-family: 'Material Icons'; 8 | font-weight: normal; 9 | font-style: normal; 10 | display: inline-block; 11 | line-height: 1; 12 | text-transform: none; 13 | letter-spacing: normal; 14 | word-wrap: normal; 15 | white-space: nowrap; 16 | direction: ltr; 17 | 18 | // Support for all WebKit browsers. 19 | -webkit-font-smoothing: antialiased; 20 | 21 | // Support for Safari and Chrome. 22 | text-rendering: optimizeLegibility; 23 | 24 | // Support for Firefox. 25 | -moz-osx-font-smoothing: grayscale; 26 | 27 | // Support for IE. 28 | font-feature-settings: 'liga'; 29 | } 30 | 31 | .go-icon--light { 32 | @include fill-text-background($color: $theme-light-border); 33 | } 34 | 35 | .go-icon--negative { 36 | @include fill-text-background($ui-color-negative-gradient, $ui-color-negative); 37 | } 38 | 39 | .go-icon--neutral { 40 | @include fill-text-background($ui-color-neutral-gradient, $ui-color-neutral); 41 | } 42 | 43 | .go-icon--positive { 44 | @include fill-text-background($ui-color-positive-gradient, $ui-color-positive); 45 | } 46 | 47 | @each $name, $size in $icon-sizes { 48 | .go-icon--#{$name} { 49 | font-size: $size; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /base/_typography.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: $base-font-stack; 3 | } 4 | 5 | .go-heading-1 { 6 | font-family: $heading-font-stack; 7 | font-size: 6rem; 8 | font-weight: $weight-light; 9 | letter-spacing: -1.5pt; 10 | margin-bottom: $column-gutter--quarter; 11 | } 12 | 13 | .go-heading-2 { 14 | font-family: $heading-font-stack; 15 | font-size: 3.75rem; 16 | font-weight: $weight-light; 17 | letter-spacing: -.5pt; 18 | margin-bottom: $column-gutter--quarter; 19 | } 20 | 21 | .go-heading-3 { 22 | font-family: $heading-font-stack; 23 | font-size: 3rem; 24 | font-weight: $weight-regular; 25 | letter-spacing: 0; 26 | line-height: 1.2; 27 | margin-bottom: $column-gutter--quarter; 28 | } 29 | 30 | .go-heading-4 { 31 | font-family: $heading-font-stack; 32 | font-size: 2.125rem; 33 | font-weight: $weight-regular; 34 | letter-spacing: .25pt; 35 | line-height: 1.2; 36 | margin-bottom: $column-gutter--quarter; 37 | } 38 | 39 | .go-heading-5 { 40 | font-family: $heading-font-stack; 41 | font-size: 1.5rem; 42 | font-weight: $weight-bold; 43 | letter-spacing: 0; 44 | line-height: 1.2; 45 | margin-bottom: $column-gutter--half; 46 | } 47 | 48 | .go-heading-6 { 49 | font-family: $heading-font-stack; 50 | font-size: .875rem; 51 | font-weight: $weight-bold; 52 | letter-spacing: 1pt; 53 | line-height: 1.3; 54 | margin-bottom: $column-gutter--half; 55 | } 56 | 57 | .go-body-copy { 58 | font-size: 1rem; 59 | letter-spacing: .5pt; 60 | line-height: 1.5; 61 | margin-bottom: $column-gutter--three-quarters; 62 | } 63 | 64 | .go-heading--no-margin, 65 | .go-body-copy--no-margin { 66 | @extend %element--no-margin; 67 | } 68 | 69 | .go-link { 70 | border-bottom: 1px solid; 71 | color: $theme-light-color; 72 | display: inline-block; 73 | transition: $global-transition-duration $global-transition-timing; 74 | 75 | &:active, 76 | &:focus, 77 | &:visited { 78 | color: $theme-light-color; 79 | } 80 | 81 | &:hover { 82 | color: $ui-color-neutral; 83 | } 84 | } 85 | 86 | .go-ordered-list { 87 | list-style: decimal; 88 | margin: 0 $column-gutter $column-gutter--three-quarters; 89 | padding-left: 1rem; 90 | } 91 | 92 | .go-ordered-list__item { 93 | line-height: 1.5; 94 | margin: $column-gutter--half 0; 95 | } 96 | -------------------------------------------------------------------------------- /.sass-lint.yml: -------------------------------------------------------------------------------- 1 | options: 2 | formatter: stylish 3 | files: 4 | include: '**/*.s+(a|c)ss' 5 | rules: 6 | # Extends 7 | extends-before-mixins: 1 8 | extends-before-declarations: 1 9 | placeholder-in-extend: 1 10 | 11 | # Mixins 12 | mixins-before-declarations: 1 13 | 14 | # Line Spacing 15 | one-declaration-per-line: 1 16 | empty-line-between-blocks: 1 17 | single-line-per-selector: 1 18 | 19 | # Disallows 20 | no-attribute-selectors: 0 21 | no-color-hex: 0 22 | no-color-keywords: 1 23 | no-color-literals: 1 24 | no-combinators: 0 25 | no-css-comments: 1 26 | no-debug: 1 27 | no-disallowed-properties: 0 28 | no-duplicate-properties: 1 29 | no-empty-rulesets: 1 30 | no-extends: 0 31 | no-ids: 1 32 | no-important: 1 33 | no-invalid-hex: 1 34 | no-mergeable-selectors: 1 35 | no-misspelled-properties: 1 36 | no-qualifying-elements: 1 37 | no-trailing-whitespace: 1 38 | no-trailing-zero: 1 39 | no-transition-all: 1 40 | no-universal-selectors: 0 41 | no-url-domains: 1 42 | no-url-protocols: 1 43 | no-vendor-prefixes: 1 44 | no-warn: 1 45 | property-units: 0 46 | 47 | # Nesting 48 | declarations-before-nesting: 1 49 | force-attribute-nesting: 1 50 | force-element-nesting: 1 51 | force-pseudo-nesting: 0 52 | 53 | # Name Formats 54 | class-name-format: 55 | - 1 56 | - convention: hyphenatedbem 57 | function-name-format: 58 | - 1 59 | - convention: hyphenatedbem 60 | id-name-format: 61 | - 1 62 | - convention: hyphenatedbem 63 | mixin-name-format: 64 | - 1 65 | - convention: hyphenatedbem 66 | placeholder-name-format: 67 | - 1 68 | - convention: hyphenatedbem 69 | variable-name-format: 70 | - 1 71 | - convention: hyphenatedbem 72 | 73 | # Style Guide 74 | attribute-quotes: 1 75 | bem-depth: 1 76 | border-zero: 1 77 | brace-style: 1 78 | clean-import-paths: 1 79 | empty-args: 1 80 | hex-length: 1 81 | hex-notation: 82 | - 1 83 | - style: uppercase 84 | indentation: 1 85 | leading-zero: 1 86 | max-line-length: 0 87 | max-file-line-count: 0 88 | nesting-depth: 1 89 | property-sort-order: 1 90 | pseudo-element: 1 91 | quotes: 1 92 | shorthand-values: 1 93 | url-quotes: 1 94 | variable-for-property: 95 | - 1 96 | - properties: 97 | - 'z-index' 98 | - 'color' 99 | - 'background-color' 100 | - 'border-color' 101 | - 'border-radius' 102 | - 'box-shadow' 103 | zero-unit: 1 104 | 105 | # Inner Spacing 106 | space-after-comma: 1 107 | space-before-colon: 1 108 | space-after-colon: 1 109 | space-before-brace: 1 110 | space-before-bang: 1 111 | space-after-bang: 1 112 | space-between-parens: 1 113 | space-around-operator: 1 114 | 115 | # Final Items 116 | trailing-semicolon: 1 117 | final-newline: 1 118 | -------------------------------------------------------------------------------- /base/_tables.scss: -------------------------------------------------------------------------------- 1 | .go-table { 2 | max-width: 100%; 3 | overflow-x: auto; 4 | } 5 | 6 | .go-table__table { 7 | border-spacing: 0; 8 | color: $theme-light-color; 9 | width: 100%; 10 | } 11 | 12 | .go-table__head-column { 13 | @include transition(background); 14 | 15 | color: $theme-light-color; 16 | cursor: pointer; 17 | font-size: .75rem; 18 | font-weight: bold; 19 | letter-spacing: 1pt; 20 | padding: 1rem 1.25rem; 21 | position: relative; 22 | text-align: left; 23 | text-transform: uppercase; 24 | white-space: nowrap; 25 | 26 | &:hover { 27 | background: $theme-light-app-bg; 28 | } 29 | 30 | &:first-of-type { 31 | border-top-left-radius: $global-radius; 32 | } 33 | 34 | &:last-of-type { 35 | border-top-right-radius: $global-radius; 36 | } 37 | } 38 | 39 | .go-table__head-content { 40 | display: flex; 41 | line-height: 1; 42 | } 43 | 44 | .go-table__sort-icon { 45 | display: inline-block; 46 | height: .75rem; 47 | padding-left: .25rem; 48 | } 49 | 50 | .go-table__body-column { 51 | border-bottom: 1px solid $theme-light-app-bg; 52 | font-size: .875rem; 53 | padding: .875rem 1.25rem; 54 | 55 | .go-table__body-row:first-child & { 56 | border-top: 1px solid $theme-light-app-bg; 57 | } 58 | 59 | .go-table__body-row:last-child & { 60 | border-bottom: 0; 61 | } 62 | } 63 | 64 | .go-table-toolbar { 65 | align-items: center; 66 | display: flex; 67 | font-size: 0.875rem; 68 | justify-content: space-between; 69 | padding: 1rem 1.25rem; 70 | 71 | @media (max-width: $breakpoint-mobile) { 72 | flex-wrap: wrap; 73 | } 74 | } 75 | 76 | .go-table-toolbar__page-controls { 77 | align-items: center; 78 | display: flex; 79 | 80 | @media (max-width: $breakpoint-mobile) { 81 | justify-content: space-between; 82 | margin-top: 1rem; 83 | width: 100%; 84 | } 85 | } 86 | 87 | .go-table-toolbar__button { 88 | @include transition(background); 89 | 90 | align-items: center; 91 | background: transparent; 92 | border: 0; 93 | border-radius: 50%; 94 | cursor: pointer; 95 | display: flex; 96 | font-size: 1rem; 97 | margin: 0 .25rem; 98 | outline: none; 99 | padding: .5rem; 100 | user-select: none; 101 | 102 | &:active, 103 | &:focus, 104 | &:hover { 105 | background: $theme-light-bg-hover; 106 | } 107 | } 108 | 109 | .go-table-toolbar__button--disabled { 110 | color: lighten($theme-light-color, 40); 111 | cursor: not-allowed; 112 | pointer-events: none; 113 | 114 | &:active, 115 | &:focus, 116 | &:hover { 117 | background: none; 118 | } 119 | } 120 | 121 | .go-table-toolbar__icon { 122 | height: 1rem; 123 | } 124 | 125 | .go-table-toolbar__select { 126 | font-size: 0.875rem; 127 | height: 2rem; 128 | } 129 | 130 | .go-table-toolbar__label { 131 | display: inline-block; 132 | font-weight: normal; 133 | padding: 0 0.75rem; 134 | } 135 | -------------------------------------------------------------------------------- /base/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin go-button-mutator( 2 | $dark-modifier: false, 3 | $dark-theme: false, 4 | $from: $theme-light-border, 5 | $gradient: null, 6 | $hover-background: false, 7 | $loading-modifier: false, 8 | $to: $theme-light-border 9 | ) { 10 | $color-gradient: if($gradient, $gradient, linear-gradient(to bottom, $from, $to)); 11 | $dark-gradient: linear-gradient($theme-dark-bg, $theme-dark-bg); 12 | $light-gradient: linear-gradient($theme-light-bg, $theme-light-bg); 13 | $selected-gradient: if($dark-theme, $dark-gradient, $light-gradient); 14 | 15 | background-image: $selected-gradient, $color-gradient; 16 | 17 | @if ($dark-modifier) { 18 | &.go-button--dark { 19 | background-image: $dark-gradient, $color-gradient; 20 | } 21 | } 22 | 23 | @if (type-of($loading-modifier) == color) { 24 | &.go-button--loading::before { 25 | background: linear-gradient(to right, transparent, $loading-modifier, transparent); 26 | background-size: 1000px 100%; 27 | } 28 | } 29 | 30 | @if (type-of($hover-background) == color) { 31 | &:hover:not(.go-button--loading)::before { 32 | background: $hover-background; 33 | } 34 | } 35 | } 36 | 37 | @mixin fill-text-background($fill: null, $color: $base-dark) { 38 | // sass-lint:disable-block no-vendor-prefixes property-sort-order 39 | color: $color; 40 | 41 | @supports (background-clip: text) or (-webkit-background-clip: text) { 42 | @if ($fill) { 43 | background: $fill; 44 | background-clip: text; 45 | -webkit-background-clip: text; 46 | -webkit-text-fill-color: transparent; 47 | } @else { 48 | background: transparent; 49 | background-clip: border-box; 50 | -webkit-background-clip: border-box; 51 | -webkit-text-fill-color: currentcolor; 52 | } 53 | } 54 | } 55 | 56 | @mixin disabled-input { 57 | background: { 58 | color: $theme-light-app-bg; 59 | image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAqCAYAAADS4VmSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYdJREFUeNrsV+1tgzAQLSgDeIM2G6QbkAnICHSCigmaTICYIGzQMEHYoBmBbsAG7bv2IiHLxh848McnnSzL+O7d+e7ZJE+O0ratwJBBd9LSDdrleT642EscHL9g+IAWhk8b6AlA+mAA4PyA4QwVlngpC28AcZkNAM4Ldu4jBKLxBgDndM5fmggpum+eP0MPmgy9AsRN52NjiOBTc8alXGwAW2KoFDVCNrbOGdCknorraMjakYvV6ijSCVu5NO9Mzv82/X/TGWxZAcikee1QfLXBlhUAIUV2sfWu+FY4AWDSWURSTQT9qgCWlNUBJFLfj89e7uWTo+2p/f2dFxK+Xq+K6/XRQvS8T5k+dytkn3xWqcX9/kgpYhdEABHAZsbegcnk3tNiyQwQjW5Bp3tSfvM1XncBqPjHcU/HTlXviOvU6ydUBmrPtWAABs+1YACE51owAO+ea8HaMEOxncd/R/ymqFwL0LcLgvLAHCISPhHHuyACiABUAJoV/TcEoBwRytJ/RuWvAAMAsBxvzn+b8C4AAAAASUVORK5CYII='); 60 | position: right $column-gutter top .8rem; 61 | repeat: no-repeat; 62 | size: auto $column-gutter--three-quarters; 63 | } 64 | cursor: not-allowed; 65 | } 66 | 67 | @mixin transition( 68 | $property: all, 69 | $duration: $global-transition-duration, 70 | $timing: $global-transition-timing 71 | ) { 72 | transition: { 73 | duration: $global-transition-duration; 74 | property: $property; 75 | timing-function: $timing; 76 | }; 77 | } 78 | -------------------------------------------------------------------------------- /base/_variables.scss: -------------------------------------------------------------------------------- 1 | // UI Details 2 | // ---------------------------------------------------------------------------- 3 | 4 | // Presentational 5 | $global-radius: 4px; 6 | $global-radius--round: 100%; 7 | $global-transition-timing: cubic-bezier(.25, .8, .25, 1); 8 | $global-transition-duration: .25s; 9 | $global-box-shadow: 0 3px 6px rgba(0, 0, 0, .2); 10 | 11 | // Structural 12 | $column-gutter: 1rem; 13 | $column-gutter--double: $column-gutter * 2; 14 | $column-gutter--half: $column-gutter / 2; 15 | $column-gutter--quarter: $column-gutter / 4; 16 | $column-gutter--three-quarters: $column-gutter * .75; 17 | $column-sizes: ( 18 | 25: 1 / 4, 19 | 33: 1 / 3, 20 | 50: 2 / 4, 21 | 66: 2 / 3, 22 | 75: 3 / 4, 23 | 100: 1 24 | ); 25 | 26 | // Breakpoints 27 | $breakpoint-mobile: 768px; 28 | $breakpoint-tablet: 1024px; 29 | 30 | // Typography 31 | $weight-light: 300; 32 | $weight-regular: 400; 33 | $weight-bold: 700; 34 | 35 | $base-font-stack: 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif; 36 | $heading-font-stack: 'Roboto', 'Bryant', 'Helvetica', 'Arial', sans-serif; 37 | 38 | // Colors 39 | // ---------------------------------------------------------------------------- 40 | 41 | // Base Colors 42 | $base-dark: #313536; 43 | $base-dark-secondary: #202626; 44 | $base-light: #FFF; 45 | $base-light-secondary: #B1B1B1; 46 | $base-primary: #65B360; 47 | 48 | // Light Theme 49 | $theme-light-app-bg: #F0F0F0; 50 | $theme-light-bg: $base-light; 51 | $theme-light-bg-active: darken($base-light, 4); 52 | $theme-light-bg-hover: darken($base-light, 7); 53 | $theme-light-color: $base-dark; 54 | $theme-light-color-hover: lighten($base-dark, 20); 55 | $theme-light-border: $base-light-secondary; 56 | 57 | // Dark Theme 58 | $theme-dark-bg: $base-dark; 59 | $theme-dark-bg-active: darken($base-dark, 4); 60 | $theme-dark-bg-hover: darken($base-dark, 7); 61 | $theme-dark-color: $base-light; 62 | $theme-dark-text-color: mix($base-light, $base-light-secondary); 63 | $theme-dark-color-hover: darken($base-light, 20); 64 | $theme-dark-border: $base-dark-secondary; 65 | 66 | // UI Colors 67 | // Negative Colors - 68 | // These are used to portray dangerous actions, error states, or other negative states in the interface 69 | $ui-color-negative: #DD4C4C; 70 | $ui-color-negative-active: #BA3F3F; 71 | $ui-color-negative-hover: #A83939; 72 | $ui-color-negative-dark: darken($ui-color-negative-hover, 10%); 73 | $ui-color-negative-darker: darken($ui-color-negative-dark, 5%); 74 | $ui-color-negative-gradient: linear-gradient(to bottom, $ui-color-negative, $ui-color-negative-hover); 75 | $ui-background-negative: rgba($ui-color-negative, .1); 76 | 77 | // Neutral Colors - 78 | // These are used to portray informational actions, states, or other generally neutral states in the interface 79 | $ui-color-neutral: #8A4EDE; 80 | $ui-color-neutral-active: #7F47CC; 81 | $ui-color-neutral-hover: #7441BA; 82 | $ui-color-neutral-gradient: linear-gradient(to bottom, $ui-color-neutral, $ui-color-neutral-hover); 83 | $ui-background-neutral: rgba($ui-color-neutral, .1); 84 | 85 | // Positive Colors - 86 | // These are used to portray good actions, states, or other generally positive states in the interface 87 | $ui-color-positive: #4EDED2; 88 | $ui-color-positive-active: #47CCC1; 89 | $ui-color-positive-hover: #41BAB0; 90 | $ui-color-positive-gradient: linear-gradient(to bottom, $ui-color-positive, $ui-color-positive-hover); 91 | $ui-background-positive: rgba($ui-color-positive, .2); 92 | -------------------------------------------------------------------------------- /base/_forms.scss: -------------------------------------------------------------------------------- 1 | $input--disabled-background: rgba($base-dark-secondary, .4); 2 | 3 | .go-form__fieldset { 4 | border: 1px solid $theme-light-border; 5 | border-radius: $global-radius; 6 | margin-bottom: $column-gutter--double; 7 | padding: $column-gutter; 8 | 9 | &:disabled { 10 | background: $theme-light-app-bg; 11 | cursor: not-allowed; 12 | 13 | label, 14 | .go-form__label { 15 | cursor: not-allowed; 16 | } 17 | } 18 | } 19 | 20 | .go-form--dark .go-form__fieldset, 21 | .go-form__fieldset--dark { 22 | &:disabled { 23 | background: $base-dark-secondary; 24 | } 25 | } 26 | 27 | .go-form__fieldset--error { 28 | border-color: $ui-color-negative; 29 | } 30 | 31 | .go-form__legend { 32 | margin-left: -($column-gutter--half); 33 | padding: 0 $column-gutter--half; 34 | text-transform: uppercase; 35 | } 36 | 37 | .go-form--dark .go-form__legend, 38 | .go-form__legend--dark { 39 | color: $theme-dark-color; 40 | } 41 | 42 | .go-form__label { 43 | color: $theme-light-color; 44 | display: block; 45 | font-family: $heading-font-stack; 46 | font-size: .875rem; 47 | font-weight: $weight-bold; 48 | letter-spacing: 1pt; 49 | line-height: 1.3; 50 | padding-bottom: $column-gutter--three-quarters; 51 | } 52 | 53 | .go-form--dark .go-form__label, 54 | .go-form__label--dark { 55 | color: $theme-dark-color; 56 | } 57 | 58 | .go-form__label--inline { 59 | display: inline-block; 60 | } 61 | 62 | .go-form__input { 63 | background: transparent; 64 | border: 1px solid $theme-light-border; 65 | border-radius: $global-radius; 66 | font-family: inherit; 67 | font-size: 1rem; 68 | letter-spacing: .5pt; 69 | line-height: 1.5; 70 | outline-color: $ui-color-positive; 71 | padding: $column-gutter--half $column-gutter--three-quarters; 72 | resize: vertical; 73 | width: 100%; 74 | 75 | &:-ms-input-placeholder { 76 | color: $theme-light-border; 77 | } 78 | 79 | &::placeholder { 80 | color: $theme-light-border; 81 | } 82 | 83 | &:disabled { 84 | @include disabled-input; 85 | } 86 | } 87 | 88 | .go-form__checkbox { 89 | margin-bottom: $column-gutter--three-quarters; 90 | margin-right: $column-gutter--three-quarters; 91 | width: auto; 92 | 93 | &:disabled { 94 | cursor: not-allowed; 95 | } 96 | } 97 | 98 | .go-form__select { 99 | -webkit-appearance: menulist; 100 | appearance: menulist; 101 | border: 1px solid $theme-light-border; 102 | font-size: 1rem; 103 | height: 1.5rem + $column-gutter; 104 | letter-spacing: .5pt; 105 | line-height: 1.5; 106 | outline-color: $ui-color-positive; 107 | 108 | &:disabled { 109 | @include disabled-input; 110 | } 111 | } 112 | 113 | .go-form--dark .go-form__input, 114 | .go-form--dark .go-form__select, 115 | .go-form__input--dark, 116 | .go-form__select--dark { 117 | background-color: transparent; 118 | color: $theme-dark-color; 119 | 120 | &:disabled { 121 | background-color: $input--disabled-background; 122 | border-color: $base-dark-secondary; 123 | color: $theme-light-border; 124 | } 125 | } 126 | 127 | .go-form__select--no-margin, 128 | .go-form__input--no-margin, 129 | .go-form__fieldset--no-margin { 130 | @extend %element--no-margin; 131 | } 132 | 133 | .go-form__select--error, 134 | .go-form__input--error { 135 | border-color: $ui-color-negative; 136 | outline-color: $ui-color-negative-active; 137 | } 138 | -------------------------------------------------------------------------------- /base/_buttons.scss: -------------------------------------------------------------------------------- 1 | $button__border-width: 4px; 2 | $button__background--hover: rgba($theme-light-border, .1); 3 | $button__background--disabled: rgba($theme-light-border, .3); 4 | $button__background--loading: rgba($theme-light-border, .4); 5 | 6 | .go-button { 7 | @include go-button-mutator; 8 | 9 | background-origin: padding-box, border-box; // This is important 10 | background-repeat: no-repeat; // This is important 11 | border: $button__border-width solid transparent; 12 | border-radius: $global-radius; 13 | color: $base-dark; 14 | cursor: pointer; 15 | display: inline-block; 16 | font-family: $heading-font-stack; 17 | font-size: .875rem; 18 | letter-spacing: .015rem; 19 | line-height: 1rem; 20 | outline-color: $theme-light-border; 21 | outline-offset: -2px; 22 | padding: $column-gutter--half $column-gutter; 23 | position: relative; 24 | text-decoration: none; 25 | text-transform: uppercase; 26 | transition: color $global-transition-duration $global-transition-timing; 27 | 28 | &::before { 29 | border: ($button__border-width / 2) solid $base-light; 30 | border-radius: $global-radius - 1; 31 | bottom: -1px; 32 | content: ''; 33 | left: -1px; 34 | position: absolute; 35 | right: -1px; 36 | top: -1px; 37 | transition: background $global-transition-duration $global-transition-timing; 38 | } 39 | 40 | &:hover, 41 | &:disabled { 42 | color: $base-dark-secondary; 43 | } 44 | 45 | &:hover:not(.go-button--loading)::before { 46 | background: $button__background--hover; 47 | } 48 | 49 | &:disabled:not(.go-button--loading) { 50 | @include go-button-mutator; 51 | 52 | cursor: not-allowed; 53 | 54 | &:hover::before, 55 | &::before { 56 | background: $button__background--disabled; 57 | } 58 | 59 | .go-button__icon { 60 | @include fill-text-background($color: $theme-light-border); 61 | } 62 | } 63 | 64 | .go-button__icon { 65 | font-size: 1.25rem; 66 | line-height: 1rem; 67 | margin-bottom: -.2rem; 68 | margin-left: -$column-gutter--half; 69 | margin-right: $column-gutter--quarter; 70 | margin-top: -.2rem; 71 | padding: .2rem 0; 72 | vertical-align: top; 73 | } 74 | } 75 | 76 | .go-button--dark { 77 | @include go-button-mutator($dark-theme: true); 78 | 79 | color: $theme-dark-text-color; 80 | 81 | &::before { 82 | border-color: $theme-dark-bg; 83 | } 84 | 85 | &:hover, 86 | &:disabled { 87 | color: $base-light; 88 | } 89 | 90 | &:disabled:not(.go-button--loading) { 91 | @include go-button-mutator( 92 | $dark-theme: true, 93 | $from: $base-dark-secondary, 94 | $to: $base-dark-secondary 95 | ); 96 | 97 | &:hover::before, 98 | &::before { 99 | background: rgba($base-dark-secondary, .4); 100 | } 101 | } 102 | } 103 | 104 | .go-button--loading { 105 | color: $base-dark-secondary; 106 | cursor: wait; 107 | 108 | &::before { 109 | animation: background-animation 1.75s linear infinite; 110 | background: linear-gradient(to right, transparent, $button__background--loading, transparent); 111 | background-position: -1000px 0; 112 | background-repeat: repeat-x; 113 | background-size: 1000px 100%; 114 | } 115 | } 116 | 117 | .go-button--negative { 118 | @include go-button-mutator( 119 | $dark-modifier: true, 120 | $gradient: $ui-color-negative-gradient, 121 | $hover-background: $ui-background-negative, 122 | $loading-modifier: rgba($ui-color-negative, .2) 123 | ); 124 | 125 | outline-color: $ui-color-negative-active; 126 | } 127 | 128 | .go-button--neutral { 129 | @include go-button-mutator( 130 | $dark-modifier: true, 131 | $gradient: $ui-color-neutral-gradient, 132 | $hover-background: $ui-background-neutral, 133 | $loading-modifier: rgba($ui-color-neutral, .2) 134 | ); 135 | 136 | outline-color: $ui-color-neutral-active; 137 | } 138 | 139 | .go-button--positive { 140 | @include go-button-mutator( 141 | $dark-modifier: true, 142 | $gradient: $ui-color-positive-gradient, 143 | $hover-background: $ui-background-positive, 144 | $loading-modifier: rgba($ui-color-positive, .3) 145 | ); 146 | 147 | outline-color: $ui-color-positive-active; 148 | } 149 | 150 | @keyframes background-animation { 151 | from { 152 | background-position: 0 0; 153 | } 154 | 155 | to { 156 | background-position: 1000px 0; 157 | } 158 | } 159 | 160 | .go-button-group { 161 | display: inline-flex; 162 | justify-content: flex-start; 163 | list-style: none; 164 | margin: 0; 165 | } 166 | 167 | .go-button-group__item { 168 | margin-right: 0.5rem; 169 | 170 | &:last-child { 171 | margin-right: 0; 172 | } 173 | } 174 | --------------------------------------------------------------------------------