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:18] – [Des lignes de tableau "collapsible"] befe | kb_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 |
| - | transition: max-height $transition-delay ease-in; | + | |
| max-height: 10rem; // A adapter | max-height: 10rem; // A adapter | ||
| overflow: hidden; | overflow: hidden; | ||
| + | transition: max-height $transition-delay ease-in; | ||
| } | } | ||
| } | } | ||
| & | & | ||
| visibility: collapse; | visibility: collapse; | ||
| - | transition-delay: | + | transition-delay: |
| & td { | & td { | ||
| line-height: | line-height: | ||
| Ligne 61: | Ligne 61: | ||
| padding-bottom: | padding-bottom: | ||
| 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 { | ||
| - | | + | |
| - | text-shadow: | + | text-shadow: |
| - | | + | -1px -1px rgba(0, |
| } | } | ||
| </ | </ | ||
| Ligne 86: | Ligne 86: | ||
| <code css> | <code css> | ||
| .el { | .el { | ||
| - | | + | |
| - | opacity: .25; | + | opacity: .25; |
| - | text-shadow: | + | text-shadow: |
| } | } | ||
| </ | </ | ||
| Ligne 112: | 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 ==== | ==== Code SCSS compilé à la volée ==== | ||