consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1118 from consul/refactor-scss

Browse Source 
Refactor scss
This commit is contained in:
Juanjo Bazán
2016-05-18 17:40:40 +02:00
parent b375e696c0 58aa0309ac
commit f726c6e8b1
7 changed files with 217 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/header_bg.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 65 KiB

248
app/assets/stylesheets/_settings.scss
View File

@@ -25,19 +25,21 @@
// 20. Label
// 21. Media Object
// 22. Menu
// 23. Off-canvas
// 24. Orbit
// 25. Pagination
// 26. Progress Bar
// 27. Reveal
// 28. Slider
// 29. Switch
// 30. Table
// 31. Tabs
// 32. Thumbnail
// 33. Title Bar
// 34. Tooltip
// 35. Top Bar
// 23. Meter
// 24. Off-canvas
// 25. Orbit
// 26. Pagination
// 27. Progress Bar
// 28. Reveal
// 29. Slider
// 30. Switch
// 31. Table
// 32. Tabs
// 33. Thumbnail
// 34. Title Bar
// 35. Tooltip
// 36. Top Bar
// 37. Custom variables
@import 'util/util';
@@ -47,11 +49,13 @@
$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$primary-color: #2199e8;
$secondary-color: #777;
$success-color: #43ac6a;
$warning-color: #ffae00;
$alert-color: #ec5840;
$foundation-palette: (
primary: #2199e8,
secondary: #777,
success: #3adb76,
warning: #ffae00,
alert: #ec5840,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
@@ -65,8 +69,12 @@ $global-margin: 1rem;
$global-padding: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: 3px;
$global-radius: rem-calc(3);
$global-text-direction: ltr;
$global-flexbox: false;
$print-transparent-backgrounds: true;
@include add-foundation-colors;
// 2. Breakpoints
// --------------
@@ -85,7 +93,7 @@ $breakpoint-classes: (small medium large);
$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-responsive-gutter: (
$grid-column-gutter: (
small: 20px,
medium: 30px,
);
@@ -177,9 +185,9 @@ $stat-font-size: 2.5rem;
$abide-inputs: true;
$abide-labels: true;
$input-background-invalid: $alert-color;
$form-label-color-invalid: $alert-color;
$input-error-color: $alert-color;
$input-background-invalid: map-get($foundation-palette, alert);
$form-label-color-invalid: map-get($foundation-palette, alert);
$input-error-color: map-get($foundation-palette, alert);
$input-error-font-size: rem-calc(12);
$input-error-font-weight: $global-weight-bold;
@@ -231,11 +239,11 @@ $button-margin: 0 0 $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-color: $white;
$button-color-alt: $black;
$button-radius: $global-radius;
$button-sizes: (
tiny: $small-font-size,
tiny: 0.6rem,
small: 0.75rem,
default: 0.9rem,
large: 1.25rem,
@@ -320,7 +328,7 @@ $fieldset-padding: rem-calc(20);
$fieldset-margin: rem-calc(18 0);
$legend-padding: rem-calc(0 3);
$form-spacing: rem-calc(16);
$helptext-color: #333;
$helptext-color: $black;
$helptext-font-size: rem-calc(13);
$helptext-font-style: italic;
$input-prefix-color: $black;
@@ -332,9 +340,10 @@ $form-label-font-size: rem-calc(14);
$form-label-font-weight: $global-weight-normal;
$form-label-line-height: 1.8;
$select-background: $white;
$select-triangle-color: #333;
$select-triangle-color: $dark-gray;
$select-radius: $global-radius;
$input-color: $black;
$input-placeholder-color: $medium-gray;
$input-font-family: inherit;
$input-font-size: rem-calc(16);
$input-background: $white;
@@ -344,7 +353,7 @@ $input-border: 1px solid $medium-gray;
$input-border-focus: 1px solid $dark-gray;
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
$input-shadow-focus: 0 0 5px $medium-gray;
$input-cursor-disabled: default;
$input-cursor-disabled: not-allowed;
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
$input-number-spinners: true;
$input-radius: $global-radius;
@@ -356,7 +365,7 @@ $label-background: $primary-color;
$label-color: foreground($label-background);
$label-font-size: 0.8rem;
$label-padding: 0.33333rem 0.5rem;
$label-radius: $global-radius*10;
$label-radius: $global-radius;
// 21. Media Object
// ----------------
@@ -371,10 +380,21 @@ $mediaobject-image-width-stacked: 100%;
$menu-margin: 0;
$menu-margin-nested: 1rem;
$menu-item-padding: 0.7rem 1rem;
$menu-item-color-active: $white;
$menu-item-background-active: map-get($foundation-palette, primary);
$menu-icon-spacing: 0.25rem;
$menu-expand-max: 6;
// 23. Off-canvas
// 23. Meter
// ---------
$meter-height: 1rem;
$meter-radius: $global-radius;
$meter-background: $medium-gray;
$meter-fill-good: $success-color;
$meter-fill-medium: $warning-color;
$meter-fill-bad: $alert-color;
// 24. Off-canvas
// --------------
$offcanvas-size: 250px;
@@ -387,7 +407,7 @@ $offcanvas-exit-background: rgba($white, 0.25);
$maincontent-class: 'off-canvas-content';
$maincontent-shadow: 0 0 10px rgba($black, 0.5);
// 24. Orbit
// 25. Orbit
// ---------
$orbit-bullet-background: $medium-gray;
@@ -402,7 +422,7 @@ $orbit-control-background-hover: rgba($black, 0.5);
$orbit-control-padding: 1rem;
$orbit-control-zindex: 10;
// 25. Pagination
// 26. Pagination
// --------------
$pagination-font-size: rem-calc(14);
@@ -416,10 +436,10 @@ $pagination-item-background-current: $primary-color;
$pagination-item-color-current: foreground($pagination-item-background-current);
$pagination-item-color-disabled: $medium-gray;
$pagination-ellipsis-color: $black;
$pagination-mobile-items: true;
$pagination-mobile-items: false;
$pagination-arrows: true;
// 26. Progress Bar
// 27. Progress Bar
// ----------------
$progress-height: 1rem;
@@ -428,24 +448,24 @@ $progress-margin-bottom: $global-margin;
$progress-meter-background: $primary-color;
$progress-radius: $global-radius;
// 27. Reveal
// 28. Reveal
// ----------
$reveal-background: $white;
$reveal-width: 600px;
$reveal-max-width: $global-width;
$reveal-offset: rem-calc(100);
$reveal-padding: $global-padding;
$reveal-border: 1px solid $medium-gray;
$reveal-radius: $global-radius;
$reveal-zindex: 1005;
$reveal-overlay-background: rgba($black, 0.45);
// 28. Slider
// 29. Slider
// ----------
$slider-width-vertical: 0.5rem;
$slider-transition: all 0.2s ease-in-out;
$slider-height: 0.5rem;
$slider-width-vertical: $slider-height;
$slider-background: $light-gray;
$slider-fill-background: $medium-gray;
$slider-handle-height: 1.4rem;
@@ -453,9 +473,8 @@ $slider-handle-width: 1.4rem;
$slider-handle-background: $primary-color;
$slider-opacity-disabled: 0.25;
$slider-radius: $global-radius;
$slider-transition: all 0.2s ease-in-out;
// 29. Switch
// 30. Switch
// ----------
$switch-background: $medium-gray;
@@ -471,7 +490,7 @@ $switch-paddle-offset: 0.25rem;
$switch-paddle-radius: $global-radius;
$switch-paddle-transition: all 0.25s ease-out;
// 30. Table
// 31. Table
// ---------
$table-background: $white;
@@ -488,14 +507,13 @@ $table-foot-background: smart-scale($table-background, $table-color-scale);
$table-head-font-color: $body-font-color;
$show-header-for-stacked: false;
// 31. Tabs
// 32. Tabs
// --------
$tab-margin: 0;
$tab-background: $white;
$tab-background-active: $light-gray;
$tab-border: $light-gray;
$tab-item-color: foreground($tab-background, $primary-color);
$tab-item-font-size: rem-calc(12);
$tab-item-background-hover: $white;
$tab-item-padding: 1.25rem 1.5rem;
$tab-expand-max: 6;
@@ -504,7 +522,7 @@ $tab-content-border: $light-gray;
$tab-content-color: foreground($tab-background, $primary-color);
$tab-content-padding: 1rem;
// 32. Thumbnail
// 33. Thumbnail
// -------------
$thumbnail-border: solid 4px $white;
@@ -514,7 +532,7 @@ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
$thumbnail-transition: box-shadow 200ms ease-out;
$thumbnail-radius: $global-radius;
// 33. Title Bar
// 34. Title Bar
// -------------
$titlebar-background: $black;
@@ -525,7 +543,7 @@ $titlebar-icon-color: $white;
$titlebar-icon-color-hover: $medium-gray;
$titlebar-icon-spacing: 0.25rem;
// 34. Tooltip
// 35. Tooltip
// -----------
$has-tip-font-weight: $global-weight-bold;
@@ -536,13 +554,141 @@ $tooltip-padding: 0.75rem;
$tooltip-font-size: $small-font-size;
$tooltip-pip-width: 0.75rem;
$tooltip-pip-height: $tooltip-pip-width * 0.866;
$tooltip-pip-offset: 1.25rem;
$tooltip-radius: $global-radius;
// 35. Top Bar
// 36. Top Bar
// -----------
$topbar-padding: 0.5rem;
$topbar-background: $light-gray;
$topbar-submenu-background: $topbar-background;
$topbar-title-spacing: 1rem;
$topbar-input-width: 200px;
$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);

1
app/assets/stylesheets/application.scss
View File

@@ -2,7 +2,6 @@
@import "foundation_and_overrides";
@import "fonts";
@import "icons";
@import "variables";
@import "mixins";
@import "admin";
@import "layout";

15
app/assets/stylesheets/foundation_and_overrides.scss
View File

@@ -3,12 +3,6 @@
@import 'settings';
@import 'foundation';
// If you'd like to include motion-ui, you need to install the motion-ui sass package.
//
// @import 'motion-ui/motion-ui';
// We include everything by default. To slim your CSS, remove components you don't use.
@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;
@@ -18,7 +12,6 @@
@include foundation-float-classes;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@@ -31,10 +24,8 @@
@include foundation-media-object;
@include foundation-menu;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@@ -42,10 +33,4 @@
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
// If you'd like to include motion-ui, you need to install the motion-ui sass package.
//
// @include motion-ui-transitions;
// @include motion-ui-animations;

22
app/assets/stylesheets/layout.scss
View File

@@ -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;

18
app/assets/stylesheets/participation.scss
View File

@@ -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;
}

136
app/assets/stylesheets/variables.scss
View File

@@ -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);