Changeset 3365:11eb6b993152 for admin/style/scss

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

Files:

• default.scss (modified) (2 diffs)
• init/_config.scss (modified) (5 diffs)
• init/_mixins-functions.scss (modified) (1 diff)
• init/_rebase.scss (modified) (1 diff)
• partials/_buttons.scss (modified) (7 diffs)
• partials/_charte.scss (modified) (1 diff)
• partials/_classes.scss (modified) (1 diff)
• partials/_colors.scss (added)
• partials/_common.scss (modified) (5 diffs)
• partials/_header.scss (modified) (1 diff)
• partials/_layout.scss (modified) (27 diffs)
• partials/_mediaqueries.scss (added)
• partials/_plugins.scss (modified) (1 diff)
• partials/_tables.scss (modified) (1 diff)

admin/style/scss/default.scss

@@ -26 +26 @@
 --------------------------------------------------- */
 @import "partials/layout";
+
+/** --------------------------------------------------
+     Colors
+--------------------------------------------------- */
+@import "partials/colors";
 
 /** --------------------------------------------------
@@ -70 +75 @@
 @import "partials/classes";
 @import "partials/utils";
+@import "partials/mediaqueries";

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;
+     }
 }

admin/style/scss/partials/_buttons.scss

@@ -46 +46 @@
 input.button.start {
     color: #fff;
-    background-color: #25A6E1;
-    background-image: -webkit-gradient(linear, left top, left bottom, from(#25A6E1), to(#188BC0));
-    background-image: linear-gradient(#25A6E1, #188BC0);
-    border-color: #25A6E1;
+    background-color: #25a6e1;
+    @include background-image(linear-gradient(to bottom, #25a6e1, #188bc0));
+    border-color: #25a6e1;
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
@@ -59 +58 @@
 a.button.submit:hover,
 a.button.submit:focus {
-    background-color: #188BC0;
-    background-image: -webkit-gradient(linear, left top, left bottom, from(#188BC0), to(#25A6E1));
-    background-image: linear-gradient(#188BC0, #25A6E1);
-    border-color: #188BC0;
+    background-color: #188bc0;
+    @include background-image(linear-gradient(to bottom, #188bc0, #25a6e1));
+    border-color: #188bc0;
 }
 
@@ -80 +78 @@
 a.button.reset {
     color: #000;
-    background-color: #EAEAEA;
-    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#EAEAEA));
-    background-image: linear-gradient(#f9f9f9, #EAEAEA);
+    background-color: #eaeaea;
+    @include background-image(linear-gradient(to bottom, #f9f9f9, #eaeaea));
     background-repeat: repeat-x;
-    border-color: #dfdfdf #dfdfdf #C5C5C5;
+    border-color: #dfdfdf #dfdfdf #c5c5c5;
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
 }
@@ -110 +107 @@
 a.button.reset:focus,
 a.button:focus {
-    background-color: #DADADA;
-    background-image: -webkit-gradient( linear, left top, left bottom, from(#EAEAEA), to(#DADADA));
-    background-image: linear-gradient(#EAEAEA, #DADADA);
+    background-color: #dadada;
+    @include background-image(linear-gradient(to bottom, #eaeaea, #dadada));
     background-repeat: repeat-x;
-    border-color: #CCCCCC #CCCCCC #B5B5B5;
+    border-color: #cccccc #cccccc #b5b5b5;
 }
 
@@ -132 +128 @@
 input.delete:focus,
 a.button.delete:focus {
-    color: #FFFFFF;
-    background-color: #B33630;
-    background-image: -webkit-gradient( linear, left top, left bottom, from(#DC5F59), to(#B33630));
-    background-image: linear-gradient(#DC5F59, #B33630);
+    color: #ffffff;
+    background-color: #b33630;
+    @include background-image(linear-gradient(to bottom, #dc5f59, #b33630));
     background-repeat: repeat-x;
-    border-color: #CD504A;
+    border-color: #cd504a;
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
 }
@@ -149 +144 @@
     color: #000;
     background-color: #bee74b;
-    background-image: -webkit-gradient(linear, left top, left bottom, from(#bee74b), to(#9BCA1C));
-    background-image: linear-gradient(#bee74b, #9BCA1C);
+    @include background-image(linear-gradient(to bottom, #bee74b, #9bca1c));
     border-color: #bee74b;
     padding: .33em 1.33em .5em;
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-    font-weight: normal;
-    font-size: 1.16em;
+//    font-weight: normal;
+//    font-size: 1.16em;
 }
 
@@ -161 +155 @@
 .button.add:active,
 .button.add:focus {
-    background-color: #9BCA1C;
-    background-image: -webkit-gradient(linear, left top, left bottom, from(#9BCA1C), to(#bee74b));
-    background-image: linear-gradient(#9BCA1C, #bee74b);
-    border-color: #9BCA1C;
+    background-color: #9bca1c;
+    @include background-image(linear-gradient(to bottom, #9bca1c, #bee74b));
+    border-color: #9bca1c;
 }
 

admin/style/scss/partials/_charte.scss

@@ -1 +1 @@
 .guideline #content h2 {
-    color: #D33800;
+    color: #d33800;
     padding: 2em 0 0 0;
     margin: 1em 0;

admin/style/scss/partials/_classes.scss

@@ -32 +32 @@
 
 .ac_over {
-    background-color: #2373A8;
+    background-color: #2373a8;
     color: white;
 }

admin/style/scss/partials/_common.scss

@@ -1 +1 @@
 /* Typographie */
