1 2 3 4 5 |
.js-quick-view { ul.rollover-content.top.in li.rollover-item:first-child & { border: 4px solid red !important; } } |
Mixins maison et autres joyeusetés en rapport avec SASS.
Source : nkd-show-more-list sur github. A ready-to-skin show more/show less jQuery/SASS component.
Live demo: https://jsfiddle.net/frontenddeveloper/fp7ntoyg/.
Just initialize the plug-in on an HTML UL/OL element, ID or class (on an UL/OL element), and set a value within the data-visible-amount
attribute. Keep HTML and classes structure.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<script type="text/javascript"> $(function(){ $('#myList').nkdShowMoreList(); }); </script> <div class="nkd-show-more-list no-js"> <ul id="myList" class="nkd-list nkd-has-hidden-content" data-visible-amount="4"> <li class="nkd-list-item">item #01</li> <li class="nkd-list-item">item #02</li> <li class="nkd-list-item">item #03</li> <li class="nkd-list-item">item #04</li> <li class="nkd-list-item">item #05</li> <li class="nkd-list-item">item #06</li> <li class="nkd-list-item">item #07</li> <li class="nkd-list-item">item #08</li> <li class="nkd-list-item">item #09</li> <li class="nkd-list-item">item #10</li> </ul> <p class="nkd-actions nkd-hidden"> <a class="nkd-show-more"> Show more... </a> <a class="nkd-show-less"> Show less... </a> </p> </div> |
Ressources en ligne:
Source: Sass Snippets: The Almighty Ampersand
Almost Profound — Sass Snippets_ The Almighty Ampersand (PDF)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.unicorn { background-color: blue; &:hover { outline: 2px solid yellow; } &.pink { background-color: pink; &wat { color: red; } &:hover { outine: 2px solid green; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.unicorn { background-color: blue; } .unicorn:hover { outline: 2px solid yellow; } .unicorn.pink { background-color: pink; } .unicorn.pinkwat { color: red; } .unicorn.pink:hover { outine: 2px solid green; } |
1 2 3 4 5 6 7 8 9 10 11 |
.unicorn { .set-one & { display: none; } } .button--large { .sidebar & { font-size: 80%; } } |
1 2 3 4 5 6 7 |
.set-one .unicorn { display: none; } .sidebar .button--large { font-size: 80%; } |
1 2 3 4 5 6 7 8 9 |
@mixin highlight() { color: coral; .sub-nav &, .active &, .sidebar & { background-color: gold; } } li a { @include highlight; } |
1 2 3 4 5 6 |
li a { color: coral; } .sub-nav li a, .active li a, .sidebar li a { background-color: gold; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// Previous Markup (Sass 3.3rc1) .speech-bubble{ color: purple; @at-root #{&}__header{ color: orange; } @at-root #{&}__text{ color: black; @at-root #{&}--link{ color: green; } } } // New Markup (Sass 3.3rc3) .speech-bubble{ color: purple; &__header{ color: orange; } &__text{ color: black; &--link{ color: green; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 |
.speech-bubble{ color: purple; } .speech-bubble__header{ color: orange; } .speech-bubble__text{ color: black; } .speech-bubble__text--link{ color: green; } |
1 2 3 4 5 6 |
.column--half { color: dimgrey; & + & { margin-left: 30px; } } |
1 2 3 4 5 6 |
.column--half { color: dimgrey; } .column--half + .column--half { margin-left: 30px; } |
Sources sur github.com – responsive-tables.
Source de départ: No more tables – This technique was developed by Chris Coyier (@chriscoyier) and described in his post Responsive Data Tables at css-tricks.com. While you’re there, you should probably check out the Responsive Tables Roundup post, which showcases all these techniques and more.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
@mixin no-more-tables-core() { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } td { /* Behave like a "row" */ border: none; position: relative; white-space: normal; &:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ white-space: nowrap; /* Label the data */ content: attr(data-title); } } } @mixin no-more-tables-skin( $thead-width: 33.33333%, $border-width: 1px, $border-color: #ccc, $padding-y: 8px, $padding-x: 10px, $text-align: left, $thead-font-weight: 700){ tr { border: $border-width solid $border-color; } td { /* Behave like a "row" */ border-bottom: $border-width solid $border-color; padding-left: $thead-width; text-align: $text-align; &:before { /* Top/left values mimic padding */ top: $padding-y; left: $padding-x; width: $thead-width - ($thead-width/10); padding-right: $padding-x; text-align: $text-align; font-weight: $thead-font-weight; } } } .no-more-tables { @include no-more-tables-core(); @include no-more-tables-skin(); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
<div class="no-more-tables"> <table> <thead> <tr> <th>Code</th> <th>Company</th> <th>Price</th> <th>Change</th> <th>Change %</th> <th>Open</th> <th>High</th> <th>Low</th> <th>Volume</th> </tr> </thead> <tbody> <tr> <td data-title="Code">AAC</td> <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td> <td data-title="Price">$1.38</td> <td data-title="Change">-0.01</td> <td data-title="Change %">-0.36%</td> <td data-title="Open">$1.39</td> <td data-title="High">$1.39</td> <td data-title="Low">$1.38</td> <td data-title="Volume">9,395</td> </tr> <tr> <td data-title="Code">AAD</td> <td data-title="Company">ARDENT LEISURE GROUP</td> <td data-title="Price">$1.15</td> <td data-title="Change"> +0.02</td> <td data-title="Change %">1.32%</td> <td data-title="Open">$1.14</td> <td data-title="High">$1.15</td> <td data-title="Low">$1.13</td> <td data-title="Volume">56,431</td> </tr> <tr> <td data-title="Code">AAX</td> <td data-title="Company">AUSENCO LIMITED</td> <td data-title="Price">$4.00</td> <td data-title="Change">-0.04</td> <td data-title="Change %">-0.99%</td> <td data-title="Open">$4.01</td> <td data-title="High">$4.05</td> <td data-title="Low">$4.00</td> <td data-title="Volume">90,641</td> </tr> <tr> <td data-title="Code">ABC</td> <td data-title="Company">ADELAIDE BRIGHTON LIMITED</td> <td data-title="Price">$3.00</td> <td data-title="Change"> +0.06</td> <td data-title="Change %">2.04%</td> <td data-title="Open">$2.98</td> <td data-title="High">$3.00</td> <td data-title="Low">$2.96</td> <td data-title="Volume">862,518</td> </tr> <tr> <td data-title="Code">ABP</td> <td data-title="Company">ABACUS PROPERTY GROUP</td> <td data-title="Price">$1.91</td> <td data-title="Change">0.00</td> <td data-title="Change %">0.00%</td> <td data-title="Open">$1.92</td> <td data-title="High">$1.93</td> <td data-title="Low">$1.90</td> <td data-title="Volume">595,701</td> </tr> <tr> <td data-title="Code">ABY</td> <td data-title="Company">ADITYA BIRLA MINERALS LIMITED</td> <td data-title="Price">$0.77</td> <td data-title="Change"> +0.02</td> <td data-title="Change %">2.00%</td> <td data-title="Open">$0.76</td> <td data-title="High">$0.77</td> <td data-title="Low">$0.76</td> <td data-title="Volume">54,567</td> </tr> <tr> <td data-title="Code">ACR</td> <td data-title="Company">ACRUX LIMITED</td> <td data-title="Price">$3.71</td> <td data-title="Change"> +0.01</td> <td data-title="Change %">0.14%</td> <td data-title="Open">$3.70</td> <td data-title="High">$3.72</td> <td data-title="Low">$3.68</td> <td data-title="Volume">191,373</td> </tr> <tr> <td data-title="Code">ADU</td> <td data-title="Company">ADAMUS RESOURCES LIMITED</td> <td data-title="Price">$0.72</td> <td data-title="Change">0.00</td> <td data-title="Change %">0.00%</td> <td data-title="Open">$0.73</td> <td data-title="High">$0.74</td> <td data-title="Low">$0.72</td> <td data-title="Volume">8,602,291</td> </tr> <tr> <td data-title="Code">AGG</td> <td data-title="Company">ANGLOGOLD ASHANTI LIMITED</td> <td data-title="Price" class="numeric">$7.81</td> <td data-title="Change" class="numeric">-0.22</td> <td data-title="Change %" class="numeric">-2.74%</td> <td data-title="Open" class="numeric">$7.82</td> <td data-title="High" class="numeric">$7.82</td> <td data-title="Low" class="numeric">$7.81</td> <td data-title="Volume" class="numeric">148</td> </tr> <tr> <td data-title="Code">AGK</td> <td data-title="Company">AGL ENERGY LIMITED</td> <td data-title="Price">$13.82</td> <td data-title="Change"> +0.02</td> <td data-title="Change %">0.14%</td> <td data-title="Open">$13.83</td> <td data-title="High">$13.83</td> <td data-title="Low">$13.67</td> <td data-title="Volume">846,403</td> </tr> <tr> <td data-title="Code">AGO</td> <td data-title="Company">ATLAS IRON LIMITED</td> <td data-title="Price">$3.17</td> <td data-title="Change">-0.02</td> <td data-title="Change %">-0.47%</td> <td data-title="Open">$3.11</td> <td data-title="High">$3.22</td> <td data-title="Low">$3.10</td> <td data-title="Volume">5,416,303</td> </tr> </tbody> </table> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$('.no-more-tables td').each(function(){ var $this = $(this); var thisHeight = $this.height(); var thisGetZero = $this.get(0); var thisBeforeHeightPx = window.getComputedStyle(thisGetZero, ':before').height; var thisBeforeHeight = parseInt(thisBeforeHeightPx, 10); var thisPaddingY = 8; if(thisHeight > thisBeforeHeight) { $this.css('height', thisHeight + (thisPaddingY*2) + 'px'); } if(thisHeight < thisBeforeHeight) { $this.css('height', thisBeforeHeight + (thisPaddingY*2) + 'px'); } else if(thisHeight == thisBeforeHeight) { $this.css('height', thisHeight + (thisPaddingY*2) + 'px'); } }); |
Sources sur github.com – responsive-tables.
Source de départ: Responsive Tables – Flip Scroll. his technique was first published by David Bushell (@dbushell). For the full low down on this technique visit his post on the technique, Responsive Tables (2). While you’re there, it’s also worth checking out his responsive calendar proof of concept.
Demo jsFiddle.net; Même chose (optimisé par Anthony)
Attention: le système de mediaqueries SASS/JS dans le code qui va suivre est issu de Foundation 6.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<div class="table-flip-scroll"> <table> <thead> <tr> <th scope="col">Brand</th> <th scope="col">Reference</th> <th scope="col">Ranges</th> </tr> </thead> <tbody> <tr> <td>NTN</td> <td>6205</td> <td>Single row tapered roller bearings</td> </tr> <tr> <td>SNR</td> <td>6205, 6205, 6205, 6205, 6205</td> <td>Single row tapered roller bearings</td> </tr> <tr> <td>SNR</td> <td>6205</td> <td> <ul> <li>Single row tapered roller bearings</li> <li>Single row deep groove ball bearings</li> <li>Single row tapered roller bearings</li> <li>Single row deep groove ball bearings</li> <li>Single row tapered roller bearings</li> </ul> </td> </tr> <tr> <td>SNR</td> <td>6205.E</td> <td> <ul> <li>Single row tapered roller bearings</li> <li>Single row deep groove ball bearings</li> </ul> </tr> </tbody> </table> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/* * jQuery Table Flip Scroll plug-in */ $.tableFlipScroll = function(selector){ var obj = $(selector); function matchCellsHeights(columnIndex){ columnIndex++ var columnCellsHeights = $.map(obj.find('th:nth-child('+columnIndex+'), td:nth-child('+columnIndex+')'), function(val){ return $(val).outerHeight(); }); var columnHighestCell = Math.max.apply(null, columnCellsHeights); obj.find('th:nth-child('+columnIndex+'), td:nth-child('+columnIndex+')').css('height', columnHighestCell +'px'); } var $th = obj.find('th'); $th.each(function(index){ matchCellsHeights(index); }); } /* * Responsive Product List Table */ if($('.table-flip-scroll').length == 1){ if(getCurrentMediaQuery === 'small' || getCurrentMediaQuery === 'medium'){ $('body').css('border', '12px solid navy'); $.tableFlipScroll('.table-flip-scroll'); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
@mixin table-flip-scroll-core() { table { display: block; position: relative; width: 100%; border-collapse: collapse; border-spacing: 0; thead { display: block; float: left; tr { display: block; } } tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; tr { display: inline-block; vertical-align: top; } } th, td { margin: 0; vertical-align: top; display: block; text-align: left; } } } @mixin table-flip-scroll-skin( $thead-width: 33.33333%, $border-width: 1px, $border-color: #ccc) { table { thead { width: $thead-width; } th { border-bottom: 0; border-left: 0; } td { border-left: 0; border-right: 0; border-bottom: 0; } tbody { tr { border-left: $border-width solid $border-color; } } th:last-child, td:last-child { border-bottom: $border-width solid $border-color; } } } @include breakpoint(medium down) { .table-flip-scroll { @include table-flip-scroll-core(); @include table-flip-scroll-skin(); .thead-second-row, .sort { display: none; } } } |
Le but de ce billet n’est pas de donner une solution toute faite mais plutôt une méthode pour étendre rapidement et efficacement les fonctionnalités de n’importe que plug-in jQuery de slider.
On crée un container dans lequel on place une balise <img>
aux attributs non renseignés. Cette balise va servir à accueillir l’image « en cours ».
1 2 3 4 |
<!-- Full-page carousel --> <div id="fullPageCarousel" class="full-page-carousel is-image"> <img src="" alt="" /> </div> |
On crée une fonction qui surveille en temps réel quelle image du carousel est affichée (celle qui possède la plupart du temps une classe .current
) et on stocke son URL dans une variable. On assigne ensuite le contenu de cette variable à l’attribut src
de notre image en haut de page.
On exécute la fonction au chargement de la page, puis à chaque fois que le DOM relatif au carousel évolue (passage d’une slide à l’autre).
1 2 3 4 5 6 7 8 9 10 |
/* * full page Carousel */ // Use 'default' view of slick carousel function switchImg(){ var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-current img').attr('src'); $('#fullPageCarousel img').attr('src', '').attr('src', getActiveImgURL); } switchImg(); $('#block-views-home-slider-block').bind('DOMSubtreeModified', switchImg); |
Utiliser la méthode .bind()
sur l’événement DOMSubtreeModified
ne fonctionne pas dans le cas où un changement de slide utilise plusieurs événements. (En réalité,
ça fonctionne, mais le console.log()
imprime plusieurs fois l’URL récupérée).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* * full page Carousel */ // Use 'default' view of slick carousel function switchImg(slideIndex){ if($('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' img').length > 0){ var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' img').first().attr('src'); $('#fullPageCarousel img').attr('src', '').attr('src', getActiveImgURL); } } switchImg(0); jQuery(document).on('beforeChange', '#slick-views-home-slider-1-slider', function (event, slick, currentSlide, nextSlide) { switchImg(nextSlide); }); |
On masque les images par défaut du carousel. On met en place quelques styles pour afficher les visuels en pleine page et pour les caler en haut de la fenêtre.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// // full page carousel #block-views-home-slider-block { img { display: none; } } .full-page-carousel { &.is-image { img { position: absolute; z-index: -1; top: 0; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* * full page Carousel */ // Use 'default' view of slick carousel function switchImg(slideIndex){ if($('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' .views-field-field-image img').length > 0){ var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' .views-field-field-image img').first().attr('src'); $('body') .attr('style', '') .css({ 'background-image': 'url("'+ getActiveImgURL +'")', 'background-position': 'top center', 'background-repeat': 'no-repeat' }); } } switchImg(0); jQuery(document).on('beforeChange', '#slick-views-home-slider-1-slider', function (event, slick, currentSlide, nextSlide) { switchImg(nextSlide); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
$foundation-palette: ( primary: #0070b8, secondary: #f08a00, tertiary: #6f7072, quaternary: #003f6c, quinary: #fecc00, senary: #a6a8aa, success: #2dcc70, warning: #ffae00, alert: #e20d0d, ); $light-gray: #e6e6e6; $medium-gray: #cacaca; $dark-gray: #8a8a8a; $black: #000000; $white: #ffffff; $body-background: $white; $body-font-color: $black; @include add-foundation-colors; $tertiary-color: get-color(tertiary); $quaternary-color: get-color(quaternary); $quinary-color: get-color(quinary); $senary-color: get-color(senary); $primary-color-white-25: mix(white, $primary-color, 25%); $primary-color-white-50: mix(white, $primary-color, 50%); $primary-color-black-25: mix(black, $primary-color, 25%); $primary-color-black-50: mix(black, $primary-color, 50%); $secondary-color-white-25: mix(white, $secondary-color, 25%); $secondary-color-white-50: mix(white, $secondary-color, 50%); $secondary-color-black-25: mix(black, $secondary-color, 25%); $secondary-color-black-50: mix(black, $secondary-color, 50%); $tertiary-color-white-25: mix(white, $tertiary-color, 25%); $tertiary-color-white-50: mix(white, $tertiary-color, 50%); $tertiary-color-black-25: mix(black, $tertiary-color, 25%); $tertiary-color-black-50: mix(black, $tertiary-color, 50%); $quaternary-color-white-25: mix(white, $quaternary-color, 25%); $quaternary-color-white-50: mix(white, $quaternary-color, 50%); $quaternary-color-black-25: mix(black, $quaternary-color, 25%); $quaternary-color-black-50: mix(black, $quaternary-color, 50%); $quinary-color-white-25: mix(white, $quinary-color, 25%); $quinary-color-white-50: mix(white, $quinary-color, 50%); $quinary-color-black-25: mix(black, $quinary-color, 25%); $quinary-color-black-50: mix(black, $quinary-color, 50%); $senary-color-white-25: mix(white, $senary-color, 25%); $senary-color-white-50: mix(white, $senary-color, 50%); $senary-color-black-25: mix(black, $senary-color, 25%); $senary-color-black-50: mix(black, $senary-color, 50%); $gradient-palette: ( primary: ( start: $primary-color, end: $quaternary-color, ), secondary: ( start: $secondary-color, end: $quinary-color, ), tertiary: ( start: $tertiary-color, end: $senary-color, ), quaternary: ( start: #373738, end: #535355, ), quinary: ( start: #d2d3d4, end: #f5f5f5, ), senary: ( start: #e5f0f7, end: #f2f8fb, ), ); $primary-gradient-start-color: map-deep-get($gradient-palette, primary, start); $primary-gradient-end-color: map-deep-get($gradient-palette, primary, end); $secondary-gradient-start-color: map-deep-get($gradient-palette, secondary, start); $secondary-gradient-end-color: map-deep-get($gradient-palette, secondary, end); $tertiary-gradient-start-color: map-deep-get($gradient-palette, tertiary, start); $tertiary-gradient-end-color: map-deep-get($gradient-palette, tertiary, end); $quaternary-gradient-start-color: map-deep-get($gradient-palette, quaternary, start); $quaternary-gradient-end-color: map-deep-get($gradient-palette, quaternary, end); $quinary-gradient-start-color: map-deep-get($gradient-palette, quinary, start); $quinary-gradient-end-color: map-deep-get($gradient-palette, quinary, end); $senary-gradient-start-color: map-deep-get($gradient-palette, senary, start); $senary-gradient-end-color: map-deep-get($gradient-palette, senary, end); |
1 |
mix(white, $color, $percentage); |
1 |
mix(black, $color, $percentage); |
Source : CSS Tricks – Gradient borders.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* * gradient border */ @mixin gradient-border( $border-width: 10px, $gradient-top-color: $white, $gradient-bottom-color: $black) { position: relative; border-top: $border-width solid $gradient-top-color; border-bottom: $border-width solid $gradient-bottom-color; &:before, &:after { content: ""; position: absolute; background-image: -webkit-gradient(linear, 0 0, 0 100%, from($gradient-top-color), to($gradient-bottom-color)); background-image: -webkit-linear-gradient($gradient-top-color, $gradient-bottom-color); background-image: -moz-linear-gradient($gradient-top-color, $gradient-bottom-color); background-image: -o-linear-gradient($gradient-top-color, $gradient-bottom-color); background-image: linear-gradient($gradient-top-color, $gradient-bottom-color); top: -$border-width; bottom: -$border-width; width: $border-width; } &:before { left: -$border-width; left: 0; //foundation 6 } &:after { right: -$border-width; right: 0; //foundation 6 } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
.top-to-bottom { border-width: 3px; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%; } .bottom-to-top { border-width: 3px; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%; } .left-to-right { border-width: 3px 0 3px 3px; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to right, black, rgba(0, 0, 0, 0)) 1 100%; } .right-to-left { border-width: 3px 3px 3px 0; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 0 0, 100% 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(left, black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to left, black, rgba(0, 0, 0, 0)) 1 100%; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.ps-top-to-bottom { position: relative; border-top: 3px solid black; } .ps-top-to-bottom:before, .ps-top-to-bottom:after { content: ""; position: absolute; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent)); background-image: -webkit-linear-gradient(#000, transparent); background-image: -moz-linear-gradient(#000, transparent); background-image: -o-linear-gradient(#000, transparent); background-image: linear-gradient(#000, transparent); top: -3px; bottom: -3px; width: 3px; } .ps-top-to-bottom:before { left: -3px; } .ps-top-to-bottom:after { right: -3px; } .bot-left { position: relative; } .bot-left:before, .bot-left:after { content: ""; position: absolute; bottom: -3px; left: -3px; } .bot-left:before { top: -3px; width: 3px; background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000), to(transparent)); background-image: -webkit-linear-gradient(transparent, #000); background-image: -moz-linear-gradient(transparent, #000); background-image: -o-linear-gradient(transparent, #000); } .bot-left:after { right: -3px; height: 3px; background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#000), to(transparent)); background-image: -webkit-linear-gradient(left, #000, transparent); background-image: -moz-linear-gradient(left, #000, transparent); background-image: -o-linear-gradient(left, #000, transparent); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
.knockout-top-to-bottom { position: relative; } .knockout-top-to-bottom:before, .knockout-top-to-bottom:after { content: ""; position: absolute; } .knockout-top-to-bottom:before { top: -3px; left: -3px; bottom: 0; right: -3px; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent)); background-image: -webkit-linear-gradient(#000, transparent); background-image: -moz-linear-gradient(#000, transparent); background-image: -o-linear-gradient(#000, transparent); z-index: -2; } .knockout-top-to-bottom:after { z-index: -1; top: 0; left: 0; bottom: 0; right: 0; background: #a4b9ff; } .knockout-around { position: relative; } .knockout-around:before, .knockout-around:after { content: ""; position: absolute; } .knockout-around:before { top: -3px; left: -3px; right: -3px; bottom: -3px; background-image: -webkit-gradient(radial, right top, 10, 90% 0%, 150, from(#000), to(transparent)); background-image: -webkit-radial-gradient(right top, 150px 230px, #000, transparent); background-image: -moz-radial-gradient(right top, farthest-corner, #000 0%, transparent 72%); z-index: -2; } .knockout-around:after { top: 0; left: 0; bottom: 0; right: 0; background: #a4b9ff; z-index: -1; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.multbg-top-to-bottom { border-top: 3px solid black; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent)); background-image: -webkit-linear-gradient(#000, transparent); background-image: -moz-linear-gradient(#000, transparent), -moz-linear-gradient(#000, transparent); background-image: -o-linear-gradient(#000, transparent), -o-linear-gradient(#000, transparent); background-image: linear-gradient(#000, transparent), linear-gradient(#000, transparent); -moz-background-size: 3px 100%; background-size: 3px 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat; } |
Le markup standard du composant Tabs de Foundation 6 est conservé. On adapte juste les styles.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.tabs { &-title { text-transform: uppercase; font-weight: bold; > a { border-left: 2px solid #fff; border-right: 2px solid #fff; } &:first-child { > a { border-left: 2px solid $tab-background; border-right: 2px solid #fff; &:hover, &[aria-selected="true"] { border-left: 2px solid $tab-background-active; border-right: 2px solid #fff; } } } &:last-child { > a { border-left: 2px solid #fff; border-right: 2px solid $tab-background; &:hover, &[aria-selected="true"] { border-left: 2px solid #fff; border-right: 2px solid $tab-background-active; } } } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.tabs { width: 100%; display: table; table-layout: fixed; &::after, &::before { content: none; // F6 Tabs component core styles reset } &-title { float: none; // F6 Tabs component core styles reset display: table-cell; text-align: center; } } |
Ou sous forme de composant supplémentaire en rajoutant la classe tabs-table
au <ul class="tabs">
standard :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.tabs { // table mode custom component &-table { width: 100%; display: table; table-layout: fixed; &.tabs::after, &.tabs::before { content: none; } .tabs-title { float: none; display: table-cell; text-align: center; } } } |