From 5e0e71aa1c8e2237beb10fbe0ba62fdae0f9dd08 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Tue, 19 Sep 2017 21:19:39 +0200 Subject: [PATCH] SASS: Set all config variables as !default So other Pillar apps can override them --- src/styles/_config.sass | 195 ++++++++++++++++++++-------------------- 1 file changed, 97 insertions(+), 98 deletions(-) diff --git a/src/styles/_config.sass b/src/styles/_config.sass index 29f51662..ff80821c 100644 --- a/src/styles/_config.sass +++ b/src/styles/_config.sass @@ -1,130 +1,129 @@ -$color-background: #eaebec -$color-background-light: lighten($color-background, 5%) -$color-background-dark: darken($color-background, 5%) -$color-background-nav: hsl(hue($color-background), 25%, 35%) +$color-background: #eaebec !default +$color-background-light: lighten($color-background, 5%) !default +$color-background-dark: darken($color-background, 5%) !default +$color-background-nav: hsl(hue($color-background), 25%, 35%) !default -$color-background-nav-light: hsl(hue($color-background), 25%, 45%) -$color-background-nav-dark: hsl(hue($color-background), 25%, 15%) +$color-background-nav-light: hsl(hue($color-background), 25%, 45%) !default +$color-background-nav-dark: hsl(hue($color-background), 25%, 15%) !default -$color-background-active: #dff5f6 // background colour for active items. -$color-background-active-dark: hsl(hue($color-background-active), 50%, 50%) +$color-background-active: #dff5f6 !default +$color-background-active-dark: hsl(hue($color-background-active), 50%, 50%) !default -$font-body: 'Roboto' -$font-headings: 'Lato' -$font-size: 14px +$font-body: 'Roboto' !default +$font-headings: 'Lato' !default +$font-size: 14px !default -$color-text: #4d4e53 +$color-text: #4d4e53 !default -$color-text-dark: $color-text -$color-text-dark-primary: #646469 // rgba($color-text, .87) -$color-text-dark-secondary: #9E9FA2 // rgba($color-text, .54) -$color-text-dark-hint: #BBBBBD // rgba($color-text, .38) +$color-text-dark: $color-text !default +$color-text-dark-primary: #646469 !default +$color-text-dark-secondary: #9E9FA2 !default +$color-text-dark-hint: #BBBBBD !default -$color-text-light: white -$color-text-light-primary: rgba($color-text-light, .87) -$color-text-light-secondary: rgba($color-text-light, .54) -$color-text-light-hint: rgba($color-text-light, .38) +$color-text-light: white !default +$color-text-light-primary: rgba($color-text-light, .87) !default +$color-text-light-secondary: rgba($color-text-light, .54) !default +$color-text-light-hint: rgba($color-text-light, .38) !default -$color-primary: #68B3C8 -$color-primary-light: hsl(hue($color-primary), 30%, 90%) -$color-primary-dark: hsl(hue($color-primary), 80%, 30%) -$color-primary-accent: hsl(hue($color-primary), 100%, 50%) +$color-primary: #68B3C8 !default +$color-primary-light: hsl(hue($color-primary), 30%, 90%) !default +$color-primary-dark: hsl(hue($color-primary), 80%, 30%) !default +$color-primary-accent: hsl(hue($color-primary), 100%, 50%) !default -$color-secondary: #f42942 -$color-secondary-light: hsl(hue($color-secondary), 30%, 90%) -$color-secondary-dark: hsl(hue($color-secondary), 80%, 40%) -$color-secondary-accent: hsl(hue($color-secondary), 100%, 50%) +$color-secondary: #f42942 !default +$color-secondary-light: hsl(hue($color-secondary), 30%, 90%) !default +$color-secondary-dark: hsl(hue($color-secondary), 80%, 40%) !default +$color-secondary-accent: hsl(hue($color-secondary), 100%, 50%) !default -$color-warning: #F3BB45 !default -$color-info: #68B3C8 !default -$color-success: #27AE60 !default -$color-danger: #EB5E28 !default +$color-warning: #F3BB45 !default !default +$color-info: #68B3C8 !default !default +$color-success: #27AE60 !default !default +$color-danger: #EB5E28 !default !default /* Borrowed from dillo.space :) */ -$color_upvote: #ff8b60 -$color_downvote: #74a4ff +$color_upvote: #ff8b60 !default +$color_downvote: #74a4ff !default /* Label Status */ -$color-status-invalid: #999 -$color-status-invalid-light: lighten($color-status-invalid, 10%) -$color-status-invalid-dark: darken($color-status-invalid, 10%) -$color-status-todo: #ff8080 -$color-status-todo-light: hsl(hue($color-status-todo), 100%, 85%) -$color-status-todo-dark: hsl(hue($color-status-todo), 100%, 65%) -$color-status-on_hold: #cb9e15 -$color-status-on_hold-light: hsl(hue($color-status-on_hold), 50%, 70%) -$color-status-on_hold-dark: hsl(hue($color-status-on_hold), 60%, 40%) -$color-status-in_progress: #ffbe00 -$color-status-in_progress-light: hsl(hue($color-status-in_progress), 100%, 55%) -$color-status-in_progress-dark: hsl(hue($color-status-in_progress), 100%, 45%) -$color-status-review: #00ceff -$color-status-review-light: hsl(hue($color-status-review), 100%, 75%) -$color-status-review-dark: hsl(hue($color-status-review), 100%, 40%) -$color-status-approved: #00cc9f -$color-status-approved-light: hsl(hue($color-status-approved), 100%, 70%) -$color-status-approved-dark: hsl(hue($color-status-approved), 100%, 35%) -$color-status-cbb: #acbf92 -$color-status-cbb-light: hsl(hue($color-status-cbb), 40%, 75%) -$color-status-cbb-dark: hsl(hue($color-status-cbb), 15%, 50%) -$color-status-final: #b0ea10 -$color-status-final-light: hsl(hue($color-status-final), 100%, 70%) -$color-status-final-dark: hsl(hue($color-status-final), 100%, 30%) +$color-status-invalid: #999 !default +$color-status-invalid-light: lighten($color-status-invalid, 10%) !default +$color-status-invalid-dark: darken($color-status-invalid, 10%) !default +$color-status-todo: #ff8080 !default +$color-status-todo-light: hsl(hue($color-status-todo), 100%, 85%) !default +$color-status-todo-dark: hsl(hue($color-status-todo), 100%, 65%) !default +$color-status-on_hold: #cb9e15 !default +$color-status-on_hold-light: hsl(hue($color-status-on_hold), 50%, 70%) !default +$color-status-on_hold-dark: hsl(hue($color-status-on_hold), 60%, 40%) !default +$color-status-in_progress: #ffbe00 !default +$color-status-in_progress-light: hsl(hue($color-status-in_progress), 100%, 55%) !default +$color-status-in_progress-dark: hsl(hue($color-status-in_progress), 100%, 45%) !default +$color-status-review: #00ceff !default +$color-status-review-light: hsl(hue($color-status-review), 100%, 75%) !default +$color-status-review-dark: hsl(hue($color-status-review), 100%, 40%) !default +$color-status-approved: #00cc9f !default +$color-status-approved-light: hsl(hue($color-status-approved), 100%, 70%) !default +$color-status-approved-dark: hsl(hue($color-status-approved), 100%, 35%) !default +$color-status-cbb: #acbf92 !default +$color-status-cbb-light: hsl(hue($color-status-cbb), 40%, 75%) !default +$color-status-cbb-dark: hsl(hue($color-status-cbb), 15%, 50%) !default +$color-status-final: #b0ea10 !default +$color-status-final-light: hsl(hue($color-status-final), 100%, 70%) !default +$color-status-final-dark: hsl(hue($color-status-final), 100%, 30%) !default -$color-status-active: #E6F3FD -$color-status-updated: #e7f5d3 +$color-status-active: #E6F3FD !default +$color-status-updated: #e7f5d3 !default -$activity-highlight-color: #00cc9f +$activity-highlight-color: #00cc9f !default -$color-open_projects: #7eb66f -$color-training: #71c5d3 +$color-open_projects: #7eb66f !default +$color-training: #71c5d3 !default /* Mobile Stuff */ -$screen-xs: 480px !default -$screen-xs-min: $screen-xs -$screen-phone: $screen-xs-min -$screen-sm: 768px !default -$screen-sm-min: $screen-sm -$screen-tablet: $screen-sm-min -$screen-md: 1100px !default -$screen-md-min: $screen-md -$screen-desktop: $screen-md-min -$screen-lg: 1270px !default -$screen-lg-min: $screen-lg -$screen-lg-desktop: $screen-lg-min -$screen-xs-max: $screen-sm-min - 1 -$screen-sm-max: $screen-md-min - 1 -$screen-md-max: $screen-lg-min - 1 +$screen-xs: 480px !default !default +$screen-xs-min: $screen-xs !default +$screen-phone: $screen-xs-min !default +$screen-sm: 768px !default !default +$screen-sm-min: $screen-sm !default +$screen-tablet: $screen-sm-min !default +$screen-md: 1100px !default !default +$screen-md-min: $screen-md !default +$screen-desktop: $screen-md-min !default +$screen-lg: 1270px !default !default +$screen-lg-min: $screen-lg !default +$screen-lg-desktop: $screen-lg-min !default +$screen-xs-max: $screen-sm-min - 1 !default +$screen-sm-max: $screen-md-min - 1 !default +$screen-md-max: $screen-lg-min - 1 !default - -$sidebar-width: 50px +$sidebar-width: 50px !default /* Project specifics */ -$project_nav-width: 240px -$project-sidebar-width: 50px -$project_header-height: 50px -$project_footer-height: 30px +$project_nav-width: 240px !default +$project-sidebar-width: 50px !default +$project_header-height: 50px !default +$project_footer-height: 30px !default -$navbar-height: 50px -$navbar-backdrop-height: 600px +$navbar-height: 50px !default +$navbar-backdrop-height: 600px !default -$node-type-asset_image: #e87d86 -$node-type-asset_file: #CC91C7 -$node-type-asset_video: #7dc5e8 -$node-type-comment: #66ccbd -$node-type-group: #c3a280 -$node-type-post: #647bce +$node-type-asset_image: #e87d86 !default +$node-type-asset_file: #CC91C7 !default +$node-type-asset_video: #7dc5e8 !default +$node-type-comment: #66ccbd !default +$node-type-group: #c3a280 !default +$node-type-post: #647bce !default -$list-node-children-item-width: 220px -$list-node-children-item-width_list: 60px -$list-node-children-item-width_square: 160px -$z-index-base: 13 +$list-node-children-item-width: 220px !default +$list-node-children-item-width_list: 60px !default +$list-node-children-item-width_square: 160px !default +$z-index-base: 13 !default .container - @media (min-width: $screen-sm-min) + @media (min-width: $screen-sm-min) width: 750px - @media (min-width: $screen-md-min) + @media (min-width: $screen-md-min) width: 1100px @media (min-width: $screen-lg-min)