diff --git a/app/assets/images/header_bg.jpg b/app/assets/images/header_bg.jpg deleted file mode 100644 index 4449c9897..000000000 Binary files a/app/assets/images/header_bg.jpg and /dev/null differ diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss index 2eacc2021..e0ad848c4 100644 --- a/app/assets/stylesheets/_settings.scss +++ b/app/assets/stylesheets/_settings.scss @@ -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); diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 92ae33b74..0c649ae77 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/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss index f175ce046..403d5566d 100644 --- a/app/assets/stylesheets/foundation_and_overrides.scss +++ b/app/assets/stylesheets/foundation_and_overrides.scss @@ -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; 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 9c621fbd2..000000000 --- a/app/assets/stylesheets/variables.scss +++ /dev/null @@ -1,137 +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; -$highlight-dark: #33DADF; -$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); diff --git a/db/schema.rb b/db/schema.rb index ee1fd4fac..148d76092 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -353,7 +353,7 @@ ActiveRecord::Schema.define(version: 20160518141543) do t.integer "price_first_year", limit: 8 t.string "time_scope" t.datetime "unfeasible_email_sent_at" - t.integer "cached_votes_up" + t.integer "cached_votes_up", default: 0 t.tsvector "tsv" t.string "responsible_name", limit: 60 t.integer "physical_votes", default: 0