Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
| kb_it:css [2022/10/21 17:00] – [Des lignes de tableau "collapsible"] befe | kb_it:css [2022/10/21 17:27] (Version actuelle) – [Des lignes de tableau "collapsible"] befe | ||
|---|---|---|---|
| Ligne 36: | Ligne 36: | ||
| <code css> | <code css> | ||
| + | $transition-delay: | ||
| + | |||
| table { | table { | ||
| border-collapse: | border-collapse: | ||
| - | |||
| - | & thead, | ||
| & tbody { | & tbody { | ||
| & tr { | & tr { | ||
| & | & | ||
| + | & td { | ||
| + | line-height: | ||
| + | opacity: 1; | ||
| + | transition: all $transition-delay ease-in; | ||
| + | & > div { // Si le tableau doit contenir autre chose que du texte | ||
| + | max-height: 10rem; // A adapter | ||
| + | overflow: hidden; | ||
| + | transition: max-height $transition-delay ease-in; | ||
| + | } | ||
| + | } | ||
| & | & | ||
| - | transition-delay: | ||
| visibility: collapse; | visibility: collapse; | ||
| + | transition-delay: | ||
| & td { | & td { | ||
| line-height: | line-height: | ||
| Ligne 52: | Ligne 61: | ||
| padding-bottom: | padding-bottom: | ||
| opacity: 0; | opacity: 0; | ||
| - | + | | |
| - | | + | |
| max-height: 0rem; | max-height: 0rem; | ||
| } | } | ||
| } | } | ||
| - | } | ||
| - | |||
| - | & td { | ||
| - | transition: all $transition-delay ease-in; | ||
| - | line-height: | ||
| - | |||
| - | & > div { // Uniquement si le tableau doit contenir autre chose que du texte | ||
| - | transition: max-height $transition-delay ease-in; | ||
| - | max-height: 10rem; // A adapter | ||
| - | overflow: hidden; | ||
| - | } | ||
| - | } | ||
| - | } | ||
| - | & td { | ||
| - | opacity: 1; | ||
| - | &: | ||
| - | padding-top: | ||
| - | padding-bottom: | ||
| - | } | ||
| - | & .expand-button { | ||
| - | padding: 4px 10px; | ||
| - | width: 28px; | ||
| } | } | ||
| } | } | ||
| Ligne 90: | Ligne 76: | ||
| <code css> | <code css> | ||
| .el { | .el { | ||
| - | | + | |
| - | text-shadow: | + | text-shadow: |
| - | | + | -1px -1px rgba(0, |
| } | } | ||
| </ | </ | ||
| Ligne 100: | Ligne 86: | ||
| <code css> | <code css> | ||
| .el { | .el { | ||
| - | | + | |
| - | opacity: .25; | + | opacity: .25; |
| - | text-shadow: | + | text-shadow: |
| } | } | ||
| </ | </ | ||
| Ligne 126: | Ligne 112: | ||
| <code css> | <code css> | ||
| $breakpoints: | $breakpoints: | ||
| - | | + | |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| ); | ); | ||
| @mixin media-min($_key) { | @mixin media-min($_key) { | ||
| - | | + | |
| - | &{ @content; } | + | &{ @content; } |
| - | } | + | } |
| } | } | ||
| .class { | .class { | ||
| - | | + | |
| - | + | @include media-min(" | |
| - | | + | font-size: 1.2em; |
| - | font-size: 1.2em; | + | } |
| - | } | + | |
| } | } | ||
| </ | </ | ||
| - | + | ==== Code SCSS compilé à la volée | |
| - | ==== Utiliser du code SCSS directement dans le navigateur | + | |
| Télécharger sass.js (https:// | Télécharger sass.js (https:// | ||
| Ligne 162: | Ligne 146: | ||
| .my-class { | .my-class { | ||
| color: red; | color: red; | ||
| - | | ||
| & .my-subclass { | & .my-subclass { | ||
| color: blue; | color: blue; | ||