Last active
January 19, 2016 09:16
-
-
Save bvdputte/1529fa195f2be2ebb04f to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Alert | |
| // === | |
| .c-alert { | |
| padding: $unit | |
| // Success | |
| // --- | |
| &.c--success { | |
| border: 1px solid $success-color; | |
| color: $success-color; | |
| } | |
| // Error | |
| // --- | |
| &.c--error { | |
| border: 1px solid $error-color; | |
| color: $error-color; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Project-Wide Variables | |
| // === | |
| // | |
| // Edit these as needed. Some guidelines: | |
| // | |
| // - Names should be lowercase and dash-separated; | |
| // - Qualifiers should be added to the beginning of related variables: use | |
| // `$small-font-size`, not `$font-size-small`; | |
| // - Numeric scales should use increments of 10; these numbers are arbitrary and | |
| // should not map to actual values. If really necessary, additional values can | |
| // be added in between, e.g. $neutral-15 between 10 and 20. | |
| // Layout | |
| // --- | |
| // Basic unit for spacing and alignment; 6 to 12px recommended. Apply in whole | |
| // or half multiples. | |
| $unit: 10px; | |
| // Grid | |
| $susy: ( | |
| columns: 10, | |
| gutters: .25, | |
| math: fluid, | |
| ); | |
| // Typography | |
| // --- | |
| $font-family: 'Open Sans', sans-serif; | |
| $header-font-family: 'ProximaNova', sans-serif; | |
| $line-height: 20px; | |
| $font-size: 12px; | |
| $small-font-size: ($font-size) - 2; // 10px | |
| // Color palette | |
| // --- | |
| // Neutrals | |
| $neutral-20: #f6f8fa; | |
| $neutral-30: #dedede; | |
| $neutral-50: #999; | |
| $neutral-100: #000; // black | |
| // Brand colors | |
| $brand-color: #3168aa; // blue | |
| $light-brand-color: #4bbfeb; | |
| $dark-brand-color: #12406f; | |
| $pale-brand-color: #edf8fc; | |
| // Accent colors | |
| $accent-color: #c092d5; // purple | |
| // Success colors | |
| $success-color: #00c7ae; // green | |
| // Error colors | |
| $error-color: #cd1e3d; // red | |
| $secondary-error-color: #cfd847; // yellow-green | |
| // Gradients | |
| // --- | |
| // | |
| // Note: Spline provides a handy function for reversing a gradient, | |
| // e.g. `reverse-gradient($neutral-gradient)`; | |
| $neutral-gradient: linear-gradient(white, $neutral-30); | |
| $brand-gradient: linear-gradient($light-brand-color, $brand-color); | |
| // Appearance | |
| // --- | |
| // | |
| // 1. Side-bar-width should match sideNav width in sideNav | |
| // script options. 240px is a script default width (it fits us) | |
| $font-color: $neutral-100; | |
| $link-color: $brand-color; | |
| $active-link-color: $dark-brand-color; | |
| $text-reversed-color: #fff; | |
| $border-color: $neutral-30; | |
| $border-radius: 2px; | |
| $input-background-color: #fff; | |
| $disabled-input-color: $neutral-30; | |
| $disabled-input-background-color: $neutral-20; | |
| $horizontal-input-padding: $unit * 1.5; | |
| $vertical-input-padding: 8px; | |
| $form-height: 35px; | |
| $side-nav-border: 1px solid rgba($neutral-30, 0.3); | |
| $side-nav-width: 240px; // 1 | |
| // Icon Fonts Settings | |
| // --- | |
| // | |
| // These variables are used to add your icon font file to your CSS, and also to | |
| // help generate your icon component classes. | |
| $icon-font: 'iconFont' !default; | |
| $icon-font-path: '../fonts/icon-font' !default; | |
| $icon-list: ( | |
| angle-left: '\e600', | |
| angle-right: '\e601', | |
| caret-left: '\e602', | |
| caret-up: '\e603', | |
| caret-right: '\e604', | |
| caret-down: '\e605', | |
| sort: '\e606', | |
| attention-circle: '\e607', | |
| question-circle: '\e608', | |
| cross-circle: '\e609', | |
| info-circle: '\e610', | |
| check-circle: '\e611', | |
| check: '\e612', | |
| cross: '\e613', | |
| clock-update: '\e614', | |
| clock: '\e615', | |
| plus: '\e616', | |
| minus: '\e617', | |
| user: '\e618', | |
| group: '\e619', | |
| hamburger: '\e620', | |
| envelop: '\e621', | |
| image: '\e622', | |
| list: '\e623', | |
| calendar: '\e624', | |
| settings: '\e625', | |
| reload: '\e626', | |
| trash: '\e627', | |
| search: '\e628', | |
| sign-out: '\e629', | |
| location-arrow: '\e630', | |
| location-point: '\e631', | |
| activity: '\e632', | |
| bar-chart: '\e633', | |
| globe: '\e634', | |
| camera: '\e635', | |
| printer: '\e636', | |
| edit: '\e637', | |
| line-chart: '\e638', | |
| organization: '\e639', | |
| folder: '\e640', | |
| contact: '\e641', | |
| support: '\e642', | |
| bug: '\e643', | |
| cubes: '\e644', | |
| dashboard: '\e645', | |
| dollar: '\e646', | |
| rocket: '\e647', | |
| suitcase: '\e648', | |
| target: '\e649', | |
| ticket: '\e650', | |
| bell: '\e651', | |
| certificate: '\e652', | |
| drag: '\e653', | |
| refresh: '\e654', | |
| copy: '\e655', | |
| download: '\e656', | |
| assign: '\e657', | |
| unassign: '\e658' | |
| ) !default; | |
| // Layer (z-index) | |
| // --- | |
| // Organizes z-index usage by name. Values can be incremented/decremented | |
| // slightly as necessary. eg. $stage-layer + 1; | |
| $backdrop-layer: 1; // background | |
| $stage-layer: 10; // icon or other ui element | |
| $orchestra-layer: 100; // modal shade or similar | |
| $frontrow-layer: 1000; // modal dialog or similar | |
| // Shorthand | |
| // --- | |
| // | |
| // Quick ways to write properties that you re-use often. | |
| $border: 1px solid $border-color; | |
| $input-border: 2px solid $border-color; | |
| $special-border: 4px solid $neutral-20; | |
| $box-shadow: 0 0 4px rgba($neutral-100, 0.2); | |
| $input-padding: $vertical-input-padding $horizontal-input-padding; | |
| // Breakpoints | |
| // --- | |
| $mobile-small: max-width 320px; | |
| $mobile-medium-down: max-width 420px; | |
| $mobile-large-down: max-width 640px; | |
| $tablet-small-down: max-width 736px; | |
| $tablet-large-down: max-width 1024px; | |
| $tablet-large-up: min-width 1025px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| // Plugins | |
| var gulp = require('gulp'), | |
| sass = require('gulp-sass'); | |
| // Task | |
| gulp.task('sass', function () { | |
| gulp.src('src/assets/_scss/test/styles.scss') | |
| .pipe(sass.sync().on('error', sass.logError)) | |
| .pipe(gulp.dest("dist/assets/css")); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * SCSS master file | |
| * --- | |
| */ | |
| @import "variables"; | |
| @import "alert"; |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
gist for bug sass/node-sass#1281