src/wolnelektury/static/2022/styles/utils/bourbon/library/_buttons.scss

   1 @charset "UTF-8";
   2
   3 ////
   4 /// @type list
   5 ///
   6 /// @require {function} _assign-inputs
   7 ///
   8 /// @require {variable} $_buttons-list
   9 ////
  10
  11 /// A list of all HTML button elements. Please note that you must interpolate
  12 /// the variable (`#{}`) to use it as a selector.
  13 ///
  14 /// @example scss
  15 ///   #{$all-buttons} {
  16 ///     background-color: #f00;
  17 ///   }
  18 ///
  19 ///   // CSS Output
  20 ///   button,
  21 ///   [type='button'],
  22 ///   [type='reset'],
  23 ///   [type='submit'] {
  24 ///     background-color: #f00;
  25 ///   }
  26
  27 $all-buttons: _assign-inputs($_buttons-list);
  28
  29 /// A list of all HTML button elements with the `:active` pseudo-class applied.
  30 /// Please note that you must interpolate the variable (`#{}`) to use it as a
  31 /// selector.
  32 ///
  33 /// @example scss
  34 ///   #{$all-buttons-active} {
  35 ///     background-color: #00f;
  36 ///   }
  37 ///
  38 ///   // CSS Output
  39 ///   button:active,
  40 ///   [type='button']:active,
  41 ///   [type='reset']:active,
  42 ///   [type='submit']:active {
  43 ///     background-color: #00f;
  44 ///   }
  45
  46 $all-buttons-active: _assign-inputs($_buttons-list, active);
  47
  48 /// A list of all HTML button elements with the `:focus` pseudo-class applied.
  49 /// Please note that you must interpolate the variable (`#{}`) to use it as a
  50 /// selector.
  51 ///
  52 /// @example scss
  53 ///   #{$all-buttons-focus} {
  54 ///     background-color: #0f0;
  55 ///   }
  56 ///
  57 ///   // CSS Output
  58 ///   button:focus,
  59 ///   [type='button']:focus,
  60 ///   [type='reset']:focus,
  61 ///   [type='submit']:focus {
  62 ///     background-color: #0f0;
  63 ///   }
  64
  65 $all-buttons-focus: _assign-inputs($_buttons-list, focus);
  66
  67 /// A list of all HTML button elements with the `:hover` pseudo-class applied.
  68 /// Please note that you must interpolate the variable (`#{}`) to use it as a
  69 /// selector.
  70 ///
  71 /// @example scss
  72 ///   #{$all-buttons-hover} {
  73 ///     background-color: #0f0;
  74 ///   }
  75 ///
  76 ///   // CSS Output
  77 ///   button:hover,
  78 ///   [type='button']:hover,
  79 ///   [type='reset']:hover,
  80 ///   [type='submit']:hover {
  81 ///     background-color: #0f0;
  82 ///   }
  83
  84 $all-buttons-hover: _assign-inputs($_buttons-list, hover);