Staging Buz

Buz Img Auto Slider v1.0

Transforme une liste d’image en slider automatique responsive en css & jQuery sans ajouter de markup spécifique.

Exemple :

Par défaut :

Sans Autoplay :

Sans Autoplay, sans Point de navigation et avec une hauteur maximum de 400px :

Markup html :

Par défaut :
<ul data-buz-img-auto-slider>
  <li><img src="images/img-auto-slider/lake-powell-sunset-1407774.jpg" alt=""></li>
  <li><img src="images/img-auto-slider/providence-river-1228638.jpg" alt=""></li>
  <li><img src="images/img-auto-slider/reliquia-1422415.jpg" alt=""></li>
  <li><img src="images/img-auto-slider/st-anne-s-on-sea-morning-sky-1563807.jpg" alt=""></li>
  <li><img src="images/img-auto-slider/sunset-beach-surfer-1565159.jpg" alt=""></li>
</ul>

Sans Autoplay :
<ul data-buz-img-auto-slider data-buz-options='{"autoplay": false}'>
  <li><img src="images/img-auto-slider/lake-powell-sunset-1407774.jpg" alt=""></li>
  <li><img src="images/img-auto-slider/providence-river-1228638.jpg" alt=""></li>
  <li><img src="images/img-auto-slider/reliquia-1422415.jpg" alt=""></li>
  <li><img src="images/img-auto-slider/st-anne-s-on-sea-morning-sky-1563807.jpg" alt=""></li>
  <li><img src="images/img-auto-slider/sunset-beach-surfer-1565159.jpg" alt=""></li>
</ul>

Sans Autoplay, sans Point de navigation et avec une hauteur maximum de 400px :
<ul data-buz-img-auto-slider data-buz-options='{"autoplay": false, "hideNavDots": true, "maxHeight": 400}'>
  <li><img src="images/img-auto-slider/lake-powell-sunset-1407774.jpg" alt=""></li>
  <li><img src="images/img-auto-slider/providence-river-1228638.jpg" alt=""></li>
  <li><img src="images/img-auto-slider/reliquia-1422415.jpg" alt=""></li>
  <li><img src="images/img-auto-slider/st-anne-s-on-sea-morning-sky-1563807.jpg" alt=""></li>
  <li><img src="images/img-auto-slider/sunset-beach-surfer-1565159.jpg" alt=""></li>
</ul>

Un attribut spécifique data-buz-img-auto-slider est ajouté à la liste à transformer.

L’attribut spécifique data-buz-options peut-être également ajouté, permettant de désactiver l’autoplay, les flèches ou les points de navigation, ou encore la hauteur maximum du slider.
Par défaut, si aucune option n’est ajouté, le slider sera autoplay. Dans ce mode, les flèches et les points de navigation ne sont pas affichés.

Options	Valeurs	Résultats
autoplay	true (défaut)	L’autoplay est activé.
autoplay	false	L’autoplay est désactivé, les flèches et points de navigation s’activent.
hideNavArrows	true (défaut)	Masque les flèches de navigation.
hideNavArrows	false	Affiche les flèches de navigation.
hideNavDots	true (défaut)	Masque les points de navigation.
hideNavDots	false	Affiche les points de navigation.
maxHeight	999	Fixe la hauteur maximale du slider.

jQuery :