+
 // base //
 html {
@@ -32 +33 @@
      }
      font-family: $sans-serif;
-     color: $primary-color;
-     background: $primary-background;
 }
 #wrapper {
@@ -51 +50 @@
      line-height: 1.25;
      padding: 0 0 1.5em;
-     color: $ternary-color;
 }
 h3, .as_h3 {
@@ -58 +56 @@
      line-height: 1.5;
      margin-top: 1em;
-     color: $secondary-color;
 }
 h4, .as_h4 {
      font-size: 1.16em;
      line-height: 1.5;
-     color: $ternary-color;
 }
 h5 {
@@ -69 +65 @@
      line-height: 1.5;
      font-weight: bold;
-     color: $ternary-color;
 }
 h6 {
      font-size: 1em;
      line-height: 1.5;
-     color: $ternary-color;
 }
 

admin/style/scss/partials/_header.scss

@@ -2 +2 @@
 
 #prelude {
-    line-height: 1.5;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    position: absolute;
-    top: 3em;
-    left: 0;
-    background: #A2CBE9;
-    width: 100%;
-    z-index: 100;
+     line-height: 1.5;
+     margin: 0;
+     padding: 0;
+     overflow: hidden;
+     position: absolute;
+     top: 3em;
+     left: 0;
+     background: $light-blue;
+     width: 100%;
+     z-index: 100;
+     li {
+          list-style-type: none;
+          margin: 0;
+          background: transparent;
+          display: inline;
+          a {
+               padding: 3px 16px 3px 8px;
+               background: $light-blue;
+               color: $black;
+               text-decoration: underline;
+               &:hover, &:focus {
+                    background: $white;
+               }
+          }
+     }
 }
-
-#prelude li {
-    list-style-type: none;
-    margin: 0;
-    background: transparent;
-    display: inline;
-}
-
-#prelude li a {
-    padding: 3px 16px 3px 8px;
-    background: #A2CBE9;
-    color: #000;
-    text-decoration: underline;
-}
-
-#prelude li a:hover,
-#prelude li a:focus {
-    background: #FFF;
-}
-
 
 /* si le prélude est affiché on repousse les trucs dessous */
 
 #wrapper.with-prelude {
-    padding-top: 1em;
+     padding-top: 1em;
 }
 
 #help-button.with-prelude,
 #collapser.with-prelude {
-    top: 1em;
+     top: 1em;
 }
-
 
 /* header global h1, form#top-info-blog, ul#top-info-user */
 
 #header a {
-    color: #FFF;
+     color: $white;
 }
 
 #header img {
-    vertical-align: middle;
-    padding-left: .5em;
+     vertical-align: middle;
+     padding-left: .5em;
 }
-
 
 /* h1 */
 
 h1 {
-    text-indent: 100%;
-    width: 16.5em;
+     text-indent: 100%;
+     width: 16.5em;
+     a {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 150px;
+          height: 3em;
+          color: $white;
+          background: transparent url(dc_logos/b-dotclear120.png) no-repeat 0 6px;
+          transition: none;
+          &:hover,
+          &:focus {
+               background-position: 0 -94px;
+               background-color: transparent;
+               transition: none;
+          }
+          &:link {
+               transition-timing-function: ease-in-out;
+          }
+     }
 }
-
-h1 a {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 150px;
-    height: 3em;
-    color: #fff;
-    background: transparent url(dc_logos/b-dotclear120.png) no-repeat 0 6px;
-    transition: none;
-}
-
-h1 a:hover,
-h1 a:focus {
-    background-position: 0 -94px;
-    background-color: transparent;
-    transition: none;
-}
-
-h1 a:link {
-    transition-timing-function: ease-in-out;
-}
-
 
 /* top-info-blog */
 
 #top-info-blog select {
-    max-width: 20em;
+     max-width: 20em;
 }
 
 #top-info-blog a {
