Add data.gouv.fr colours

etalab · Oct 23, 2017 · 545e628 · 545e628
1 parent 3ebc9b1
commit 545e628
Show file tree

Hide file tree

Showing 35 changed files with 224 additions and 209 deletions.
diff --git a/.sass-lint.yml b/.sass-lint.yml
@@ -55,7 +55,7 @@ rules:
   force-pseudo-nesting: 2
 
   # Name Formats
-  class-name-format: 2
+  class-name-format: 0
   function-name-format: 2
   id-name-format: 0
   mixin-name-format: 2

diff --git a/client/package.json b/client/package.json
@@ -29,8 +29,6 @@
     "leaflet": "^1.2.0",
     "showdown": "^1.7.6",
     "node-sass": "^4.5.3",
-    "normalize.css": "^7.0.0",
-    "purecss": "^1.0.0",
     "riot": "^3.7.3",
     "riot-tag-loader": "^1.0.0",
     "sass-loader": "^6.0.6",

diff --git a/client/stylesheets/base/_buttons.scss b/client/stylesheets/base/_buttons.scss
@@ -2,6 +2,34 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
-  @extend .pure-button;
-  outline: none;
+  &,
+  &:focus,
+  &:active,
+  &:visited {
+    background-color: $secondary;
+    border: 1px solid transparent;
+    border-bottom: 1px solid $border;
+    border-radius: 2px;
+    box-shadow: 0 1px 4px 0 $box-shadow-button;
+    color: $background-white;
+    display: inline-block;
+    font-family: $font-family-secondary;
+    font-size: 1.2em;
+    margin: 0 auto;
+    outline: none;
+    overflow: hidden;
+    padding: .85em 3em;
+    position: relative;
+    transition: box-shadow .25s;
+  }
+
+  &:hover {
+    box-shadow: inset 0 0 0 2em $box-shadow-button-hover;
+    text-decoration: none;
+  }
+
+  &:active {
+    border-bottom: 0;
+    transform: translateY(1px);
+  }
 }
diff --git a/client/stylesheets/base/_forms.scss b/client/stylesheets/base/_forms.scss
diff --git a/client/stylesheets/base/_layout.scss b/client/stylesheets/base/_layout.scss
@@ -1,6 +1,17 @@
 body {
+  background: $background-white;
   margin: 0;
   overflow: auto;
   padding: 0;
   position: relative;
 }
+
+a {
+  &,
+  &:hover,
+  &:focus,
+  &:visited,
+  &:active {
+    color: $primary;
+  }
+}
diff --git a/client/stylesheets/base/_media.scss b/client/stylesheets/base/_media.scss
diff --git a/client/stylesheets/base/_tables.scss b/client/stylesheets/base/_tables.scss
diff --git a/client/stylesheets/base/_typography.scss b/client/stylesheets/base/_typography.scss
@@ -1,6 +1,6 @@
 body {
-  font-family: 'Source Sans Pro', Arial, sans-serif;
-  font-size: 15px;
+  font-family: $font-family-primary;
+  font-size: $font-size;
 }
 
 h1,
@@ -9,7 +9,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'Evolventa', 'Trebuchet MS', sans-serif;
+  font-family: $font-family-secondary;
 }
 
 h1,
@@ -25,11 +25,10 @@ h2 {
   font-size: calc(.5vw + 1em);
 }
 