$(document).ready(function () {

  /* Buz Img Auto Slider */
  $('[data-buz-img-auto-slider]').each(function() {
    const buzImgAutoSlider = $(this);
    let isPaused = false;

    $(this).wrap('<div class="buz-img-auto-slider"></div>');
    const buzSliderParent = $(this).closest('.buz-img-auto-slider');
    const imagesWidth = [];
    const imagesRatio = [];
    $(this).find('img').each(function() {
      imagesWidth.push($(this).prop('naturalWidth'));
      imagesRatio.push($(this).prop('naturalWidth') / $(this).prop('naturalHeight'));
    })
    buzSliderParent.css({'maxWidth': Math.min(...imagesWidth), 'aspectRatio': Math.min(...imagesRatio)});

    const options = $(this).data('buz-options');
    if (options !== undefined && options.maxHeight !== undefined) {
      buzSliderParent.css("max-height", options.maxHeight + "px");
    }

    const clone = $(this).find('li:first-child').clone();
    $(this).append(clone);

    let buzImgAutoSlidePosition = 0;
    let buzImgAutoSlideCount = $(this).find('li').length;
    let margin = 0;

    let autoplay = (!(options !== undefined && options.autoplay === false));
    let hideNavArrows = (options !== undefined && options.hideNavArrows === true);
    let hideNavDots = (options !== undefined && options.hideNavDots === true);

    function getMargin() {
      if (buzImgAutoSlidePosition > 0 && buzImgAutoSlidePosition < buzImgAutoSlideCount) {
        margin = - buzImgAutoSlidePosition * buzImgAutoSlider.closest('.buz-img-auto-slider').width();
      } else {
        margin = 0;
        buzImgAutoSlidePosition = 0;
      }
    }

    function animateSlider() {
      buzImgAutoSlider.animate({marginLeft: margin, marginRight: -margin}, 500, function () {
        if (buzImgAutoSlidePosition === buzImgAutoSlideCount - 1) {
          buzImgAutoSlidePosition = 0;
          buzImgAutoSlider.css({marginLeft: 0, marginRight: 0});
        }
      });
    }

    function runBuzImgAutoSlider() {
      if (!isPaused) {
        if (buzImgAutoSlider.is(':visible')) {
          buzImgAutoSlidePosition++;
          getMargin();
          animateSlider();
        }
      }
    }

    $(window).resize(function () {
      if (buzImgAutoSlider.is(':visible')) {
        getMargin();

        buzImgAutoSlider.css({marginLeft: margin, marginRight: -margin}, function () {
          if (buzImgAutoSlidePosition === buzImgAutoSlideCount - 1) {
            buzImgAutoSlidePosition = 0;
            buzImgAutoSlider.css({marginLeft: 0, marginRight: 0});
          }
        });
      }
    });

    // Autoplay : Initialisation du timer
    if (autoplay) {
      let buzImgAutoSliderTimer = setInterval(runBuzImgAutoSlider, 4000);

      $(this).on('mouseenter', function () {
        isPaused = true;
        buzSliderParent.append('<span class="buz-paused">Pause</span>');
      }).on('mouseleave', function () {
        isPaused = false;
        buzSliderParent.find('.buz-paused').remove();
      });
    }

    // Autoplay désactivé
    if (!autoplay) {
      function goToSlide(index) {
        buzImgAutoSlidePosition = index;
        getMargin();
        animateSlider();
      }

      function updateArrows() {
        buzSliderParent.find('.buz-nav-arrow').removeClass('disabled');
        if (buzImgAutoSlidePosition === 0) {
          buzSliderParent.find('.buz-nav-arrow-prev').addClass('disabled');
        }
        if (buzImgAutoSlidePosition === buzImgAutoSlideCount - 2) {
          buzSliderParent.find('.buz-nav-arrow-next').addClass('disabled');
        }
      }

      function updateDots() {
        buzSliderParent.find('.buz-nav-dots button').removeClass('active');
        buzSliderParent.find('.buz-nav-dots button:nth-child('+(buzImgAutoSlidePosition+1)+')').addClass('active');
      }

      if (buzImgAutoSlideCount <= 1) {
        hideNavArrows = true;
        hideNavDots = true;
      }

      if (!hideNavArrows) {
        buzSliderParent.append('<button type="button" class="buz-nav-arrow buz-nav-arrow-prev disabled" aria-label="Précédent"></button>');
        buzSliderParent.append('<button type="button" class="buz-nav-arrow buz-nav-arrow-next" aria-label="Suivant"></button>');

        buzSliderParent.find('.buz-nav-arrow-prev').on('click', function() {
          if (buzImgAutoSlidePosition >= 1) {
            buzImgAutoSlidePosition--;
            goToSlide(buzImgAutoSlidePosition);
            updateArrows();
            updateDots();
          }
        });

        buzSliderParent.find('.buz-nav-arrow-next').on('click', function() {
          if (buzImgAutoSlidePosition < buzImgAutoSlideCount - 2) {
            buzImgAutoSlidePosition++;
            goToSlide(buzImgAutoSlidePosition);
            updateArrows();
            updateDots();
          }
        });
      }

      if (!hideNavDots) {
        buzSliderParent.append('<div class="buz-nav-dots"></div>');
        const dotsArray = [];
        $(this).find('li:not(:last-child)').each(function(index) {
          dotsArray.push('<button type="button" aria-label="image-'+(index+1)+'">'+(index+1)+'</button>');
        })
        buzSliderParent.find('.buz-nav-dots').html(dotsArray.join(''));
        buzSliderParent.find('.buz-nav-dots button:first-child').addClass('active');

        buzSliderParent.find('.buz-nav-dots button').on('click', function () {
          buzImgAutoSlidePosition = $(this).index();
          goToSlide(buzImgAutoSlidePosition);
          updateDots();
          updateArrows();
        })
      }
    }
  });

});

CSS :