-    margin-left: 1.5em;
+     margin-left: 1.5em;
 }
 
 #top-info-blog input[type=submit] {
-    background: #000;
-    border-color: #999;
-    margin-left: .33em;
+     background: $black;
+     border-color: $gray-semi-dark;
+     margin-left: .33em;
 }
 
 #top-info-blog input[type=submit]:hover {
-    background: #999;
+     background: $gray-semi-dark;
 }
 
 #top-info-blog p {
-    display: inline-block;
-    margin: 0;
+     display: inline-block;
+     margin: 0;
 }
-
 
 /* top-info-user */
 
 #top-info-user {
-    padding-right: 18px;
-    list-style-type: none;
-    text-align: right;
+     padding-right: 18px;
+     list-style-type: none;
+     text-align: right;
 }
 
 #top-info-user li {
-    display: inline-block;
-    margin-left: .5em;
-    padding-left: .5em;
-    border-left: 1px solid #999;
+     display: inline-block;
+     margin-left: .5em;
+     padding-left: .5em;
+     border-left: 1px solid $gray-semi-dark;
 }
 
 #top-info-user li:first-child {
-    border-left: none;
+     border-left: none;
 }
 
 #top-info-user a.active {
-    border-bottom-color: #fff;
-    margin: 0;
-    padding: 18px .5em;
-    background-color: #fff;
-    color: #333;
-    font-weight: bold;
+     border-bottom-color: $white;
+     margin: 0;
+     padding: 18px .5em;
+     background-color: $white;
+     color: $primary-color;
+     font-weight: bold;
 }
+
+/* ------------------------------------------------------------------------------------
+                                                            UN POIL DE MEDIA QUERIES
+------------------------------------------------------------------------------------ */
+
+@media screen and (max-width: $xl-screen) {
+     #top-info-user {
+          padding-right: .5em;
+     }
+     #top-info-user a.active {
+          padding: 2px 8px;
+          border-width: 0;
+          border-radius: 6px;
+     }
+}
+
+@media screen and (max-width: $xxs-screen) {
+     h1,
+     h1 a {
+          padding: 0;
+     }
+}
+
+@media screen and (max-width: $xs-screen) {
+     h1 a:link {
+          background: transparent url(dc_logos/b-dotclear120.png) no-repeat -270px 6px;
+     }
+     h1 a:hover,
+     h1 a:focus {
+          background: url(dc_logos/b-dotclear120.png) no-repeat -270px -94px;
+     }
+}

admin/style/scss/partials/_layout.scss

@@ +1 @@
+// Admin layout
 #dotclear-admin {
     display: flex;
@@ -6 +7 @@
 
 #header {
-    background: $ternary-background;
-    color: $white;
-    border-bottom: 4px solid $light-blue;
-    width: 99.99%;
-    /* Bugfix Chrome >= 49.0.2623.108 */
+    width: 99.99%; /* Bugfix Chrome >= 49.0.2623.108 */
     display: table;
     position: relative;
@@ -31 +28 @@
     width: 100%;
     z-index: 10;
-    background: $secondary-background url(bg_wrapper.png) repeat-y 14em;
     flex: 1;
 }
@@ -49 +45 @@
     margin: 0 0 0 14em;
     padding: .5em 1.5em .75em 2.5em;
-    background: $white;
 }
 
@@ -59 +54 @@
     padding-bottom: 1em;
     overflow: hidden;
-    background: $secondary-background;
 }
 
@@ -67 +61 @@
     padding: .5em 0 .5em 1em;
     text-align: left;
-    border-top: 1px solid $gray-light; // #ccc;
-    background-color: $white;
 }
 
@@ -82 +74 @@
     overflow: hidden;
     display: block;
-    background: $light-blue; // #f3f3f3 url(../images/collapser-hide.png) no-repeat center bottom;
     border-right: 0; // 1px solid #999;
     border-bottom: 0;
@@ -93 +84 @@
 }
 
-
 /* if main-menu is hidden */
-
-#wrapper.hide-mm {
-    background: $white;
-}
 
 .hide-mm #main {
@@ -118 +104 @@
 .hide-mm #collapser {
     left: 0;
-    //    background: #e3e3e3 url(../images/collapser-show.png) no-repeat center bottom;
 }
 
@@ -128 +113 @@
     display: block;
 }
-
 
 /* -------------------------------------------------------------- layout: two-cols */
@@ -227 +211 @@
     width: 100%;
     margin: 0;
-    background: $ternary-background;
     font-size: 1.5em;
     text-indent: 1em;
     line-height: 1.5em;
     font-weight: normal;
-    color: $white;
 }
 
@@ -307 +289 @@
     clear: both;
 }
