Small style improvements

.scss-lint.yml

@@ -0,0 +1,354 @@
+# Default application configuration that all configurations inherit from.
+
+linters:
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+
+  BorderZero:
+    enabled: true
+
+  ColorKeyword:
+    enabled: true
+
+  ColorVariable:
+    enabled: true
+
+  Comment:
+    enabled: true
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DuplicateProperty:
+    enabled: true
+
+  ElsePlacement:
+    enabled: true
+    style: same_line # or 'new_line'
+
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: true
+
+  EmptyRule:
+    enabled: true
+
+  FinalNewline:
+    enabled: true
+    present: true
+
+  HexLength:
+    enabled: true
+    style: long # 'short' or 'long'
+
+  HexNotation:
+    enabled: true
+    style: uppercase # 'lowercase' or 'uppercase'
+
+  HexValidation:
+    enabled: true
+
+  IdSelector:
+    enabled: true
+
+  ImportantRule:
+    enabled: true
+
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+
+  Indentation:
+    enabled: true
+    character: space # or 'tab'
+    width: 2
+
+  LeadingZero:
+    enabled: true
+    style: include_zero # exclude_zero or 'include_zero'
+
+  MergeableSelector:
+    enabled: true
+    force_nesting: true
+
+  # NameFormat:
+  #   enabled: false
+  #   convention: BEM # hyphenated_lowercase or 'BEM', or a regex pattern
+
+  NestingDepth:
+    enabled: true
+    max_depth: 4
+
+  PlaceholderInExtend:
+    enabled: true
+
+  PropertySortOrder:
+    enabled: true
+    order:
+      - font
+      - font-family
+      - font-size
+      - font-weight
+      - font-style
+      - font-variant
+      - font-size-adjust
+      - font-stretch
+      - font-effect
+      - font-emphasize
+      - font-emphasize-position
+      - font-emphasize-style
+      - font-smooth
+      - line-height
+      -            # This empty element signals a visual separation
+      - position
+      - z-index
+      - top
+      - right
+      - bottom
+      - left
+      -
+      - display
+      - visibility
+      - float
+      - clear
+      - overflow
+      - overflow-x
+      - overflow-y
+      - clip
+      - zoom
+      - flex-direction
+      - flex-order
+      - flex-pack
+      - flex-align
+      -
+      - box-sizing
+      - width
+      - min-width
+      - max-width
+      - height
+      - min-height
+      - max-height
+      - margin
+      - margin-top
+      - margin-right
+      - margin-bottom
+      - margin-left
+      - padding
+      - padding-top
+      - padding-right
+      - padding-bottom
+      - padding-left
+      -
+      - table-layout
+      - empty-cells
+      - caption-side
+      - border-spacing
+      - border-collapse
+      - list-style
+      - list-style-position
+      - list-style-type
+      - list-style-image
+      -
+      - content
+      - quotes
+      - counter-reset
+      - counter-increment
+      - resize
+      - cursor
+      - user-select
+      - nav-index
+      - nav-up
+      - nav-right
+      - nav-down
+      - nav-left
+      - transition
+      - transition-delay
+      - transition-timing-function
+      - transition-duration
+      - transition-property
+      - transform
+      - transform-origin
+      - animation
+      - animation-name
+      - animation-duration
+      - animation-play-state
+      - animation-timing-function
+      - animation-delay
+      - animation-iteration-count
+      - animation-direction
+      - text-align
+      - text-align-last
+      - vertical-align
+      - white-space
+      - text-decoration
+      - text-emphasis
+      - text-emphasis-color
+      - text-emphasis-style
+      - text-emphasis-position
+      - text-indent
+      - text-justify
+      - letter-spacing
+      - word-spacing
+      - text-outline
+      - text-transform
+      - text-wrap
+      - text-overflow
+      - text-overflow-ellipsis
+      - text-overflow-mode
+      - word-wrap
+      - word-break
+      - tab-size
+      - hyphens
+      - pointer-events
+      -
+      - opacity
+      - filter
+      - color
+      - border
+      - border-width
+      - border-style
+      - border-color
+      - border-top
+      - border-top-width
+      - border-top-style
+      - border-top-color
+      - border-right
+      - border-right-width
+      - border-right-style
+      - border-right-color
+      - border-bottom
+      - border-bottom-width
+      - border-bottom-style
+      - border-bottom-color
+      - border-left
+      - border-left-width
+      - border-left-style
+      - border-left-color
+      - border-radius
+      - border-top-left-radius
+      - border-top-right-radius
+      - border-bottom-right-radius
+      - border-bottom-left-radius
+      - border-image
+      - border-image-source
+      - border-image-slice
+      - border-image-width
+      - border-image-outset
+      - border-image-repeat
+      - outline
+      - outline-width
+      - outline-style
+      - outline-color
+      - outline-offset
+      - background
+      - background-color
+      - background-image
+      - background-repeat
+      - background-attachment
+      - background-position
+      - background-position-x
+      - background-position-y
+      - background-clip
+      - background-origin
+      - background-size
+      - box-decoration-break
+      - box-shadow
+      - text-shadow
+    separate_groups: true
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+
+  QualifyingElement:
+    enabled: true
+    allow_element_with_attribute: true
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 3
+
+  SelectorFormat:
+    enabled: true
+    convention: ^([\.\%]?[a-z]*[-]?[a-z0-9\-]*)(\.[a-z0-9\-]*)?(__[a-z0-9]*[-]?[a-z0-9\-]*)?(_[a-z0-9]*[-]?[a-z0-9\-]*)?(\:[a-z]*)*$ # or 'hyphenated_lowercase', or 'snake_case', or 'camel_case', or a regex pattern
+
+  Shorthand:
+    enabled: true
+    allowed_shorthands: [1, 2]
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: true
+
+  SingleLinePerSelector:
+    enabled: true
+
+  SpaceAfterComma:
+    enabled: true
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceAfterVariableName:
+    enabled: true
+
+  SpaceAroundOperator:
+    enabled: true
+
+  SpaceBeforeBrace:
+    enabled: true
+    allow_single_line_padding: false
+
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+
+  StringQuotes:
+    enabled: true
+    style: single_quotes # or double_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingZero:
+    enabled: true
+
+  TransitionAll:
+    enabled: true
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: true
+
+  UrlQuotes:
+    enabled: true
+
+  VariableForProperty:
+    enabled: true
+    properties: [color, font, background-color]
+
+  VendorPrefix:
+    enabled: true
+
+  ZeroUnit:
+    enabled: true
+
+  Compass::*:
+    enabled: false

