diff --git a/.scss-lint.yml b/.scss-lint.yml index fb0b03f..b2269b0 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -7,5 +7,8 @@ linters: PlaceholderInExtend: enabled: false + SelectorDepth: + max_depth: 4 + StringQuotes: style: double_quotes diff --git a/app/assets/stylesheets/_layouts.scss b/app/assets/stylesheets/_layouts.scss index 0268749..f0ffc3b 100644 --- a/app/assets/stylesheets/_layouts.scss +++ b/app/assets/stylesheets/_layouts.scss @@ -1,6 +1,7 @@ -/* Site layout styles go here */ @charset "UTF-8"; +/* Site layout styles go here */ + header { font-size: 1rem; } diff --git a/app/assets/stylesheets/_states.scss b/app/assets/stylesheets/_states.scss index bdb8472..87f5cc3 100644 --- a/app/assets/stylesheets/_states.scss +++ b/app/assets/stylesheets/_states.scss @@ -1,6 +1,7 @@ -/* Site state styles go here */ @charset "UTF-8"; +/* Site state styles go here */ + .is-active { @extend .active; } diff --git a/app/assets/stylesheets/_transitional.scss b/app/assets/stylesheets/_transitional.scss index 4cbca87..decce54 100644 --- a/app/assets/stylesheets/_transitional.scss +++ b/app/assets/stylesheets/_transitional.scss @@ -1,3 +1,5 @@ +@charset "UTF-8"; + /* Stuff you're testing */ /* Feature: How does it work? */ diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index aabd9f8..25ce37e 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -1,8 +1,9 @@ -/* Site's styles, inspired by SMACSS */ @charset "UTF-8"; +/* Site's styles, inspired by SMACSS */ + @import "globals/all", - "base", + "base/all", "layouts", "prouns/all", "states", diff --git a/app/assets/stylesheets/base/_all.scss b/app/assets/stylesheets/base/_all.scss new file mode 100644 index 0000000..6575ba8 --- /dev/null +++ b/app/assets/stylesheets/base/_all.scss @@ -0,0 +1,8 @@ +@charset "UTF-8"; + +/* Base site styles go here */ + +@import "base/document", + "base/media", + "base/table", + "base/typography"; diff --git a/app/assets/stylesheets/base/_document.scss b/app/assets/stylesheets/base/_document.scss new file mode 100644 index 0000000..429f163 --- /dev/null +++ b/app/assets/stylesheets/base/_document.scss @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +/* Document related base styles go here */ + +html { + overflow-x: hidden; + + @media (max-width: $screen-sm-min) { + overflow-x: scroll; + } +} + +body { + @extend .container-fluid; + padding-left: 0; + padding-right: 0; +} diff --git a/app/assets/stylesheets/base/_media.scss b/app/assets/stylesheets/base/_media.scss new file mode 100644 index 0000000..2d078ef --- /dev/null +++ b/app/assets/stylesheets/base/_media.scss @@ -0,0 +1,8 @@ +@charset "UTF-8"; + +/* Media related base styles go here */ + +img { + @extend .img-responsive; + margin: 0 auto; +} diff --git a/app/assets/stylesheets/base/_table.scss b/app/assets/stylesheets/base/_table.scss new file mode 100644 index 0000000..7f87ddc --- /dev/null +++ b/app/assets/stylesheets/base/_table.scss @@ -0,0 +1,24 @@ +@charset "UTF-8"; + +/* + Table related base styles go here + Styleguide 1.1. + */ + +table { + @extend .table; + @extend .table-hover; + @extend .table-responsive; + + + tbody > tr { + th, + td { + border-top: $black-alpha-12 solid .1em; + } + } + + thead > tr > th { + border-bottom: 0; + } +} diff --git a/app/assets/stylesheets/_base.scss b/app/assets/stylesheets/base/_typography.scss similarity index 57% rename from app/assets/stylesheets/_base.scss rename to app/assets/stylesheets/base/_typography.scss index 845d306..45d2ee2 100644 --- a/app/assets/stylesheets/_base.scss +++ b/app/assets/stylesheets/base/_typography.scss @@ -1,13 +1,10 @@ -/* Base site styles go here */ @charset "UTF-8"; +/* Typography related base styles go here */ + +/* Responsive font-size */ html { font-size: $font-size-base-xs; - overflow-x: hidden; - - @media (max-width: $screen-sm-min) { - overflow-x: scroll; - } @media (min-width: $screen-sm-min) { font-size: $font-size-base-sm; @@ -22,28 +19,6 @@ html { } } -body { - @extend .container-fluid; - padding-left: 0; - padding-right: 0; -} - -img { - @extend .img-responsive; - margin: 0 auto; -} - -table { - @extend .table; - @extend .table-hover; - @extend .table-striped; - @extend .table-responsive; - - * { - border: 0; - } -} - h1 { @extend .text-center; font-weight: $headings-font-weight * 2; diff --git a/app/assets/stylesheets/globals/_all.scss b/app/assets/stylesheets/globals/_all.scss index 5b4a4bd..cbbc315 100644 --- a/app/assets/stylesheets/globals/_all.scss +++ b/app/assets/stylesheets/globals/_all.scss @@ -1,5 +1,7 @@ @charset "UTF-8"; +/* Site global styles go here */ + @import "globals/variables/all", "globals/functions", "globals/mixins"; diff --git a/app/assets/stylesheets/globals/_functions.scss b/app/assets/stylesheets/globals/_functions.scss index 224dcaa..b235f81 100644 --- a/app/assets/stylesheets/globals/_functions.scss +++ b/app/assets/stylesheets/globals/_functions.scss @@ -1,7 +1,8 @@ -/* Global functions go here */ @charset "UTF-8"; -// Converts pixels to ems +/* Global functions go here */ + +/* Converts pixels to ems */ @function em($pixels, $font-size) { @return ($pixels / $font-size) * 1em; } diff --git a/app/assets/stylesheets/globals/_mixins.scss b/app/assets/stylesheets/globals/_mixins.scss index c334568..ed42864 100644 --- a/app/assets/stylesheets/globals/_mixins.scss +++ b/app/assets/stylesheets/globals/_mixins.scss @@ -1,6 +1,7 @@ -/* Global mixins go here */ @charset "UTF-8"; +/* Global mixins go here */ + /* Open Sans @font-face mixin */ @mixin open-sans-font-face($font, $svgid, $weight: normal, $style: normal) { @font-face { @@ -29,8 +30,9 @@ font-style: normal; } } + /* Shadows */ @mixin shadow() { - box-shadow: 0 1px 2px 0 $transparent-alpha-20, - 0 1px 3px 0 $transparent-alpha-19; + box-shadow: 0 1px 2px 0 $black-alpha-38, + 0 1px 3px 0 $black-alpha-12; } diff --git a/app/assets/stylesheets/globals/variables/_all.scss b/app/assets/stylesheets/globals/variables/_all.scss index 83793f0..95e53bc 100644 --- a/app/assets/stylesheets/globals/variables/_all.scss +++ b/app/assets/stylesheets/globals/variables/_all.scss @@ -1,4 +1,7 @@ @charset "UTF-8"; -@import "globals/variables/application", +/* Site global variables go here */ + +@import "globals/variables/colour", + "globals/variables/typography", "globals/variables/bootstrap"; diff --git a/app/assets/stylesheets/globals/variables/_application.scss b/app/assets/stylesheets/globals/variables/_application.scss deleted file mode 100644 index 979df8c..0000000 --- a/app/assets/stylesheets/globals/variables/_application.scss +++ /dev/null @@ -1,19 +0,0 @@ -/* Site variables go here */ -@charset "UTF-8"; - -/* Font Awesome icon font path */ -$fa-font-path: "font-awesome/fonts" !default; - -/* Open Sans font path */ -$open-sans-font-path: "open-sans/fonts" !default; - -/* Colours */ -$white-alpha-0: hsla(0, 100%, 100%, 0) !default; // #ffffff00 -$transparent-alpha-19: hsla(0, 0, 0, .19) !default; // #00000030 -$transparent-alpha-20: hsla(0, 0, 0, .20) !default; // #00000033 - -/* Responsive font-size */ -$font-size-base-xs: 13px !default; -$font-size-base-sm: 15px !default; -$font-size-base-md: 17px !default; -$font-size-base-lg: 19px !default; diff --git a/app/assets/stylesheets/globals/variables/_bootstrap.scss b/app/assets/stylesheets/globals/variables/_bootstrap.scss index 1f858db..9999265 100644 --- a/app/assets/stylesheets/globals/variables/_bootstrap.scss +++ b/app/assets/stylesheets/globals/variables/_bootstrap.scss @@ -1,34 +1,31 @@ -/* Theme variables go here. Hey, hi Bootstrap! */ @charset "UTF-8"; +/* Theme variables go here. Hey, hi Bootstrap! */ + //== Colors // //## Gray and brand colors for use across Bootstrap. -$gray-darkest: hsl(210, 16%, 0) !default; // #000000 -$gray-darker: hsl(210, 16%, 2.5%) !default; // #050607 -$gray-dark: hsl(210, 16%, 12.5%) !default; // #1B2025 -$gray-darkish: hsl(210, 16%, 28%) !default; // #3C4753 -$gray: hsl(210, 16%, 50%) !default; // #6B8094 -$gray-lightish: hsl(210, 16%, 72%) !default; // #ACB8C3 -$gray-light: hsl(210, 16%, 87.5%) !default; // #DADFE4 -$gray-lighter: hsl(210, 16%, 97.5%) !default; // #F8F9FA -$gray-lightest: hsl(210, 16%, 100) !default; // #FFFFFF - -$brand-primary: hsl(20, 80%, 45%) !default; // #E54C00 -$brand-success: hsl(135, 19%, 60%) !default; // #73B82E -$brand-info: hsl(200, 60%, 45%) !default; // #2E8AB8 -$brand-warning: hsl(35, 60%, 45%) !default; // #B87E2E -$brand-danger: hsl(0, 60%, 45%) !default; // #B82E2E +$gray-darker: $default-fortissimo !default; +$gray-dark: $default-forte !default; +$gray: $default-base !default; +$gray-light: $default-piano !default; +$gray-lighter: $default-pianissimo !default; + +$brand-primary: $primary-base !default; +$brand-success: $success-base !default; +$brand-info: $info-base !default; +$brand-warning: $warning-base !default; +$brand-danger: $danger-base !default; //== Scaffolding // //## Settings for some of the most global styles. //** Background color for ``. -$body-bg: $gray-lightest !default; +$body-bg: $white !default; //** Global text color on ``. -$text-color: $gray-darker !default; +$text-color: $black-alpha-87 !default; //** Global textual link color. $link-color: $brand-primary !default; @@ -93,15 +90,9 @@ $table-cell-padding: 8px !default; $table-condensed-cell-padding: 5px !default; //** Default background color used for all tables. -$table-bg: transparent !default; -//** Background color used for `.table-striped`. -$table-bg-accent: $gray-lighter !default; +$table-bg: $body-bg !default; //** Background color used for `.table-hover`. -$table-bg-hover: darken($gray-lighter, 2%) !default; -$table-bg-active: $table-bg-hover !default; - -//** Border color for table and cell borders. -$table-border-color: transparent !default; +$table-bg-hover: $gray-lighter !default; //== Buttons // @@ -109,61 +100,61 @@ $table-border-color: transparent !default; $btn-font-weight: normal !default; -$btn-default-color: $gray-lightest !default; -$btn-default-bg: $gray-darkish !default; -$btn-default-border: $white-alpha-0 !default; +$btn-default-color: $black-alpha-87 !default; +$btn-default-bg: $gray-light !default; +$btn-default-border: $white-alpha-12 !default; -$btn-primary-color: $btn-default-color !default; +$btn-primary-color: $white !default; $btn-primary-bg: $brand-primary !default; $btn-primary-border: $btn-default-border !default; -$btn-success-color: $btn-default-color !default; +$btn-success-color: $btn-primary-color !default; $btn-success-bg: $brand-success !default; $btn-success-border: $btn-default-border !default; -$btn-info-color: $btn-default-color !default; +$btn-info-color: $btn-primary-color !default; $btn-info-bg: $brand-info !default; $btn-info-border: $btn-default-border !default; -$btn-warning-color: $btn-default-color !default; +$btn-warning-color: $btn-primary-color !default; $btn-warning-bg: $brand-warning !default; $btn-warning-border: $btn-default-border !default; -$btn-danger-color: $btn-default-color !default; +$btn-danger-color: $btn-primary-color !default; $btn-danger-bg: $brand-danger !default; $btn-danger-border: $btn-default-border !default; -$btn-link-disabled-color: $gray-light !default; +$btn-link-disabled-color: $black-alpha-38 !default; //== Forms // //## //** Text color for ``s -$input-color: $gray !default; +$input-color: $gray-light !default; //== Navbar // //## // Basics of a navbar -$navbar-default-color: $btn-default-color !default; -$navbar-default-bg: $gray-darkish !default; -$navbar-default-border: $white-alpha-0 !default; +$navbar-default-color: $btn-primary-color !default; +$navbar-default-bg: $primary-forte !default; +$navbar-default-border: $white-alpha-12 !default; // Navbar links $navbar-default-link-color: $navbar-default-color !default; $navbar-default-link-hover-color: $navbar-default-color !default; -$navbar-default-link-hover-bg: darken($navbar-default-bg, 13%) !default; +$navbar-default-link-hover-bg: darken($navbar-default-bg, 6.5) !default; $navbar-default-link-active-color: $navbar-default-color !default; -$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default; -$navbar-default-link-disabled-color: $gray-light !default; -$navbar-default-link-disabled-bg: $navbar-default-border !default; +$navbar-default-link-active-bg: darken($navbar-default-bg, 2.5) !default; +$navbar-default-link-disabled-color: $white-alpha-30 !default; +$navbar-default-link-disabled-bg: $white-alpha-12 !default; // Navbar brand label $navbar-default-brand-color: $navbar-default-link-color !default; $navbar-default-brand-hover-color: $navbar-default-link-color !default; -$navbar-default-brand-hover-bg: $brand-primary !default; +$navbar-default-brand-hover-bg: $navbar-default-link-hover-bg !default; // Navbar toggle $navbar-default-toggle-hover-bg: $navbar-default-link-hover-bg !default; diff --git a/app/assets/stylesheets/globals/variables/_colour.scss b/app/assets/stylesheets/globals/variables/_colour.scss new file mode 100644 index 0000000..6915825 --- /dev/null +++ b/app/assets/stylesheets/globals/variables/_colour.scss @@ -0,0 +1,51 @@ +@charset "UTF-8"; + +/* Colour variables go here */ + +/* Default (grays) */ +$default-pianissimo: hsl(0, 0%, 93%) !default; // #EEEEEE +$default-piano: hsl(0, 0%, 88%) !default; // #E0E0E0 +$default-base: hsl(0, 0%, 62%) !default; // #9E9E9E +$default-forte: hsl(0, 0%, 38%) !default; // #616161 +$default-fortissimo: hsl(0, 0%, 26%) !default; // #424242 + +/* Primary */ +$primary-pianissimo: hsl(190, 97%, 50%) !default; // #05D4FB +$primary-piano: hsl(190, 100%, 49%) !default; // #00D4FC +$primary-base: hsl(190, 100%, 34%) !default; // #0090AD +$primary-forte: hsl(189, 100%, 26%) !default; // #007186 +$primary-fortissimo: hsl(189, 100%, 20%) !default; // #005868 + +/* Success */ +$success-piano: hsl(133, 100%, 50%) !default; // #00FD38 +$success-base: hsl(133, 100%, 40%) !default; // #00CB2D +$success-forte: hsl(133, 100%, 32%) !default; // #00A524 + +/* Info */ +$info-piano: hsl(226, 100%, 50%) !default; // #003BFD +$info-base: hsl(226, 100%, 36%) !default; // #002BBA +$info-forte: hsl(226, 100%, 29%) !default; // #002293 + +/* Warning */ +$warning-piano: hsl(41, 100%, 50%) !default; // #FFB000 +$warning-base: hsl(41, 100%, 43%) !default; // #DA9600 +$warning-forte: hsl(41, 100%, 33%) !default; // #A97400 + +/* Danger */ +$danger-piano: hsl(6, 100%, 50%) !default; // #FF1800 +$danger-base: hsl(6, 100%, 43%) !default; // #DA1500 +$danger-forte: hsl(6, 100%, 33%) !default; // #A91000 + +/* Black & white */ +$black: hsl(0, 0, 0) !default; // #000000 +$black-alpha-87: rgba($black, .87) !default; // #000000DE +$black-alpha-54: rgba($black, .54) !default; // #0000008A +$black-alpha-38: rgba($black, .38) !default; // #00000061 +$black-alpha-26: rgba($black, .26) !default; // #00000042 +$black-alpha-12: rgba($black, .12) !default; // #0000001F + +$white: hsl(0, 100%, 100%) !default; // #FFFFFF +$white-alpha-70: rgba($white, .70) !default; // #FFFFFFB2 +$white-alpha-50: rgba($white, .50) !default; // #FFFFFF80 +$white-alpha-30: rgba($white, .30) !default; // #FFFFFF4D +$white-alpha-12: rgba($white, .12) !default; // #FFFFFF1F diff --git a/app/assets/stylesheets/globals/variables/_typography.scss b/app/assets/stylesheets/globals/variables/_typography.scss new file mode 100644 index 0000000..ec3ea61 --- /dev/null +++ b/app/assets/stylesheets/globals/variables/_typography.scss @@ -0,0 +1,15 @@ +@charset "UTF-8"; + +/* Typography variables go here */ + +/* Font Awesome icon font path */ +$fa-font-path: "font-awesome/fonts" !default; + +/* Open Sans font path */ +$open-sans-font-path: "open-sans/fonts" !default; + +/* Responsive font-size */ +$font-size-base-xs: 13px !default; +$font-size-base-sm: 15px !default; +$font-size-base-md: 17px !default; +$font-size-base-lg: 19px !default; diff --git a/app/assets/stylesheets/prouns/_all.scss b/app/assets/stylesheets/prouns/_all.scss index 9b7b506..76fef78 100644 --- a/app/assets/stylesheets/prouns/_all.scss +++ b/app/assets/stylesheets/prouns/_all.scss @@ -1,13 +1,18 @@ @charset "UTF-8"; +/* + All your prouns are belong to us! + + Proun was El Lissitsky's "проект утверждения нового" (design for the confirmation of the new), or + "the station where one changes from painting to architecture". + */ + @import "prouns/beta-logo", "prouns/beta-info", "prouns/button", "prouns/callout", "prouns/card", "prouns/divider", - "prouns/navigation-links", - "prouns/navigation-toggle", "prouns/navigation", "prouns/no-result", "prouns/profile-form", diff --git a/app/assets/stylesheets/prouns/_beta-logo.scss b/app/assets/stylesheets/prouns/_beta-logo.scss index a8e9933..cbe587d 100644 --- a/app/assets/stylesheets/prouns/_beta-logo.scss +++ b/app/assets/stylesheets/prouns/_beta-logo.scss @@ -22,7 +22,7 @@ @extend .hidden-xs; @extend .hidden-sm; @include shadow(); - background-color: $brand-primary; + background-color: $primary-piano; font-weight: bold; padding: .5em; position: absolute; @@ -36,7 +36,7 @@ a { @include uniform-anchor { - color: $btn-default-color; + color: $btn-primary-color; text-decoration: none; } } diff --git a/app/assets/stylesheets/prouns/_button.scss b/app/assets/stylesheets/prouns/_button.scss index 0624477..4a65767 100644 --- a/app/assets/stylesheets/prouns/_button.scss +++ b/app/assets/stylesheets/prouns/_button.scss @@ -1,40 +1,63 @@ @charset "UTF-8"; -// Buttons! -// Styleguide 3.1. +/* + Buttons! + Styleguide 3.1. + */ + +%is-disabled { + @extend .disabled; + background-color: $black-alpha-12; + color: $black-alpha-26; + + &:hover, + &:active, + &:focus { + background-color: $black-alpha-12; + } + + &:focus { + color: $black-alpha-12; + } +} -%btn { +%button { @extend .btn; - @include shadow(); font-size: $font-size-h5; + + &.is-disabled, + &:disabled, + &[disabled] { + @extend %is-disabled; + } +} + +.button-default { + @extend %button; + @extend .btn-default; } -.btn-new { - @extend %btn; +.button-primary { + @extend %button; @extend .btn-primary; } -.btn-new-alt { - @extend %btn; +.button-success { + @extend %button; @extend .btn-success; } -.btn-show { - @extend %btn; +.button-info { + @extend %button; @extend .btn-info; } -.btn-edit { - @extend %btn; +.button-warning { + @extend %button; @extend .btn-warning; } -.btn-destroy { - @extend %btn; +.button-danger { + @extend %button; @extend .btn-danger; } - -.btn-cancel { - @extend %btn; - @extend .btn-default; -} diff --git a/app/assets/stylesheets/prouns/_card.scss b/app/assets/stylesheets/prouns/_card.scss index 6dc99a6..2f2dcaa 100644 --- a/app/assets/stylesheets/prouns/_card.scss +++ b/app/assets/stylesheets/prouns/_card.scss @@ -1,11 +1,12 @@ @charset "UTF-8"; -// A card -// Styleguide 3.2. +/* + A card + Styleguide 3.2. + */ .card { - // @include shadow(); - // background-color: $gray-lightest; + background-color: $body-bg; display: inline-block; padding: 1em 1em 2em; position: relative; diff --git a/app/assets/stylesheets/prouns/_navigation-links.scss b/app/assets/stylesheets/prouns/_navigation-links.scss deleted file mode 100644 index d84fb24..0000000 --- a/app/assets/stylesheets/prouns/_navigation-links.scss +++ /dev/null @@ -1,8 +0,0 @@ -@charset "UTF-8"; - -.navigation-links { - ul { - @extend .nav; - @extend .navbar-nav; - } -} diff --git a/app/assets/stylesheets/prouns/_navigation-toggle.scss b/app/assets/stylesheets/prouns/_navigation-toggle.scss deleted file mode 100644 index aefc07b..0000000 --- a/app/assets/stylesheets/prouns/_navigation-toggle.scss +++ /dev/null @@ -1,9 +0,0 @@ -@charset "UTF-8"; - -.navigation-toggle { - button { - @extend .navbar-brand; - @extend .navbar-toggle; - margin: 0; - } -} diff --git a/app/assets/stylesheets/prouns/_navigation.scss b/app/assets/stylesheets/prouns/_navigation.scss index b5fcb43..4f0dd12 100644 --- a/app/assets/stylesheets/prouns/_navigation.scss +++ b/app/assets/stylesheets/prouns/_navigation.scss @@ -1,6 +1,11 @@ @charset "UTF-8"; -.navigation { +/* + What's a site without ye olde navigation? + Styleguide 3.3. + */ + +[role="navigation"] { @extend .navbar; @extend .navbar-default; } @@ -18,3 +23,18 @@ @extend .collapse; @extend .navbar-collapse; } + +.navigation-links { + ul { + @extend .nav; + @extend .navbar-nav; + } +} + +.navigation-toggle { + button { + @extend .navbar-brand; + @extend .navbar-toggle; + margin: 0; + } +} diff --git a/app/assets/stylesheets/prouns/_result-list.scss b/app/assets/stylesheets/prouns/_result-list.scss deleted file mode 100644 index ad7c373..0000000 --- a/app/assets/stylesheets/prouns/_result-list.scss +++ /dev/null @@ -1,5 +0,0 @@ -@charset "UTF-8"; - -.result-list-header { - // @extend .text-center; -} diff --git a/app/assets/stylesheets/prouns/_showcase.scss b/app/assets/stylesheets/prouns/_showcase.scss index 6bd1a54..2262915 100644 --- a/app/assets/stylesheets/prouns/_showcase.scss +++ b/app/assets/stylesheets/prouns/_showcase.scss @@ -1,12 +1,13 @@ @charset "UTF-8"; -// A showcase block, usefull for catchy stuff -// Styleguide 3.3. +/* + A showcase proun, like a big telly init? + Styleguide 3.4. + */ .showcase { @include shadow(); background-color: $gray-lighter; - // border: $transparent-alpha-19 1px solid; display: inline-block; margin-bottom: 1em; padding: 2em; diff --git a/app/views/agents/measures/edit.html.haml b/app/views/agents/measures/edit.html.haml index 9c70eb9..b0ad5ca 100644 --- a/app/views/agents/measures/edit.html.haml +++ b/app/views/agents/measures/edit.html.haml @@ -15,7 +15,7 @@ = f.input(:url) = f.association(:social_rights) - = f.button(:submit, t('.update'), class: 'btn btn-edit') - = link_to(t('.show'), agents_measure_path(@measure), class: 'btn btn-show') - = link_to(t('.back'), agents_measures_path, class: 'btn btn-cancel') + = f.button(:submit, t('.update'), class: 'button-warning') + = link_to(t('.show'), agents_measure_path(@measure), class: 'button-info') + = link_to(t('.back'), agents_measures_path, class: 'button-default') diff --git a/app/views/agents/measures/index.html.haml b/app/views/agents/measures/index.html.haml index c5daa29..888a106 100644 --- a/app/views/agents/measures/index.html.haml +++ b/app/views/agents/measures/index.html.haml @@ -7,7 +7,7 @@ %hr .profile-list-new - = link_to(t('.new'), new_agents_measure_path, class: 'btn btn-new btn-lg') + = link_to(t('.new'), new_agents_measure_path, class: 'button-primary') .profile-list-content %table @@ -26,9 +26,9 @@ %td= measure.title %td= measure.public_service_title %td= measure.social_right_names - %td= link_to(t('.show'), agents_measure_path(measure), class: 'btn btn-show') - %td= link_to(t('.edit'), edit_agents_measure_path(measure), class: 'btn btn-edit') + %td= link_to(t('.show'), agents_measure_path(measure), class: 'button-info') + %td= link_to(t('.edit'), edit_agents_measure_path(measure), class: 'button-warning') %td - = link_to t('.destroy'), agents_measure_path(measure), class: 'btn btn-destroy', + = link_to t('.destroy'), agents_measure_path(measure), class: 'button-danger', method: :delete, data: { confirm: t('.confirm') } diff --git a/app/views/agents/measures/new.html.haml b/app/views/agents/measures/new.html.haml index cb5782d..93dc593 100644 --- a/app/views/agents/measures/new.html.haml +++ b/app/views/agents/measures/new.html.haml @@ -15,6 +15,6 @@ = f.input(:url) = f.association(:social_rights) - = f.button(:submit, t('.create'), class: 'btn btn-edit') - = link_to(t('.back'), agents_measures_path, class: 'btn btn-cancel') + = f.button(:submit, t('.create'), class: 'button-success') + = link_to(t('.back'), agents_measures_path, class: 'button-default') diff --git a/app/views/agents/measures/show.html.haml b/app/views/agents/measures/show.html.haml index 6f9a9cb..344bebb 100644 --- a/app/views/agents/measures/show.html.haml +++ b/app/views/agents/measures/show.html.haml @@ -29,5 +29,5 @@ %dd= @measure.updated_at .profile-actions - = link_to(t('.edit'), edit_agents_measure_path(@measure), class: 'btn btn-edit') - = link_to(t('.back'), agents_measures_path, class: 'btn btn-cancel') + = link_to(t('.edit'), edit_agents_measure_path(@measure), class: 'button-warning') + = link_to(t('.back'), agents_measures_path, class: 'button button-default') diff --git a/app/views/agents/public_services/edit.html.haml b/app/views/agents/public_services/edit.html.haml index 69d12f6..98632bc 100644 --- a/app/views/agents/public_services/edit.html.haml +++ b/app/views/agents/public_services/edit.html.haml @@ -18,7 +18,7 @@ = f.input(:response_time_upper_bound) = f.association(:social_rights) - = f.button(:submit, t('.update'), class: 'btn btn-edit') - = link_to(t('.show'), agents_public_service_path(@public_service), class: 'btn btn-show') - = link_to(t('.back'), agents_public_services_path, class: 'btn btn-cancel') + = f.button(:submit, t('.update'), class: 'button-warning') + = link_to(t('.show'), agents_public_service_path(@public_service), class: 'button-info') + = link_to(t('.back'), agents_public_services_path, class: 'button-default') diff --git a/app/views/agents/public_services/index.html.haml b/app/views/agents/public_services/index.html.haml index 9f33678..c21b89b 100644 --- a/app/views/agents/public_services/index.html.haml +++ b/app/views/agents/public_services/index.html.haml @@ -7,7 +7,7 @@ %hr .profile-list-new - = link_to(t('.new'), new_agents_public_service_path, class: 'btn btn-new btn-lg') + = link_to(t('.new'), new_agents_public_service_path, class: 'button-primary') .profile-list-content %table @@ -24,9 +24,9 @@ %tr %td= public_service.title %td= public_service.social_right_names - %td= link_to(t('.show'), agents_public_service_path(public_service), class: 'btn btn-show') - %td= link_to(t('.edit'), edit_agents_public_service_path(public_service), class: 'btn btn-edit') + %td= link_to(t('.show'), agents_public_service_path(public_service), class: 'button-info') + %td= link_to(t('.edit'), edit_agents_public_service_path(public_service), class: 'button-warning') %td - = link_to t('.destroy'), agents_public_service_path(public_service), class: 'btn btn-destroy', + = link_to t('.destroy'), agents_public_service_path(public_service), class: 'button-danger', method: :delete, data: { confirm: t('.confirm') } diff --git a/app/views/agents/public_services/new.html.haml b/app/views/agents/public_services/new.html.haml index 8150d23..be03b8b 100644 --- a/app/views/agents/public_services/new.html.haml +++ b/app/views/agents/public_services/new.html.haml @@ -18,6 +18,6 @@ = f.input(:response_time_upper_bound) = f.association(:social_rights) - = f.button(:submit, t('.create'), class: 'btn btn-new') - = link_to(t('.back'), agents_public_services_path, class: 'btn btn-cancel') + = f.button(:submit, t('.create'), class: 'button-success') + = link_to(t('.back'), agents_public_services_path, class: 'button-default') diff --git a/app/views/agents/public_services/show.html.haml b/app/views/agents/public_services/show.html.haml index 466d144..4aa0f70 100644 --- a/app/views/agents/public_services/show.html.haml +++ b/app/views/agents/public_services/show.html.haml @@ -45,5 +45,5 @@ %dd= @public_service.updated_at .profile-actions - = link_to(t('.edit'), edit_agents_public_service_path(@public_service), class: 'btn btn-edit') - = link_to(t('.back'), agents_public_services_path, class: 'btn btn-cancel') + = link_to(t('.edit'), edit_agents_public_service_path(@public_service), class: 'button-warning') + = link_to(t('.back'), agents_public_services_path, class: 'button-default') diff --git a/app/views/agents/service_offerings/edit.html.haml b/app/views/agents/service_offerings/edit.html.haml index 03ab687..9edce6e 100644 --- a/app/views/agents/service_offerings/edit.html.haml +++ b/app/views/agents/service_offerings/edit.html.haml @@ -19,7 +19,7 @@ = f.input(:response_time_upper_bound) = f.association(:social_rights) - = f.button(:submit, t('.update'), class: 'btn btn-edit') - = link_to(t('.show'), agents_service_offering_path(@service_offering), class: 'btn btn-show') - = link_to(t('.back'), agents_service_offerings_path, class: 'btn btn-cancel') + = f.button(:submit, t('.update'), class: 'button-warning') + = link_to(t('.show'), agents_service_offering_path(@service_offering), class: 'button-info') + = link_to(t('.back'), agents_service_offerings_path, class: 'button-default') diff --git a/app/views/agents/service_offerings/index.html.haml b/app/views/agents/service_offerings/index.html.haml index 9fab610..6a694fa 100644 --- a/app/views/agents/service_offerings/index.html.haml +++ b/app/views/agents/service_offerings/index.html.haml @@ -7,7 +7,7 @@ %hr .profile-list-new - = link_to(t('.new'), new_agents_service_offering_path, class: 'btn btn-new btn-lg') + = link_to(t('.new'), new_agents_service_offering_path, class: 'button-primary') .profile-list-content %table @@ -26,9 +26,9 @@ %td= service_offering.title %td= service_offering.public_service_title %td= service_offering.social_right_names - %td= link_to(t('.show'), agents_service_offering_path(service_offering), class: 'btn btn-show') - %td= link_to(t('.edit'), edit_agents_service_offering_path(service_offering), class: 'btn btn-edit') + %td= link_to(t('.show'), agents_service_offering_path(service_offering), class: 'button-info') + %td= link_to(t('.edit'), edit_agents_service_offering_path(service_offering), class: 'button-warning') %td - = link_to t('.destroy'), agents_service_offering_path(service_offering), class: 'btn btn-destroy', + = link_to t('.destroy'), agents_service_offering_path(service_offering), class: 'button-danger', method: :delete, data: { confirm: t('.confirm') } diff --git a/app/views/agents/service_offerings/new.html.haml b/app/views/agents/service_offerings/new.html.haml index f38653b..28ab593 100644 --- a/app/views/agents/service_offerings/new.html.haml +++ b/app/views/agents/service_offerings/new.html.haml @@ -19,6 +19,6 @@ = f.input(:response_time_upper_bound) = f.association(:social_rights) - = f.button(:submit, t('.create'), class: 'btn btn-edit') - = link_to(t('.back'), agents_service_offerings_path, class: 'btn btn-cancel') + = f.button(:submit, t('.create'), class: 'button-success') + = link_to(t('.back'), agents_service_offerings_path, class: 'button-default') diff --git a/app/views/agents/service_offerings/show.html.haml b/app/views/agents/service_offerings/show.html.haml index 60a75fa..c0528b1 100644 --- a/app/views/agents/service_offerings/show.html.haml +++ b/app/views/agents/service_offerings/show.html.haml @@ -51,5 +51,5 @@ %dd= @service_offering.updated_at .profile-actions - = link_to(t('.edit'), edit_agents_service_offering_path(@service_offering), class: 'btn btn-edit') - = link_to(t('.back'), agents_service_offerings_path, class: 'btn btn-cancel') + = link_to(t('.edit'), edit_agents_service_offering_path(@service_offering), class: 'button-warning') + = link_to(t('.back'), agents_service_offerings_path, class: 'button-default') diff --git a/app/views/blocks/_contact.html.haml b/app/views/blocks/_contact.html.haml index 301da78..9e231f5 100644 --- a/app/views/blocks/_contact.html.haml +++ b/app/views/blocks/_contact.html.haml @@ -7,4 +7,4 @@ = simple_form_for([project, service_offering, contact], wrapper: :vertical_form) do |f| = f.input :email_or_phone - = f.submit(t('views.result.contact.send'), class: 'btn btn-new') + = f.submit(t('views.result.contact.send'), class: 'button-primary') diff --git a/app/views/blocks/_result.html.haml b/app/views/blocks/_result.html.haml index 3dce5d8..22850e7 100644 --- a/app/views/blocks/_result.html.haml +++ b/app/views/blocks/_result.html.haml @@ -15,4 +15,4 @@ %footer.result-footer = link_to t('views.results.result_list.result_card.footer'), send("#{project.class.name.underscore}_service_offering_path", project, service_offering), - class: 'btn btn-new' + class: 'button-primary' diff --git a/app/views/housings/steps/housing.html.haml b/app/views/housings/steps/housing.html.haml index 73efb97..088a929 100644 --- a/app/views/housings/steps/housing.html.haml +++ b/app/views/housings/steps/housing.html.haml @@ -27,4 +27,4 @@ = f.input_field :resources, class: 'form-control' %span.input-group-addon € - = f.button :submit, 'Continuer', class: 'btn btn-new' + = f.button :submit, 'Continuer', class: 'button-primary' diff --git a/app/views/housings/steps/profile.html.haml b/app/views/housings/steps/profile.html.haml index 8f7a4e8..086def5 100644 --- a/app/views/housings/steps/profile.html.haml +++ b/app/views/housings/steps/profile.html.haml @@ -32,4 +32,4 @@ value_method: :to_i, as: :select - = f.button :submit, 'Continuer', class: 'btn btn-new' + = f.button :submit, 'Continuer', class: 'button-primary' diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml index 0011f7e..60f0977 100644 --- a/app/views/projects/show.html.haml +++ b/app/views/projects/show.html.haml @@ -28,4 +28,4 @@ = service %section.text-center - = link_to('Prendre un RDV', '#', class: 'btn btn-new') + = link_to('Prendre un RDV', '#', class: 'button-primary') diff --git a/app/views/projects/steps/awareness.html.haml b/app/views/projects/steps/awareness.html.haml index 1da85cc..4b284a7 100644 --- a/app/views/projects/steps/awareness.html.haml +++ b/app/views/projects/steps/awareness.html.haml @@ -14,4 +14,4 @@ value_method: :to_s, as: :radio_buttons - = f.button :submit, 'Continuer', class: 'btn btn-new' + = f.button :submit, 'Continuer', class: 'button-primary' diff --git a/app/views/projects/steps/formation.html.haml b/app/views/projects/steps/formation.html.haml index d155167..3c1b06a 100644 --- a/app/views/projects/steps/formation.html.haml +++ b/app/views/projects/steps/formation.html.haml @@ -16,4 +16,4 @@ = f.input :experience, label: "J'ai déjà une expérience dans ce domaine" - = f.button :submit, 'Continuer', class: 'btn btn-new' + = f.button :submit, 'Continuer', class: 'button-primary' diff --git a/app/views/projects/steps/inscriptions.html.haml b/app/views/projects/steps/inscriptions.html.haml index 56fe01d..5d128ea 100644 --- a/app/views/projects/steps/inscriptions.html.haml +++ b/app/views/projects/steps/inscriptions.html.haml @@ -17,4 +17,4 @@ - = f.button :submit, 'Continuer', class: 'btn btn-new' + = f.button :submit, 'Continuer', class: 'button-primary' diff --git a/app/views/projects/steps/profile.html.haml b/app/views/projects/steps/profile.html.haml index dba73c7..916182b 100644 --- a/app/views/projects/steps/profile.html.haml +++ b/app/views/projects/steps/profile.html.haml @@ -46,4 +46,4 @@ = f.input :intention, label: 'Je veux continuer mes études' = f.input :handicap, label: 'Je suis en situation de handicap' - = f.button :submit, 'Continuer', class: 'btn btn-new' + = f.button :submit, 'Continuer', class: 'button-primary' diff --git a/app/views/styleguides/1.html.haml b/app/views/styleguides/1.html.haml index e69de29..545ec67 100644 --- a/app/views/styleguides/1.html.haml +++ b/app/views/styleguides/1.html.haml @@ -0,0 +1,4 @@ +-# encoding: utf-8 + += kss_block '3.1' do + = render(partial: 'styleguides/base/table') diff --git a/app/views/styleguides/3.html.haml b/app/views/styleguides/3.html.haml index 1256b08..98e09f2 100644 --- a/app/views/styleguides/3.html.haml +++ b/app/views/styleguides/3.html.haml @@ -1,41 +1,13 @@ -# encoding: utf-8 = kss_block '3.1' do - %button.btn.btn-new{ style: 'width: 15%;' } - Action button - - %button.btn.btn-new-alt{ style: 'width: 15%;' } - Alt button - - %button.btn.btn-show{ style: 'width: 15%;' } - Show button - - %button.btn.btn-edit{ style: 'width: 15%;' } - Edit button - - %button.btn.btn-destroy{ style: 'width: 15%;' } - Destroy button - - %button.btn.btn-cancel{ style: 'width: 15%;' } - Cancel button - + = render(partial: 'styleguides/prouns/button') = kss_block '3.2' do - - public_service = PublicService.new - - public_service.title = 'Pôle Emploi' - - public_service.url = 'pole-emploi.fr' - - public_service.description = 'Trouver un boulot grâce à La Bonne Boîte !' - - = render(partial: 'blocks/public_service', locals: { public_service: public_service }) + = render(partial: 'styleguides/prouns/card') = kss_block '3.3' do - - project = Working.new - - project.id = 1 - - service_offering = ServiceOffering.new - - service_offering.id = 1 - - service_offering.response_time_upper_bound = 1 - - contact = Contact.new - - = render partial: 'blocks/contact', - locals: { project: project, service_offering: service_offering, contact: contact } + = render(partial: 'styleguides/prouns/navigation') += kss_block '3.4' do + = render(partial: 'styleguides/prouns/showcase') diff --git a/app/views/styleguides/base/_table.html.haml b/app/views/styleguides/base/_table.html.haml new file mode 100644 index 0000000..aab8588 --- /dev/null +++ b/app/views/styleguides/base/_table.html.haml @@ -0,0 +1,25 @@ +-# encoding: utf-8 + +%table + %thead + %tr + %th Forename + %th Surname + %th Super power + + %tbody + %tr + %td Karl + %td Marx + %td Has a lovely beard + + %tr + %td Vladimir + %td Lenin + %td Leads the proletarian revolution from Switzerland + + %tr + %td Fidel + %td Castro + %td Lived longer than Methuselah + diff --git a/app/views/styleguides/prouns/_button.html.haml b/app/views/styleguides/prouns/_button.html.haml new file mode 100644 index 0000000..92b1972 --- /dev/null +++ b/app/views/styleguides/prouns/_button.html.haml @@ -0,0 +1,23 @@ +-# encoding: utf-8 + +%div{ style: 'display: block;' } + %button.button-default{ style: 'width: 12.5%;' } + Default + + %button.button-primary{ style: 'width: 12.5%;' } + Primary + + %button.button-success{ style: 'width: 12.5%;' } + Success + + %button.button-info{ style: 'width: 12.5%;' } + Info + + %button.button-warning{ style: 'width: 12.5%;' } + Warning + + %button.btn.button-danger{ style: 'width: 12.5%;' } + Danger + + %button.button-default.is-disabled{ style: 'width: 12.5%;' } + Disabled diff --git a/app/views/styleguides/prouns/_card.html.haml b/app/views/styleguides/prouns/_card.html.haml new file mode 100644 index 0000000..311eda7 --- /dev/null +++ b/app/views/styleguides/prouns/_card.html.haml @@ -0,0 +1,9 @@ +-# encoding: utf-8 + +:ruby + public_service = PublicService.new + public_service.title = 'Pôle Emploi' + public_service.url = 'pole-emploi.fr' + public_service.description = 'Trouver un boulot grâce à La Bonne Boîte !' + += render(partial: 'blocks/public_service', locals: { public_service: public_service }) diff --git a/app/views/styleguides/prouns/_navigation.html.haml b/app/views/styleguides/prouns/_navigation.html.haml new file mode 100644 index 0000000..b68d359 --- /dev/null +++ b/app/views/styleguides/prouns/_navigation.html.haml @@ -0,0 +1,18 @@ +-# encoding: utf-8 + +%nav{ role: 'navigation' } + .l-container-wide + .navigation-header + = link_to 'Communism', '#' + + .navigation-body + %section.navigation-links + %ul + %li{ class: 'is-active' } + %a{ href: '#' } Marx + + %li + %a{ href: '#' } Lenin + + %li.disabled + %a{ href: '#' } Fidel diff --git a/app/views/styleguides/prouns/_showcase.html.haml b/app/views/styleguides/prouns/_showcase.html.haml new file mode 100644 index 0000000..1cf7691 --- /dev/null +++ b/app/views/styleguides/prouns/_showcase.html.haml @@ -0,0 +1,12 @@ +-# encoding: utf-8 + +:ruby + project = Working.new + project.id = 1 + service_offering = ServiceOffering.new + service_offering.id = 1 + service_offering.response_time_upper_bound = 1 + contact = Contact.new + += render partial: 'blocks/contact', + locals: { project: project, service_offering: service_offering, contact: contact } diff --git a/app/views/visitors/index.html.haml b/app/views/visitors/index.html.haml index c57a296..aba4288 100644 --- a/app/views/visitors/index.html.haml +++ b/app/views/visitors/index.html.haml @@ -23,16 +23,16 @@ %section.callout - if feature?(:working) - = link_to(t('views.landing.callout'), workings_path, method: :post, class: 'btn btn-new') + = link_to(t('views.landing.callout'), workings_path, method: :post, class: 'button-primary') - if feature?(:training) - = link_to(t('views.landing.callout'), trainings_path, method: :post, class: 'btn btn-new') + = link_to(t('views.landing.callout'), trainings_path, method: :post, class: 'button-primary') - if feature?(:housing) - = link_to(t('views.landing.callout'), housings_path, method: :post, class: 'btn btn-new') + = link_to(t('views.landing.callout'), housings_path, method: :post, class: 'button-primary') - if feature?(:healthcaring) - = link_to(t('views.landing.callout'), healthcarings_path, method: :post, class: 'btn btn-new') + = link_to(t('views.landing.callout'), healthcarings_path, method: :post, class: 'button-primary') - if feature?(:how_does_it_work) %br diff --git a/app/views/workings/steps/awareness.html.haml b/app/views/workings/steps/awareness.html.haml index 80ae0ba..c6622d5 100644 --- a/app/views/workings/steps/awareness.html.haml +++ b/app/views/workings/steps/awareness.html.haml @@ -15,4 +15,4 @@ value_method: :to_s, as: :radio_buttons - = f.button :submit, 'Continuer', class: 'btn btn-new' + = f.button :submit, 'Continuer', class: 'button-primary' diff --git a/app/views/workings/steps/inscriptions.html.haml b/app/views/workings/steps/inscriptions.html.haml index c28bd37..67898b5 100644 --- a/app/views/workings/steps/inscriptions.html.haml +++ b/app/views/workings/steps/inscriptions.html.haml @@ -14,4 +14,4 @@ = f.input :cap_emploi, as: :radio_buttons = f.input :apec, as: :radio_buttons - = f.button :submit, 'Continuer', class: 'btn btn-new' + = f.button :submit, 'Continuer', class: 'button-primary' diff --git a/app/views/workings/steps/project.html.haml b/app/views/workings/steps/project.html.haml index b87a0d8..0335c68 100644 --- a/app/views/workings/steps/project.html.haml +++ b/app/views/workings/steps/project.html.haml @@ -35,4 +35,4 @@ value_method: :to_s, as: :select - = f.button :submit, 'Continuer', class: 'btn btn-new' + = f.button :submit, 'Continuer', class: 'button-primary' diff --git a/app/views/workings/steps/situation.html.haml b/app/views/workings/steps/situation.html.haml index 90531f6..6c0e115 100644 --- a/app/views/workings/steps/situation.html.haml +++ b/app/views/workings/steps/situation.html.haml @@ -40,4 +40,4 @@ include_blank: false, input_html: { rel: 'autocomplete' } - = f.button :submit, 'Continuer', class: 'btn btn-new' + = f.button :submit, 'Continuer', class: 'button-primary'