toolkit/components/printing/content/toggle-group.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /*
   6  * A radiogroup styled to hide the radio buttons
   7  * and present tab-like labels as buttons
   8  */
   9
  10 .toggle-group {
  11   display: inline-flex;
  12   min-height: var(--button-min-height-small);
  13 }
  14
  15 .toggle-group-label {
  16   display: inline-flex;
  17   align-items: center;
  18   margin: 0;
  19   padding: 6px 10px;
  20   background-color: var(--button-background-color);
  21 }
  22
  23 .toggle-group-input {
  24   position: absolute;
  25   inset-inline-start: -100px;
  26 }
  27
  28 .toggle-group-label-iconic::before {
  29   width: var(--icon-size-default);
  30   height: var(--icon-size-default);
  31   margin-inline-end: 5px;
  32   -moz-context-properties: fill;
  33   fill: currentColor;
  34 }
  35
  36 .toggle-group-label:first-of-type {
  37   border-start-start-radius: var(--border-radius-small);
  38   border-end-start-radius: var(--border-radius-small);
  39 }
  40
  41 .toggle-group-label:last-of-type {
  42   border-start-end-radius: var(--border-radius-small);
  43   border-end-end-radius: var(--border-radius-small);
  44 }
  45
  46 .toggle-group-input:disabled + .toggle-group-label {
  47   opacity: 0.4;
  48 }
  49
  50 .toggle-group-input:enabled + .toggle-group-label:hover {
  51   background-color: var(--button-background-color-hover);
  52   color: var(--button-text-color-hover);
  53 }
  54
  55 .toggle-group-input:enabled + .toggle-group-label:hover:active {
  56   background-color: var(--button-background-color-active);
  57   color: var(--button-text-color-active);
  58 }
  59
  60 .toggle-group-input:focus-visible + .toggle-group-label {
  61   outline: var(--focus-outline);
  62   outline-offset: var(--focus-outline-offset);
  63   z-index: 1;
  64 }
  65
  66 .toggle-group-input:checked + .toggle-group-label {
  67   background-color: var(--button-background-color-primary);
  68   color: var(--button-text-color-primary);
  69 }
  70
  71 .toggle-group-input:enabled:checked + .toggle-group-label:hover {
  72   background-color: var(--button-background-color-primary-hover);
  73   color: var(--button-text-color-primary-hover);
  74 }
  75
  76 .toggle-group-input:enabled:checked + .toggle-group-label:hover:active {
  77   background-color: var(--button-background-color-primary-active);
  78   color: var(--button-text-color-primary-active);
  79 }