app/assets/stylesheets/cookies_eu.scss

@@ -1,57 +1,59 @@
+$cookies-eu-background-color: #F2F2F2;
+$cookies-eu-border-color: #E4E4E4;
+$cookies-eu-button-background-color: #4D90FE;
+$cookies-eu-button-color: #FFFFFF;
+$cookies-eu-mobile: 'max-width: 767px';
+
 .cookies-eu {
+  line-height: 40px;
+
   position: fixed;
+  z-index: 999;
+  right: 0;
   bottom: 0;
   left: 0;
-  line-height: 40px;
-  background: #f2f2f2;
-  border-top: 1px solid #e4e4e4;
-  width: 100%;
-  z-index: 999;
+
+  padding: 0 20px;
+
   text-align: center;
 
-  .cookies-eu-content-holder {
-    display: inline-block;
-    padding: 0 20px;
-    line-height: 26px;
+  border-top: 1px solid $cookies-eu-border-color;
+  background: $cookies-eu-background-color;
+
+  @media ($cookies-eu-mobile) {
+    font-size: 12px;
+    line-height: 30px;
+
+    position: initial;
   }
-  .cookies-eu-button-holder {
+
+  & &-content-holder {
+    display: inline-block;
+
+    padding: 0 20px;
+  }
+
+  & &-button-holder {
     display: inline-block;
-    padding-right: 20px;
 
     .cookies-eu-ok {
-      background-color: #4d90fe;
-      background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
-      border: 1px solid #3079ed;
-      border-radius: 2px;
-      color: #fff;
-      cursor: default;
-      display: inline-block;
       font-size: 11px;
       font-weight: bold;
-      height: 24px;
+
       line-height: 20px;
-      margin-right: 0px;
+
       min-width: 26px;
-      outline: 0;
-      padding: 0 11px;
+      margin-right: 5px;
+      padding: 2px 11px;
+
+      cursor: pointer;
       text-align: center;
       white-space: nowrap;
-      margin: 0 5px;
-    }
-  }
-}
 
-@media (max-width: 767px){
-  .cookies-eu{
-    position: static;
-    font-size: 12px;
-    line-height: 20px;
-    .cookies-eu-content-holder{
-      line-height: 16px;
-      padding: 5px 20px;
-    }
-    .cookies-eu-button-holder{
-      padding-bottom: 5px;
+      color: $cookies-eu-button-color;
+      border: 0;
+      outline: none;
+      background-color: $cookies-eu-button-background-color;
     }
   }
 }