From e77b9cf46ca924ec9d197f0f5c22cee05e62c96d Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Wed, 18 May 2016 17:16:06 +0200 Subject: [PATCH] Moves custom variables to settings.scss --- app/assets/stylesheets/_settings.scss | 130 ++++++++++++++++++++- app/assets/stylesheets/application.scss | 1 - app/assets/stylesheets/layout.scss | 22 ++-- app/assets/stylesheets/participation.scss | 18 +-- app/assets/stylesheets/variables.scss | 136 ---------------------- 5 files changed, 149 insertions(+), 158 deletions(-) delete mode 100644 app/assets/stylesheets/variables.scss diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss index 1bb084ae5..0d203a14c 100644 --- a/app/assets/stylesheets/_settings.scss +++ b/app/assets/stylesheets/_settings.scss @@ -39,6 +39,7 @@ // 34. Title Bar // 35. Tooltip // 36. Top Bar +// 37. Custom variables @import 'util/util'; @@ -563,4 +564,131 @@ $topbar-background: $light-gray; $topbar-submenu-background: $topbar-background; $topbar-title-spacing: 1rem; $topbar-input-width: 200px; -$topbar-unstack-breakpoint: medium; \ No newline at end of file +$topbar-unstack-breakpoint: medium; + +// 37. Custom variables +// -------------------- + +$font-logo: 'Lato' !important; +$font-sans: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif !important; + +$font-normal: 400; +$font-bold: 700; + +$base-font-size: rem-calc(17); +$base-line-height: rem-calc(26); + +$h1-font-size: rem-calc(44); +$h1-line-height: rem-calc(57); + +$h2-font-size: rem-calc(34); +$h2-line-height: rem-calc(44); + +$h3-font-size: rem-calc(24); +$h3-line-height: rem-calc(31); + +$h4-font-size: rem-calc(19); +$h4-line-height: rem-calc(25); + +$h5-font-size: rem-calc(16); +$h5-line-height: rem-calc(21); + +$h6-font-size: rem-calc(13); +$h6-line-height: rem-calc(17); + +$small-font-size: rem-calc(14); +$tiny-font-size: rem-calc(10); +$line-height: rem-calc(24); + +// 02. Colors +// - - - - - - - - - - - - - - - - - - - - - - - - - + +$brand: #004A83; +$body: #E9E9E9; +$background: #EDEFF0; +$border: #DEE0E3; +$dark: darken($brand, 10%); + +$text: #222222; +$text-medium: #999999; +$text-light: #CCCCCC; + +$link: #2895F1; +$link-hover: #2178BF; + +$debates: #008CCF; +$votes-bg: #26AEEE; +$votes-border: #1F94CB; + +$votes-like: #7BD2A8; +$votes-like-act: #5D9E7F; +$votes-unlike: #EF8585; +$votes-unlike-act: #BD6A6A; + +$delete: #F04124; +$check: #46DB91; + +$proposals: #FFA42D; +$proposals-border: #CC8425; + +$budget: #454372; +$budget-hover: #7571BF; + +$highlight: #E7F2FC; +$featured: #FED900; + +$footer-bg: #DEE0E2; +$footer-color: #171819; +$footer-link: #454A4C; +$footer-border: #BFC1C3; + +// 03. Forms +// - - - - - - - - - - - - - - - - - - - - - - - - - + +$input-bg: #F8F8F8; + +// 04. Alerts +// - - - - - - - - - - - - - - - - - - - - - - - - - + +$success-bg: #DFF0D8; +$success-border: #D6E9C6; +$color-success: #3C763D; + +$info-bg: #D9EDF7; +$info-border: #BCE8F1; +$color-info: #31708F; + +$warning-bg: #FCF8E3; +$warning-border: #FAEBCC; +$color-warning: #8A6D3B; + +$alert-bg: #F2DEDE; +$alert-border: #EBCCD1; +$color-alert: #A94442; + +// 05. Levels +// - - - - - - - - - - - - - - - - - - - - - - - - - + +$level-1: #1ABC9C; +$level-2: #43AC6A; +$level-3: #43AC6A; +$level-4: #43AC6A; +$level-5: #F08A24; + +$author: #008CCF; +$association: #C0392B; +$deleted: #E7E7E7; + +$comment-author: rgba(45,144,248,.15); +$comment-level-5: rgba(255,241,204,1); +$comment-admin: rgba(45,144,248,.15); +$comment-official: rgba(70,219,145,.3); + +// 06. Responsive +// - - - - - - - - - - - - - - - - - - - - - - - - - + +$small: rem-calc(480); +$small-breakpoint: rem-calc(640); +$medium-breakpoint: rem-calc(1024); +$large-breakpoint: rem-calc(1440); +$xlarge-breakpoint: rem-calc(1920); diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 71e74c251..36e055a4e 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -2,7 +2,6 @@ @import "foundation_and_overrides"; @import "fonts"; @import "icons"; -@import "variables"; @import "mixins"; @import "admin"; @import "layout"; diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index ebd651f12..e490bb0a1 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -766,22 +766,22 @@ form { &.success, &.notice { background-color: $success-bg; border-color: $success-border; - color: $success-color; + color: $color-success; } &.primary { background-color: $info-bg; border-color: $info-border; - color: $info-color; + color: $color-info; } &.warning { background-color: $warning-bg; border-color: $warning-border; - color: $warning-color; + color: $color-warning; a { - color: $warning-color; + color: $color-warning; font-weight: bold; text-decoration: underline; } @@ -790,7 +790,7 @@ form { &.alert, &.error { background-color: $alert-bg; border-color: $alert-border; - color: $alert-color; + color: $color-alert; } .close { @@ -800,23 +800,23 @@ form { span.error, small.error { background: $alert-bg; - color: $alert-color; + color: $color-alert; } span.no-error, small.no-error { background: $success-bg; - color: $success-color; + color: $color-success; } .error small.error { background: $alert-bg; - color: $alert-color; + color: $color-alert; display: inline-block; margin: 0 $line-height/4; } label.error, label.error a { - color: $alert-color; + color: $color-alert; } // 08. User account @@ -836,7 +836,7 @@ label.error, label.error a { .final-votes-info { background: $warning-bg; border: 1px solid $warning-border; - color: $warning-color; + color: $color-warning; margin-top: $line-height; padding: $line-height/2; @@ -1507,7 +1507,7 @@ table { .icon-letter { background: white; - color: $info-color; + color: $color-info; font-size: rem-calc(24); margin-left: -27px; padding: 0 $line-height/2; diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 43936f9ed..046cc58d2 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -130,7 +130,7 @@ .anonymous-votes, .organizations-votes { background: $warning-bg; - color: $warning-color; + color: $color-warning; height: 100%; left: 0; line-height: $line-height; @@ -141,13 +141,13 @@ width: 100%; p { - color: $warning-color; + color: $color-warning; margin: 0 rem-calc(12); text-align: left; } a { - color: $warning-color; + color: $color-warning; font-weight: bold; text-decoration: underline; } @@ -242,7 +242,7 @@ .anonymous-votes, .organizations-votes, .no-supports-allowed { background: $warning-bg; - color: $warning-color; + color: $color-warning; height: 100%; left: 0; line-height: $line-height; @@ -253,13 +253,13 @@ width: 100%; p { - color: $warning-color; + color: $color-warning; margin: 0 rem-calc(12); text-align: left; } a { - color: $warning-color; + color: $color-warning; font-weight: bold; text-decoration: underline; } @@ -990,18 +990,18 @@ .organizations-votes, .anonymous-votes { background: $featured; - color: $warning-color; + color: $color-warning; font-size: $small-font-size; line-height: $line-height; padding-top: 0; a { - color: $warning-color; + color: $color-warning; font-weight: bold; } p { - color: $warning-color; + color: $color-warning; font-size: $small-font-size; line-height: $line-height; } diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss deleted file mode 100644 index 5d59ebf8f..000000000 --- a/app/assets/stylesheets/variables.scss +++ /dev/null @@ -1,136 +0,0 @@ -// Table of Contents -// -// 01. Typography -// 02. Colors -// 03. Forms -// 04. Alerts -// 05. Levels -// 06. Responsive -// - -// 01. Typography -// - - - - - - - - - - - - - - - - - - - - - - - - - - -$font-logo: 'Lato' !important; -$font-sans: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif !important; - -$font-normal: 400; -$font-bold: 700; - -$base-font-size: rem-calc(17); -$base-line-height: rem-calc(26); - -$h1-font-size: rem-calc(44); -$h1-line-height: rem-calc(57); - -$h2-font-size: rem-calc(34); -$h2-line-height: rem-calc(44); - -$h3-font-size: rem-calc(24); -$h3-line-height: rem-calc(31); - -$h4-font-size: rem-calc(19); -$h4-line-height: rem-calc(25); - -$h5-font-size: rem-calc(16); -$h5-line-height: rem-calc(21); - -$h6-font-size: rem-calc(13); -$h6-line-height: rem-calc(17); - -$small-font-size: rem-calc(14); -$tiny-font-size: rem-calc(10); -$line-height: rem-calc(24); - -// 02. Colors -// - - - - - - - - - - - - - - - - - - - - - - - - - - -$brand: #004A83; -$body: #E9E9E9; -$background: #EDEFF0; -$border: #DEE0E3; -$dark: darken($brand, 10%); - -$text: #222222; -$text-medium: #999999; -$text-light: #CCCCCC; - -$link: #2895F1; -$link-hover: #2178BF; - -$debates: #008CCF; -$votes-bg: #26AEEE; -$votes-border: #1F94CB; - -$votes-like: #7BD2A8; -$votes-like-act: #5D9E7F; -$votes-unlike: #EF8585; -$votes-unlike-act: #BD6A6A; - -$delete: #F04124; -$check: #46DB91; - -$proposals: #FFA42D; -$proposals-border: #CC8425; - -$budget: #454372; -$budget-hover: #7571BF; - -$highlight: #E7F2FC; -$featured: #FED900; - -$footer-bg: #DEE0E2; -$footer-color: #171819; -$footer-link: #454A4C; -$footer-border: #BFC1C3; - -// 03. Forms -// - - - - - - - - - - - - - - - - - - - - - - - - - - -$input-bg: #F8F8F8; - -// 04. Alerts -// - - - - - - - - - - - - - - - - - - - - - - - - - - -$success-bg: #DFF0D8; -$success-border: #D6E9C6; -$success-color: #3C763D; - -$info-bg: #D9EDF7; -$info-border: #BCE8F1; -$info-color: #31708F; - -$warning-bg: #FCF8E3; -$warning-border: #FAEBCC; -$warning-color: #8A6D3B; - -$alert-bg: #F2DEDE; -$alert-border: #EBCCD1; -$alert-color: #A94442; - -// 05. Levels -// - - - - - - - - - - - - - - - - - - - - - - - - - - -$level-1: #1ABC9C; -$level-2: #43AC6A; -$level-3: #43AC6A; -$level-4: #43AC6A; -$level-5: #F08A24; - -$author: #008CCF; -$association: #C0392B; -$deleted: #E7E7E7; - -$comment-author: rgba(45,144,248,.15); -$comment-level-5: rgba(255,241,204,1); -$comment-admin: rgba(45,144,248,.15); -$comment-official: rgba(70,219,145,.3); - -// 06. Responsive -// - - - - - - - - - - - - - - - - - - - - - - - - - - -$small: rem-calc(480); -$small-breakpoint: rem-calc(640); -$medium-breakpoint: rem-calc(1024); -$large-breakpoint: rem-calc(1440); -$xlarge-breakpoint: rem-calc(1920);