-
 
 /*
@@ -346 +327 @@
 }
 
-
 /* ------------------------------------------------------------------------------------
-                                                                           UN POIL DE MEDIA QUERIES
+                                                            UN POIL DE MEDIA QUERIES
 ------------------------------------------------------------------------------------ */
 
-@media screen and (min-width: $xl-screen) {
-    #wrapper {
-        background: $secondary-background url(bg_wrapper.png) repeat-y 17em;
-    }
+@media screen and (max-width: $xl-screen) {
     #main {
         margin-left: -17em;
@@ -370 +347 @@
         width: 19.5em;
     }
-}
-
-@media screen and (max-width: $l-screen) {
     #top-info-blog #switchblog {
         max-width: 16em;
@@ -383 +357 @@
         width: 100%;
         text-align: right;
-        background: $gray-very-dark;
     }
     #header h1,
     #header h1 a {
         width: 120px;
-        padding: 0;
         margin: 0;
     }
@@ -400 +372 @@
         display: block;
         width: 100%;
-        background: $ternary-background;
-        padding-right: 0;
-    }
-    #top-info-user li:last-child {
-        padding-right: 1em;
-    }
-    #top-info-user a.active {
-        padding: 2px 8px;
-        background: #999;
-        color: #FFF;
-        border-width: 0;
-        border-radius: 6px;
     }
     .three-boxes,
@@ -439 +399 @@
         height: 26px;
         width: 26px;
-        background-color: $light-blue;
-        padding: 0;
         margin: 0;
-        font-size: .83em;
-        line-height: 68px;
         overflow: hidden;
     }
@@ -478 +434 @@
         height: 42px;
     }
-    h1 a:link {
-        background: transparent url(dc_logos/b-dotclear120.png) no-repeat -270px 6px;
-        border-right: 1px solid $gray-light;
-    }
-    h1 a:hover,
-    h1 a:focus {
-        background: url(dc_logos/b-dotclear120.png) no-repeat -270px -94px;
-        border-right: 1px solid $light-blue;
-    }
     #wrapper,
     #main,
@@ -495 +442 @@
         margin: 0;
     }
-    #dashboard-main {
-        padding: 0;
-    }
     #main-menu a {
         display: block;
@@ -508 +452 @@
     .hide-mm #content {
         margin: 0;
-        padding: 0 .5em !important;
     }
     #collapser {
@@ -515 +458 @@
     #main #content > h2 {
         margin: 0 -.25em 1em;
-        padding: 6px 30px 4px .5em;
     }
     #dashboard-boxes .box.medium,
@@ -529 +471 @@
     #filters-form .cell {
         display: inline-block;
-        border: none;
-        padding: 1em;
         vertical-align: bottom;
     }
@@ -537 +477 @@
         float: left;
         width: 50%;
-        border-top: 1px solid #ddd;
-        padding: .25em;
-    }
-    .pseudo-tabs li:first-child,
-    .pseudo-tabs li:nth-of-type(2) {
-        border-top: none;
     }
 }
 
 @media screen and (max-width: $xxs-screen) {
-    h1,
-    h1 a {
-        padding: 0;
-        border-right: $gray-very-dark !important;
-    }
     #top-info-blog label,
     .nomobile {
@@ -569 +498 @@
     #content.with-help #help {
         width: 28rem;
-        font-size: 1.2rem // 12px;
     }
     p.top-add {
         margin-bottom: .5em;
-        text-align: center;
-    }
-    .multi-part {
-        padding-left: 0;
     }
     .part-tabs ul {
         margin: 1em 0;
-        padding: 0 .5em;
     }
     .part-tabs li a {
@@ -588 +511 @@
     #icons p {
         width: 9em;
-        padding: 1em .25em;
     }
     .media-item {
@@ -601 +523 @@
     .box.current-theme {
         margin: 5px;
-        padding: 10px;
         width: 100%;
     }
@@ -612 +533 @@
         min-width: 14em;
     }
-    th,
-    td {
-        padding: 0.3em 1em 0.3em 0;
-    }
     .pseudo-tabs li {
         display: block;
         width: 100%;
         float: none;
-        border-top: 1px solid #ddd !important;
-    }
-    .pseudo-tabs li:first-child {
-        border-top: none;
-    }
-}
+    }
+}

admin/style/scss/partials/_plugins.scss

@@ -50 +50 @@
 .modules tr.expand td:first-child {
     font-weight: bold;
-    background: #DFE5E7;
+    background: #dfe5e7;
 }
 

admin/style/scss/partials/_tables.scss

@@ -37 +37 @@
 
 tr.line input[type=text] {
-    background: #FFF;
+    background: #fff;
 }