.buz-img-auto-slider {
  border: 6px solid #fff;
  border-radius: 3px;
  margin: 0 auto;
  max-height: 90svh;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.buz-img-auto-slider .buz-paused {
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 18px;
  color: #fff;
  font-size: 12px;
  display: flex;
  height: 36px;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  left: calc(50% - 30px);
  top: calc(50% - 18px);
  width: 60px;
  z-index: 2;
}
.buz-img-auto-slider .buz-nav-dots {
  align-items: center;
  background: rgba(255, 255, 255, 0.25);
  bottom: 24px;
  display: flex;
  flex-flow: row nowrap;
  height: 32px;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
}
.buz-img-auto-slider .buz-nav-dots button {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  height: 10px;
  margin: 0 4px;
  overflow: hidden;
  text-indent: 20px;
  transition: 0.3s ease;
  width: 10px;
  white-space: nowrap;
}
.buz-img-auto-slider .buz-nav-dots button.active {
  background: #fff;
  height: 14px;
  width: 14px;
}
.buz-img-auto-slider .buz-nav-arrow {
  align-items: center;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  height: 40px;
  justify-content: center;
  position: absolute;
  width: 40px;
  top: calc(50% - 20px);
  transition: 0.3s ease;
}
.buz-img-auto-slider .buz-nav-arrow:hover {
  background: rgba(255, 255, 255, 0.5);
}
.buz-img-auto-slider .buz-nav-arrow::after {
  background: #fff;
  content: "";
  display: block;
  height: 24px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 15.375 6 9.375 7.4 7.975 12 12.575 16.6 7.975 18 9.375Z'/%3E%3C/svg%3E") no-repeat center;
  transform: scale(1.5);
  width: 24px;
}
.buz-img-auto-slider .buz-nav-arrow.disabled {
  opacity: 0.25;
  pointer-events: none;
}
.buz-img-auto-slider .buz-nav-arrow.buz-nav-arrow-prev {
  left: 10px;
  transform: rotate(90deg);
}
.buz-img-auto-slider .buz-nav-arrow.buz-nav-arrow-next {
  right: 10px;
  transform: rotate(-90deg);
}
.buz-img-auto-slider ul {
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.buz-img-auto-slider ul::after {
  background: rgba(0, 0, 0, 0.4);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: 0.3s ease;
}
.buz-img-auto-slider ul:hover::after {
  opacity: 1;
}
.buz-img-auto-slider ul li {
  align-items: center;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  width: 100%;
}
.buz-img-auto-slider ul img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: 0.6s ease;
  width: 100%;
}
.buz-img-auto-slider ul img:hover {
  transform: scale(1.1);
}

Buz Menu Dialog v1.0

Transforme une liste de lien en menu dialog en css & jQuery sans ajouter de markup spécifique.

Exemple :

Markup html :

<ul data-buz-menu-dialog="Cliquez-ici">
  <li><a href="#">Élément 1</a></li>
  <li><a href="#">Élément 2</a></li>
  <li><a href="#">Élément 3</a></li>
  <li><a href="#">Élément 4</a></li>
  <li><a href="#">Élément 5</a></li>
</ul>

Un attribut spécifique data-buz-menu-dialog est ajouté à la liste à transformer.
La valeur de cet attribut deviendra le texte du bouton permettant d’afficher le menu.

jQuery :

$(document).ready(function () {

  /* Buz Menu Dialog */
  $('[data-buz-menu-dialog]').each(function() {
    const offset = $(this).offset();
    const menuDialog = $(this);

    $(this).wrap('<div class="buz-menu-dialog-receiver"></div>');
    $(this).parent().prepend('<button type="button" class="buz-menu-dialog-button">'+$(this).attr('data-buz-menu-dialog')+'</button>');
    $(this).parent().prepend('<div class="buz-menu-dialog-overlay"></div>');

    const width = menuDialog.width();

    $(this).closest('.buz-menu-dialog-receiver').find('.buz-menu-dialog-button').on('click', function(){
      if (offset.left + width >= $(window).width()) {
        menuDialog.css({'left': 'auto', 'right': 0});
      }
      $(this).closest('.buz-menu-dialog-receiver').find('.buz-menu-dialog-overlay').show();
      menuDialog.show().animate({
        'opacity': 1,
        'top': 0
      }, 300)
    });

    $(this).find('a').on('click', function(){
      menuDialog.hide();
      menuDialog.css({
        'opacity': 0,
        'top': '-20px'
      })
      $(this).closest('.buz-menu-dialog-receiver').find('.buz-menu-dialog-overlay').hide();
    });

    $(this).closest('.buz-menu-dialog-receiver').find('.buz-menu-dialog-overlay').on('click', function(){
      menuDialog.hide();
      menuDialog.css({
        'opacity': 0,
        'top': '-20px'
      })
      $(this).closest('.buz-menu-dialog-receiver').find('.buz-menu-dialog-overlay').hide();
    });
  });

});

CSS :

:root {
  --buz-menu-dialog-default: rgb(0 0 0 / 54%) /* À remplacer par la valeur souhaitée ou à surcharger par la suite */;
  --buz-menu-dialog-accent: #eee /* À remplacer par la valeur souhaitée ou à surcharger par la suite */;
}

.buz-menu-dialog-receiver {
  display: inline-block;
  overflow: visible;
  position: relative;
}
.buz-menu-dialog-receiver .buz-menu-dialog-overlay {
  display: none;
  inset: 0;
  position: fixed;
  z-index: 10;
}
.buz-menu-dialog-receiver [data-buz-menu-dialog] {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  display: none;
  list-style: none;
  margin: 0;
  opacity: 0;
  padding: 10px 0;
  position: absolute;
  top: -20px;
  max-width: 320px;
  min-width: 200px;
  z-index: 11;
}
.buz-menu-dialog-receiver [data-buz-menu-dialog] li {
  font-size: 14px;
}
.buz-menu-dialog-receiver [data-buz-menu-dialog] li a {
  border-bottom: 1px solid #eee;
  color: var(--buz-menu-dialog-default);
  display: block;
  padding: 8px 16px;
  text-decoration: none;
}
.buz-menu-dialog-receiver [data-buz-menu-dialog] li a:hover {
  background-color: var(--buz-menu-dialog-accent);
  border-bottom-color: var(--buz-menu-dialog-accent);
}
.buz-menu-dialog-receiver [data-buz-menu-dialog] li:last-child a {
  border: none;
}

Vous pouvez surcharger les variables définies en début de feuille de styles ou tout autre style si besoin.

Buz Switch v1.0

Affiche un switch on/off style material en pure css.

Exemple :

Switch On

Switch Off Switch On

Markup html :

<!-- Sans label -->
<div class="buz-form-switch">
  <label for="switch" aria-label="switch">
    <input type="checkbox" name="switch" id="switch">
    <span class="switch-component"></span>
  </label>
</div>

<!-- avec un label actif -->
<div class="buz-form-switch">
  <label for="switch-label">
    <input type="checkbox" name="switch-label" id="switch-label">
    <span class="switch-component"></span>
    <span class="active-label">Switch On</span>
  </label>
</div>

<!-- avec deux labels inactif et actif -->
<div class="buz-form-switch buz-form-switch-labels">
  <label for="switch-labels">
    <input type="checkbox" name="switch-labels" id="switch-labels">
    <span class="inactive-label">Switch Off</span>
    <span class="switch-component"></span>
    <span class="active-label">Switch On</span>
  </label>
</div>

Le Switch peut être utilisé avec un seul, deux ou aucun label. Son style s’adaptera automatiquement.
La structure de composition doit être respectée pour que les styles s’appliquent correctement.

A noter, lorsque la versions sans label est utilisé, un attribut aria-label est ajouté sur le tag label pour définir le texte informatif du switch.

CSS :

:root {
  --buz-switch-label: rgb(0 0 0 / 54%) /* À remplacer par la valeur souhaitée ou à surcharger par la suite */;
  --buz-switch-inactive: #ccc /* À remplacer par la valeur souhaitée ou à surcharger par la suite */;
  --buz-switch-accent: #fff /* À remplacer par la valeur souhaitée ou à surcharger par la suite */;
}

.buz-form-switch {
  margin: 16px 0 32px;
  user-select: none;
  width: 100%;
}
.buz-form-switch label {
  align-items: center;
  color: var(--buz-switch-label);
  cursor: pointer;
  display: inline-flex;
  flex-flow: row nowrap;
  font-size: 16px;
  height: 100%;
  justify-content: center;
  position: relative;
  text-align: left;
  width: auto;
}
.buz-form-switch label input {
  display: none;
}
.buz-form-switch label .inactive-label {
  color: var(--buz-switch-accent);
  font-weight: 700;
}
.buz-form-switch label .inactive-label,
.buz-form-switch label .active-label {
  transition: 0.3s ease;
}
.buz-form-switch label .switch-component {
  display: flex;
  flex: 0 0 40px;
  flex-flow: row nowrap;
  height: 24px;
  margin: 0 16px;
  position: relative;
  width: 40px;
}
.buz-form-switch label .switch-component::before {
  background: var(--buz-switch-accent);
  border-radius: 7px;
  content: "";
  height: 14px;
  left: 0;
  opacity: 0.2;
  position: absolute;
  top: 5px;
  width: 100%;
}
.buz-form-switch label .switch-component::after {
  background: var(--buz-switch-inactive);
  border-radius: 50%;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  content: "";
  display: block;
  height: 20px;
  left: 0;
  overflow: hidden;
  position: absolute;
  text-indent: 100px;
  top: calc(50% - 10px);
  transition: 0.2s ease;
  width: 20px;
}
.buz-form-switch label input:checked ~ .switch-component::after {
  background: var(--buz-switch-accent);
  left: 20px;
}
.buz-form-switch label input:not(:checked) + .inactive-label + .switch-component::after {
  background: var(--buz-switch-accent);
}
.buz-form-switch label input:checked ~ .inactive-label {
  color: var(--buz-switch-label);
  font-weight: 400;
}
.buz-form-switch label input:checked ~ .active-label {
  color: var(--buz-switch-accent);
  font-weight: 700;
}

Vous pouvez surcharger les variables définies en début de feuille de styles ou tout autre style si besoin.

Buz Form Fields v1.0

Applique style et effet material sur un élément de type input ou textarea en pure css.

Exemple :

Type text / month / password / search / tel / url / week

Type email

Veuillez saisir une adresse e-mail valide.

Type date / datetime-local / time

Type number

Mininum 10 / maximum 100

Type file

Select

Checkbox 1

Checkbox 2

Radio 1

Radio 2

Textarea

Markup html :

<form method="post">
  <!-- Input type text / month / password / search / tel / url / week -->
  <div class="buz-form-control">
     <input type="text" name="text" id="text" placeholder="Type text / month / password / search / tel / url / week" required>
     <label for="text">Type text / month / password / search / tel / url / week</label>
  </div>

  <!-- Input type email -->
  <div class="buz-form-control">
    <input type="email" name="email" id="email" placeholder="Type email" required>
    <label for="email">Type email</label>
    <p class="buz-form-error">Veuillez saisir une adresse e-mail valide.</p>
  </div>

  <!-- Input type date / datetime-local / time -->
  <div class="buz-form-control">
    <input type="date" name="date" id="date" placeholder="Type date">
    <label for="date">Type date / datetime-local / time</label>
  </div>

  <!-- Input type number -->
  <div class="buz-form-control">
    <input type="number" name="number" id="number" placeholder="Type number" min="10" max="100" required>
    <label for="number">Type number</label>
    <p class="buz-form-error">Mininum 10 / maximum 100</p>
  </div>

  <!-- Input type file -->
  <div class="buz-form-control">
    <input type="file" name="file" id="file" placeholder="Type file">
    <label for="file">Type file</label>
  </div>

  <!-- Select -->
  <div class="buz-form-control-select">
    <select name="select" id="select">
      <option value="" disabled selected>Select</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
    <label for="select">Select</label>
    <span class="expand-icon"></span>
  </div>

  <!-- Input type checkbox -->
  <div class="buz-form-control-checkbox">
    <div class="buz-form-slot">
      <input type="checkbox" name="checkbox1" id="checkbox1" checked>
      <label for="checkbox1">Checkbox 1</label>
    </div>
    <div class="buz-form-slot">
      <input type="checkbox" name="checkbox2" id="checkbox2">
      <label for="checkbox2">Checkbox 2</label>
    </div>
  </div>

  <!-- Input type radio -->
  <div class="buz-form-control-radio">
    <div class="buz-form-slot">
      <input type="radio" name="radio" id="radio1" checked>
      <label for="radio1">Radio 1</label>
    </div>
    <div class="buz-form-slot">
      <input type="radio" name="radio" id="radio2">
      <label for="radio2">Radio 2</label>
    </div>
  </div>

  <!-- Textarea -->
  <div class="buz-form-control full">
    <textarea name="textarea" id="textarea" placeholder="Textarea" required></textarea>
    <label for="textarea">Textarea</label>
  </div>

  <!-- Input type submit -->
  <div class="buz-form-control">
    <input type="submit" value="Submit">
  </div>

  <!-- Input type reset -->
  <div class="buz-form-control">
    <input type="reset" value="Reset">
  </div>
</form>

Chaque item de formulaire doit être incorporé dans un div de classe buz-form-control ou buz-form-control-select, buz-form-control-checkbox, buz-form-control-radio suivant le type de champs.

Pour tous les champs, à l'exception des champs date / datetime-local / time, file, select, radio et checkbox, le placeholder est obligatoire.
Le label doit être positionné à la suite du champs, tel que décrit ci-dessus, pour garantir le fonctionnement des styles.
Un paragraphe de classe buz-form-error peut être ajouté sur chaque item, il sera affiché en cas de saisie non valide.

Tous les champs garde bien-sûr leur fonctionnalité propre, comme required par exemple.

CSS :

:root {
  --buz-label-background: #dedad7 /* À remplacer par la valeur souhaitée ou à surcharger par la suite */;
  --buz-field-inactive: rgb(0 0 0 / 12%) /* À remplacer par la valeur souhaitée ou à surcharger par la suite */;
  --buz-field-focus: #000 /* À remplacer par la valeur souhaitée ou à surcharger par la suite */;
  --buz-field-accent: olive /* À remplacer par la valeur souhaitée ou à surcharger par la suite */;
}

.buz-form-control,
.buz-form-control-select,
.buz-form-control-checkbox,
.buz-form-control-radio {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column nowrap;
  font-size: 16px;
  height: 100%;
  margin: 16px 0 32px;
  position: relative;
  text-align: left;
  width: 100%;
}

/* Inputs classiques et textarea */
.buz-form-control label {
  background: var(--buz-label-background);
  color: #000;
  font-size: 16px;
  left: 12px;
  max-width: 240px;
  opacity: 0.54;
  overflow: hidden;
  padding: 4px 8px;
  position: absolute;
  text-overflow: ellipsis;
  top: 12px;
  transform-origin: top left;
  transition: 0.1s ease;
  white-space: nowrap;
}
.buz-form-control .buz-form-error {
  color: red;
  display: none;
  font-size: 12px;
  margin: 4px 0 0;
}
.buz-form-control input,
.buz-form-control textarea {
  border: 1px solid var(--buz-field-inactive);
  border-radius: 6px;
  color: #000;
  height: 56px;
  outline: 0;
  padding: 0 12px;
  width: 100%;
  position: relative;
  transition: 0.2s ease;
}
.buz-form-control input::placeholder,
.buz-form-control textarea::placeholder {
  opacity: 0;
}
.buz-form-control input:hover,
.buz-form-control textarea:hover {
  border-color: var(--buz-field-focus);
}
.buz-form-control input:focus,
.buz-form-control textarea:focus {
  border-color: var(--buz-field-focus);
  border-width: 2px;
  padding: 0 11px;
}
.buz-form-control input[type=file],
.buz-form-control textarea[type=file] {
  padding: 12px;
}
.buz-form-control input[type=file]:focus,
.buz-form-control textarea[type=file]:focus {
  padding: 11px;
}
.buz-form-control input:invalid:not(:placeholder-shown),
.buz-form-control textarea:invalid:not(:placeholder-shown) {
  border-color: red;
}
.buz-form-control input:valid:not(:placeholder-shown),
.buz-form-control textarea:valid:not(:placeholder-shown) {
  border-color: green;
}
.buz-form-control input:not(:required):valid:not(:placeholder-shown),
.buz-form-control textarea:not(:required):valid:not(:placeholder-shown) {
  border-color: var(--buz-field-inactive);
}
.buz-form-control input:not(:required):valid:not(:placeholder-shown):hover,
.buz-form-control textarea:not(:required):valid:not(:placeholder-shown):hover {
  border-color: var(--buz-field-focus);
}
.buz-form-control input:not(:required):valid:not(:placeholder-shown):focus,
.buz-form-control textarea:not(:required):valid:not(:placeholder-shown):focus {
  border-color: var(--buz-field-focus);
}
.buz-form-control input[type=submit], .buz-form-control input[type=reset],
.buz-form-control textarea[type=submit],
.buz-form-control textarea[type=reset] {
  background: #fff;
  border: 0;
}
.buz-form-control input[type=submit]:hover, .buz-form-control input[type=reset]:hover,
.buz-form-control textarea[type=submit]:hover,
.buz-form-control textarea[type=reset]:hover {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.buz-form-control input[type=submit]:focus, .buz-form-control input[type=reset]:focus,
.buz-form-control textarea[type=submit]:focus,
.buz-form-control textarea[type=reset]:focus {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.buz-form-control input[type=reset],
.buz-form-control textarea[type=reset] {
  opacity: 0.5;
}
.buz-form-control textarea {
  height: 160px;
  padding: 12px;
}
.buz-form-control textarea:focus {
  padding: 11px;
}
.buz-form-control input:required + label::after,
.buz-form-control textarea:required + label::after {
  content: " *";
}
.buz-form-control input:not(:placeholder-shown) + label,
.buz-form-control input:focus + label,
.buz-form-control textarea:not(:placeholder-shown) + label,
.buz-form-control textarea:focus + label {
  opacity: 1;
  top: -12px;
  transform: scale(0.7);
}
.buz-form-control input:invalid:not(:placeholder-shown) + label::before,
.buz-form-control textarea:invalid:not(:placeholder-shown) + label::before {
  color: red;
  content: "!";
  display: inline-block;
  font-weight: 700;
  margin-right: 8px;
}
.buz-form-control input:invalid:not(:placeholder-shown) ~ .buz-form-error,
.buz-form-control textarea:invalid:not(:placeholder-shown) ~ .buz-form-error {
  display: block;
}
.buz-form-control input:valid:not(:placeholder-shown) + label::before,
.buz-form-control textarea:valid:not(:placeholder-shown) + label::before {
  color: green;
  content: "✓";
  display: inline-block;
  font-weight: 700;
  margin-right: 8px;
}
.buz-form-control input:not(:required):valid:not(:placeholder-shown) + label::before,
.buz-form-control textarea:not(:required):valid:not(:placeholder-shown) + label::before {
  content: none;
}

/* Select */
.buz-form-control-select label {
  background: var(--buz-label-background);
  color: #000;
  font-size: 16px;
  left: 12px;
  max-width: 240px;
  overflow: hidden;
  padding: 4px 8px;
  position: absolute;
  text-overflow: ellipsis;
  top: -12px;
  transform-origin: top left;
  transition: 0.1s ease;
  white-space: nowrap;
  transform: scale(0.7);
}
.buz-form-control-select .expand-icon {
  background: rgba(0, 0, 0, 0.4);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 15.375 6 9.375 7.4 7.975 12 12.575 16.6 7.975 18 9.375Z'/%3E%3C/svg%3E") no-repeat center;
  content: "";
  height: 24px;
  pointer-events: none;
  position: absolute;
  right: 6px;
  top: calc(50% - 12px);
  transition: 0.3s ease;
  width: 24px;
}
.buz-form-control-select .buz-form-error {
  color: red;
  display: none;
  font-size: 12px;
  margin: 4px 0 0;
}
.buz-form-control-select select {
  border: 1px solid var(--buz-field-inactive);
  border-radius: 6px;
  color: #000;
  height: 56px;
  outline: 0;
  padding: 0 12px;
  width: 100%;
  position: relative;
  transition: 0.2s ease;
}
.buz-form-control-select select:hover {
  border-color: var(--buz-field-focus);
}
.buz-form-control-select select:focus {
  border-color: var(--buz-field-focus);
  border-width: 2px;
  padding: 0 11px;
}
.buz-form-control-select select:focus ~ .expand-icon {
  background: var(--buz-field-focus);
  transform: rotate(180deg);
}
.buz-form-control-select select:invalid {
  border-color: red;
}
.buz-form-control-select select:required:valid {
  border-color: green;
}
.buz-form-control-select select:required + label::after {
  content: " *";
}
.buz-form-control-select select:invalid + label::before {
  color: red;
  content: "!";
  display: inline-block;
  font-weight: 700;
  margin-right: 8px;
}
.buz-form-control-select select:invalid ~ .buz-form-error {
  display: block;
}
.buz-form-control-select select:valid + label::before {
  color: green;
  content: "✓";
  display: inline-block;
  font-weight: 700;
  margin-right: 8px;
}
.buz-form-control-select select:not(:required):valid + label::before {
  content: none;
}

/* Radio / Checkbox */
.buz-form-control-radio .buz-form-slot,
.buz-form-control-checkbox .buz-form-slot {
  user-select: none;
}
.buz-form-control-radio .buz-form-slot input,
.buz-form-control-checkbox .buz-form-slot input {
  display: none;
}
.buz-form-control-radio .buz-form-slot label,
.buz-form-control-checkbox .buz-form-slot label {
  align-items: flex-start;
  color: currentcolor;
  display: inline-flex;
  flex-flow: row nowrap;
  margin: 2px 0;
  pointer-events: auto !important;
  position: relative;
  cursor: pointer;
}
.buz-form-control-radio .buz-form-slot label::before,
.buz-form-control-checkbox .buz-form-slot label::before {
  background: var(--buz-field-focus);
  align-items: center;
  content: "";
  display: flex;
  flex: 0 0 auto;
  height: 24px;
  margin-right: 6px;
  margin-top: -0.2rem;
  opacity: 0.4;
  justify-content: center;
  text-rendering: auto;
  transition: all 0.3s ease;
  width: 24px;
}
.buz-form-control-radio .buz-form-slot label:hover::before,
.buz-form-control-checkbox .buz-form-slot label:hover::before {
 background: var(--buz-field-focus);
  opacity: 1;
}
.buz-form-control-radio .buz-form-slot input:checked + label::before,
.buz-form-control-checkbox .buz-form-slot input:checked + label::before {
 background: var(--buz-field-accent);
  opacity: 1;
}

.buz-form-control-radio .buz-form-slot label::before {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 22q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z'/%3E%3C/svg%3E") no-repeat center;
}
.buz-form-control-radio .buz-form-slot input:checked + label::before {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z'/%3E%3C/svg%3E") no-repeat center;
}

.buz-form-control-checkbox .buz-form-slot label::before {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14Z'/%3E%3C/svg%3E") no-repeat center;
}
.buz-form-control-checkbox .buz-form-slot input:checked + label::before {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.6 16.2 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Z'/%3E%3C/svg%3E") no-repeat center;
}

Vous pouvez surcharger les variables définies en début de feuille de styles ou tout autre style si besoin.

Buz Bubble v1.0

Affiche une bulle au click d’un élément en css & jQuery sans ajouter de markup spécifique.

Exemple :

Markup html :

<button type="button" data-buz-bubble="Click effectué" data-buz-options='{"bubblePosition": "top-center"}'>Cliquez-ici</button>

Un attribut spécifique data-buz-bubble est ajouté à l’élement à partir duquel faire apparaître la bulle au click.
Cet attribut contient simplement le texte affiché lors du click.

L’attribut spécifique data-buz-options peut-être également ajouté, permettant de positionner la bulle au 4 coins de la fenêtre.
Par défaut, si aucune option n’est ajouté, la bulle apparaîtra au coin haut droit.

Options	Valeurs	Résultats
bubblePosition	top-left	Haut gauche
	top-center	Haut centre
	top-right (défaut)	Haut droite
	center-left	Centré gauche
	center-right	Centré droite
	bottom-left	Bas gauche
	bottom-center	Bas centre
	bottom-right	Bas droite

jQuery :

$(document).ready(function () {

  /* Buz Bubble */
  $('[data-buz-bubble]').on('click', function() {
    const bubbleText = $(this).attr('data-buz-bubble');
    const uniqueID = Math.floor(Math.random() * 26) + Date.now();
    const options = $(this).data('buz-options');
    $('body').append(''+bubbleText+'');
    if (options !== undefined && options.bubblePosition !== undefined) {
      $('#'+uniqueID).addClass(options.bubblePosition);
    }
    $('#'+uniqueID).fadeIn().delay(1500).fadeOut();
    setTimeout(function(){
      $('#'+uniqueID).remove();
    }, 3000);
  });

});

Par défaut, la taille de la police est fixée et la bulle s’affiche en haut à droite de l’écran, mais tous les styles sont modifiables si désiré.

CSS :

.buz-bubble {
  background: #fff;
  border-radius: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 80px 20px rgba(0, 0, 0, 0.4);
  color: #000;
  display: none;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  margin: 16px;
  padding: 4px;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;
}
.buz-bubble.top-left {
  left: 0;
  right: auto;
}
.buz-bubble.top-center {
  right: 50%;
  transform: translateX(calc(50% + 16px));
}
.buz-bubble.top-right {
  right: 0;
  top: 0;
}
.buz-bubble.center-left {
  left: 0;
  right: auto;
  top: 50%;
  transform: translateY(calc(-50% - 16px));
}
.buz-bubble.center-right {
  top: 50%;
  transform: translateY(calc(-50% - 16px));
}
.buz-bubble.bottom-left {
  bottom: 0;
  left: 0;
  right: auto;
  top: auto;
}
.buz-bubble.bottom-center {
  bottom: 0;
  right: 50%;
  top: auto;
  transform: translateX(calc(50% + 16px));
}
.buz-bubble.bottom-right {
  bottom: 0;
  top: auto;
}

Par défaut, la taille de la police est fixée et la bulle s’affiche en haut à droite de l’écran, mais tous les styles sont modifiables si désiré.

Buz Tooltips v1.0

Affiche une info-bulle au survol d’un élément en pure css sans ajouter de markup spécifique.

Exemple :

Markup html :

<button type="button" data-buz-tooltip="Tooltip affiché au survol">Survolez-moi</button>

Un attribut spécifique data-buz-tooltip est ajouté à l’élement sur lequel faire apparaître le tooltip.
Cet attribut contient simplement le texte affiché lors du survol.

CSS :

@keyframes buz-tooltip-appear {
  from {
    bottom: calc(100% + 24px);
    opacity: 0;
  }
  to {
    bottom: calc(100% + 8px);
    opacity: 1;
  }
}

@keyframes buz-tooltip-appear-arrow {
  from {
    bottom: calc(100% + 14px);
    opacity: 0;
  }
  to {
    bottom: calc(100% - 2px);
    opacity: 1;
  }
}
[data-buz-tooltip] {
  position: relative;
}

[data-buz-tooltip]:hover:after {
  animation: 0.3s ease buz-tooltip-appear;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  bottom: calc(100% + 8px);
  color: #fff;
  content: attr(data-buz-tooltip);
  display: block;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  left: 50%;
  padding: 5px 10px;
  position: absolute;
  text-align: center;
  transition: opacity 0.3s;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1000;
}

[data-buz-tooltip]:hover:before {
  animation: 0.3s ease buz-tooltip-appear-arrow;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
  bottom: calc(100% - 2px);
  content: "";
  left: calc(50% - 5px);
  position: absolute;
}

Par défaut, la taille de la police est fixée, mais tous les styles sont modifiables si désiré.

aB sanbox

Buz Img Auto Slider v1.0

Exemple :

Par défaut :

Sans Autoplay :

Sans Autoplay, sans Point de navigation et avec une hauteur maximum de 400px :

Markup html :

jQuery :

CSS :

Buz Menu Dialog v1.0

Exemple :

Markup html :

jQuery :

CSS :

Buz Switch v1.0

Exemple :

Markup html :

CSS :

Buz Form Fields v1.0

Exemple :

Markup html :

CSS :

Buz Bubble v1.0

Exemple :

Markup html :

jQuery :

CSS :

Buz Tooltips v1.0

Exemple :

Markup html :

CSS :