Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
kb_it:css [2022/10/21 17:21] – [Des lignes de tableau "collapsible"] befekb_it:css [2022/10/21 17:27] (Version actuelle) – [Des lignes de tableau "collapsible"] befe
Ligne 47: Ligne 47:
           opacity: 1;           opacity: 1;
           transition: all $transition-delay ease-in;           transition: all $transition-delay ease-in;
-          & > div { // Uniquement si le tableau doit contenir autre chose que du texte+          & > div { // Si le tableau doit contenir autre chose que du texte
             max-height: 10rem; // A adapter             max-height: 10rem; // A adapter
             overflow: hidden;             overflow: hidden;
Ligne 55: Ligne 55:
         &.collapsed {         &.collapsed {
           visibility: collapse;           visibility: collapse;
-          transition-delay: $transition-delay;+          transition-delay: $transition-delay; // Utile ??
           & td {           & td {
             line-height: 0%;             line-height: 0%;
Ligne 61: Ligne 61:
             padding-bottom: 0;             padding-bottom: 0;
             opacity: 0;             opacity: 0;
-            & > div { // Uniquement si le tableau doit contenir autre chose que du texte+            & > div { // Si le tableau doit contenir autre chose que du texte
               max-height: 0rem;               max-height: 0rem;
             }             }
Ligne 76: Ligne 76:
 <code css> <code css>
 .el { .el {
-    color: rgba(0,0,0,.1); +  color: rgba(0,0,0,.1); 
-    text-shadow:  1px  1px rgba(255,255,255,1), +  text-shadow: 1px  1px rgba(255,255,255,1), 
-                 -1px -1px rgba(0,0,0,.6)+              -1px -1px rgba(0,0,0,.6)
 } }
 </code> </code>
Ligne 86: Ligne 86:
 <code css> <code css>
 .el { .el {
-    color: black; +  color: black; 
-    opacity: .25; +  opacity: .25; 
-    text-shadow: 1px 1px rgb(255 255 255);+  text-shadow: 1px 1px rgb(255 255 255);
 } }
 </code> </code>
Ligne 112: Ligne 112:
 <code css> <code css>
 $breakpoints: ( $breakpoints: (
-    "phone-down":    500px, +  "phone-down":    500px, 
-    "tablet-up":     768px, +  "tablet-up":     768px, 
-    "tablet-down":   900px, +  "tablet-down":   900px, 
-    "desktop-up":    1024px, +  "desktop-up":    1024px, 
-    "desktop-down":  1280px, +  "desktop-down":  1280px, 
-    "widescreen-up": 1440px+  "widescreen-up": 1440px
 ); );
  
 @mixin media-min($_key) { @mixin media-min($_key) {
-    @media screen and (min-width: map-get($breakpoints, $_key)) { +  @media screen and (min-width: map-get($breakpoints, $_key)) { 
-        &{ @content; } +    &{ @content; } 
-    }+  }
 } }
  
 .class { .class {
-    font-size: 1em; +  font-size: 1em; 
-     +  @include media-min("tablet-up") { 
-    @include media-min("tablet-up") { +    font-size: 1.2em; 
-        font-size: 1.2em; +  }
-    }+
 } }
 </code> </code>
- 
 ==== Code SCSS compilé à la volée ==== ==== Code SCSS compilé à la volée ====