Changeset 3365:11eb6b993152 for admin/style/scss/init

Timestamp:

10/26/16 14:09:23 (9 years ago)

Author:

franck <carnet.franck.paul@…>

Branch:

default

Message:

Switch admin CSS to Sass/Compass?, to be continued…

Location:

admin/style/scss/init

Files:

• _config.scss (modified) (5 diffs)
• _mixins-functions.scss (modified) (1 diff)
• _rebase.scss (modified) (1 diff)

admin/style/scss/init/_config.scss

@@ -4 +4 @@
 // Do not support IE less than IE9
 $browser-minimum-versions: (
-  "ie": "9"
+  "ie": "10"
 );
 $graceful-usage-threshold: 100;
@@ -31 +31 @@
 
 // Palette de base
+
 $blue:                   #137bbb;
 $green:             #9ac123;
@@ -41 +42 @@
 
 $gray-very-dark:    shade($gray, 72%);       // #323232 (near to #333 used before)
+$gray-semi-dark:    shade($gray, 25%);       // #868686 (near to #999 used before)
 $gray-light:        tint($gray, 30%);        // #c9c9c9 (near to #ccc used before)
 $gray-very-light:   tint($gray, 85%);        // #f3f3f3 (near to #f7f7f7 used before)
@@ -46 +48 @@
 $white:                  #fff;
 $black:                  #000;
+
+// Couleurs secondaires
+
+
 
 // Application
@@ -62 +68 @@
 
 // Autres
+
 $css-img-path: 'img'; // utile pour le mixin de fallback svg
 

admin/style/scss/init/_mixins-functions.scss

@@ -1 +1 @@
 // mixin svg fallback
 @mixin svg(
-    $file-name,
-    $css-img-path: $css-img-path)
+     $file-name,
+     $css-img-path: $css-img-path)
 {
-    background-image: inline-image($file-name+'.png');
-    background-image: inline-image($file-name+'.svg'), none;
+     background-image: inline-image($file-name+'.png');
+     background-image: inline-image($file-name+'.svg'), none;
 }
 
 @mixin bg-with-svg(
-    $file-name,
-    $css-img-path: $css-img-path,
-    $repeat: no-repeat,
-    $position: 50% 50%,
-    $bg-color: transparent)
+     $file-name,
+     $css-img-path: $css-img-path,
+     $repeat: no-repeat,
+     $position: 50% 50%,
+     $bg-color: transparent)
 {
-    background: inline-image($file-name+'.png') $repeat, $position, $bg-color;
-    background-image: inline-image($file-name+'.svg'), none;
+     background: inline-image($file-name+'.png') $repeat, $position, $bg-color;
+     background-image: inline-image($file-name+'.svg'), none;
 }
 
+// Mix from Nico3333 (https://github.com/nico3333fr/ROCSSTI/blob/master/src/css/rocssti-fr.css#L637)
+// and ffood (http://www.ffoodd.fr/cache-cache-css/)
 @mixin visually-hidden {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
+     border: 0;
+     clip: rect(0 0 0 0);
+     clip-path: inset(50%);
+     height: 1px;
+     margin: -1px;
+     overflow: hidden;
+     padding: 0;
+     position: absolute;
+     width: 1px;
+     white-space: nowrap;
+}
+@mixin visually-hidden-focus {
+     clip: auto;
+     clip-path: none;
+     height: auto;
+     overflow: visible;
+     position: static;
+     width: auto;
+     white-space: normal;
 }
 
 // Remove any unit from a value
 @function strip-unit(
-    $value)
+     $value)
 {
-    @return $value / ($value * 0 + 1);
+     @return $value / ($value * 0 + 1);
 }
 
 // Compute absolute value (in em or rem) depending on font-size of the html element (given in %)
 @function relative-to-screen(
-    $value,             // em or rem value
-    $html-font-size)    // in %
+     $value,             // em or rem value
+     $html-font-size)    // in %
 {
-    @return $value / (strip-unit($html-font-size) / 100);
+     @return $value / (strip-unit($html-font-size) / 100);
 }

admin/style/scss/init/_rebase.scss

@@ -154 +154 @@
      margin: 0;
 }
-/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
+
+/* Screen-reader only */
 .visually-hidden {
      @include visually-hidden;
+     &:focus,
+     &:active {
+          @include visually-hidden-focus;
+     }
 }