-a,
-[role='link'] {
+a {
   outline: none;
-  text-decoration: none;
 
+  &,
   &:hover,
   &:focus,
   &:visited,

diff --git a/client/stylesheets/components/_buttons.scss b/client/stylesheets/components/_buttons.scss
@@ -1,25 +1,3 @@
-%button {
-  @extend .pure-button;
-  $color: $white !default;
-  $text-shadow: rgba($black, .2) !default;
-
-  border-radius: .25em;
-  color: $color;
-  line-height: 1em;
-  text-shadow: $text-shadow;
-}
-
-[role='button'],
-[role='link'] {
-  &.button-success {
-    @extend %button;
-    $button-color-success: $green !default;
-    background: $button-color-success;
-  }
-
-  &.button-warning {
-    @extend %button;
-    $button-color-warning: $red !default;
-    background: $button-color-warning;
-  }
+.button {
+  @extend button;
 }
diff --git a/client/stylesheets/components/_cards.scss b/client/stylesheets/components/_cards.scss
@@ -38,10 +38,4 @@
   .details {
     border-bottom: 1px solid darken($light-grey, 30%);
   }
-
-  [role='link'] {
-    &.button {
-      @extend .button-success;
-    }
-  }
 }
diff --git a/client/stylesheets/components/_container.scss b/client/stylesheets/components/_container.scss
@@ -0,0 +1,17 @@
+.container {
+  @include media-tablet-up {
+    padding: 0;
+    width: 85%;
+  }
+
+  @include media-desktop-up {
+    width: 80%;
+  }
+
+  box-sizing: border-box;
+  margin: 0 auto;
+  max-width: 80em;
+  padding: 0 20px;
+  position: relative;
+  width: 100%;
+}
diff --git a/client/stylesheets/components/_icons.scss b/client/stylesheets/components/_icons.scss
@@ -0,0 +1,11 @@
+.icon {
+  @extend .fa;
+}
+
+.icon--login {
+  @extend .fa-sign-in;
+}
+
+.icon--logout {
+  @extend .fa-sign-out;
+}
diff --git a/client/stylesheets/components/_message.scss b/client/stylesheets/components/_message.scss
@@ -1,7 +1,11 @@
-.info {
-  background-color: $green;
+.message--success {
+  background: $background-message-success;
 }
 
-.error {
-  background-color: $red;
+.message--info {
+  background: $background-message-info;
+}
+
+.message--error {
+  background: $background-message-error;
 }
diff --git a/client/stylesheets/components/_navigation.scss b/client/stylesheets/components/_navigation.scss
@@ -6,33 +6,12 @@
   float: right;
   height: modular-scale(1);
 
-  [role='link'] {
-    &.navigation-login {
-      @extend .button-success;
-      @include mobile {
-        background: none;
-        display: inline;
-      }
-
-      i {
-        @extend .fa;
-        @extend .fa-sign-in;
-
-      }
+  .navigation__link {
+    @include media-tablet-up {
+      line-height: modular-scale(3);
     }
 
-    &.navigation-logout {
-      @extend .button-warning;
-      @include mobile {
-        background: none;
-        display: inline;
-      }
-
-      i {
-        @extend .fa;
-        @extend .fa-sign-out;
-
-      }
-    }
+    color: $white;
+    line-height: modular-scale(1);
   }
 }
diff --git a/client/stylesheets/contexts/_landing.scss b/client/stylesheets/contexts/_landing.scss
@@ -8,8 +8,9 @@
 
 .landing-hero {
   @include grid-container;
-  background-color: $light-grey;
+  background: $background-white;
   padding: 2em 0;
+  width: 100%;
 
   .landing-column {
     @include grid-mobile(1, 1);
@@ -34,8 +35,6 @@
   &.landing-open,
   &.landing-reuse,
   &.landing-reuse-marker {
-    @extend .button-success;
-
     i {
       @extend .fa;
     }
@@ -48,24 +47,18 @@
   }
 
   &.landing-open {
-    font-size: calc(2vw + .5em);
-
     i {
       @extend .fa-folder-open;
     }
   }
 
   &.landing-reuse {
-    font-size: calc(2vw + .5em);
-
     i {
       @extend .fa-mobile-phone;
     }
   }
 
   &.landing-reuse-marker {
-    font-size: modular-scale(2);
-
     i {
       @extend .fa-mobile-phone;
     }

diff --git a/client/stylesheets/contexts/_login.scss b/client/stylesheets/contexts/_login.scss
@@ -18,13 +18,7 @@
 
     [role='link'] {
       &.login-signin {
-        @extend .button-success;
         font-size: $font-size;
-
-        i {
-          @extend .fa;
-          @extend .fa-sign-in;
-        }
       }
     }
   }

diff --git a/client/stylesheets/globals/_externals.scss b/client/stylesheets/globals/_externals.scss
@@ -1,8 +1,6 @@
 // External styles and libraries.
 
-@import '~normalize.css';
 @import '~bourbon/core/bourbon';
 @import '~bourbon-neat/core/neat';
-@import '~purecss';
 @import '~leaflet/dist/leaflet';
 @import '~font-awesome/scss/font-awesome';
diff --git a/client/stylesheets/globals/_variables.scss b/client/stylesheets/globals/_variables.scss
@@ -1,20 +1,63 @@
 // Variables to setup globally some site standard values.
 
-// Colours
+// # Colours
 
-$light-grey: hsl(0, 0%, 93%);
-$dark-grey: hsl(0, 0%, 20%);
-$white: hsl(0, 0%, 100%);
-$black: hsl(0, 0%, 0%);
-$green: hsl(134, 74%, 42%);
-$red: hsl(29, 84%, 48%);
-$dark-blue: hsl(215, 58%, 34%);
+$light-green:                 hsl(122, 38%, 84%) !default;
+$light-red:                   hsl(354, 100%, 90%) !default;
+$light-blue:                  hsl(207, 89%, 86%) !default;
+$blue:                        hsl(201, 63%, 56%) !default;
+$dark-blue:                   hsl(201, 50%, 44%) !default;
+$white:                       hsl(0, 0%, 100%) !default;
+$almost-black:                hsl(0, 0%, 25%) !default;
+$black:                       hsl(0, 0%, 11%) !default;
+$light-grey:                  hsl(0, 0%, 91%) !default;
+$grey:                        hsl(0, 0%, 85%) !default;
+$dark-grey:                   hsl(0, 0%, 80%) !default;
+$black-alpha-2:               hsla(0, 0%, 0%, .3) !default;
+$black-alpha-3:               hsla(0, 0%, 0%, .3) !default;
 
-// Content breakpoints
+// # Theme colours
 
-$breakpoint-tablet: 40em;
-$breakpoint-desktop: 53.75em;
+$primary:                     $blue !default;
+$primary-darker:              $blue !default;
+$secondary:                   $blue !default;
+$secondary-darken:            $dark-blue !default;
+$border:                      $dark-grey !default;
+$border-lighter:              $grey !default;
+$background-white:            $white !default;
+$background-grey:             $light-grey !default;
+$background-color:            $blue !default;
+$background-dark:             $black !default;
+$box-shadow:                  $grey !default;
+$dark-text:                   $almost-black !default;
 
-// Other global variables
+// # Component colours
 
-$fa-font-path: '~font-awesome/fonts';
+// ## Dropdown
+
+$box-shadow-dropdown:         $black-alpha-2 !default;
+
+// ## Buttons
+$box-shadow-button:           $black-alpha-3 !default;
+$box-shadow-button-hover:     $secondary-darken !default;
+
+// ## Messages
+
+$background-message-success:  $light-green;
+$background-message-info:     $light-blue;
+$background-message-error:    $light-red;
+
+// # Typography
+
+$font-size:                   15px;
+$font-family-primary:         'Source Sans Pro', Arial, sans-serif !default;
+$font-family-secondary:       'Evolventa', 'Trebuchet MS', sans-serif !default;
+
+// # Content breakpoints
+
+$breakpoint-tablet:           40em !default;
+$breakpoint-desktop:          53.75em !default;
+
+// # Other global variables
+
+$fa-font-path:                '~font-awesome/fonts' !default;