Violin.css

Radial Select: Default 

<div class="inv-radial-select">
      <input id="male" name="sex" type="radio" class="inv-radial-select__radio" value="male" />
      <label class="inv-radial-select__label" for="male">male</label>
  </div>
  <div class="inv-radial-select">
      <input id="female" name="sex" type="radio" class="inv-radial-select__radio" value="female" />
      <label class="inv-radial-select__label" for="female">female</label>
  </div>
 
{{#each radial-select.options as |value|}}
  <div class="inv-radial-select">
    <input
      id="{{ value }}"
      name="sex"
      type="radio"
      class="inv-radial-select__radio"
      value="{{ value }}"
      {{ternary ../disabled "disabled" "" }}
    />
    <label class="inv-radial-select__label" for="{{ value }}">{{ value }}</label>
  </div>
{{/each}}
 
{
  "radial-select": {
    "options": [
      "male",
      "female"
    ]
  }
}
  • Content: 
    .inv-radial-select {
  appearance: none;
  display: flex;
}

.inv-radial-select__radio {
  display: none;
}

.inv-radial-select__label {
  background-color: var(--color-default--white);
  box-shadow: var(--shadow-border-1) var(--color-system--regular);
  color: var(--color-default--dark);
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  min-height: 40px;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: 0.2s box-shadow, 0.2s background-color;
}

.inv-radial-select__label:hover {
  box-shadow:
    var(--shadow-border-1) var(--color-system--regular),
    var(--shadow-8) var(--color-default--shadow);
  background-color: var(--color-default--white);
}

.inv-radial-select__radio ~ .inv-radial-select__label:active {
  background-color: var(--color-primary--white);
  box-shadow:
    var(--shadow-border-1) var(--color-primary--dark),
    var(--shadow-8) var(--color-primary--shadow);
  color: var(--color-primary--dark);
}

.inv-radial-select__radio:disabled ~ .inv-radial-select__label {
  background-color: var(--color-default--white);
  box-shadow: none;
  color: var(--color-default--light);
  cursor: not-allowed;
}

.inv-radial-select__radio:checked ~ .inv-radial-select__label {
  background-color: var(--color-primary--white);
  box-shadow: var(--shadow-border-1) var(--color-primary--regular);
  color: var(--color-primary--regular);
}

.inv-radial-select__radio:checked ~ .inv-radial-select__label:hover {
  background-color: var(--color-primary--white);
  box-shadow:
    var(--shadow-border-1) var(--color-primary--regular),
    var(--shadow-8) var(--color-primary--shadow);
}
  • URL: /components/raw/radial-select/radial-select.css
  • Filesystem Path: src/components/radial-select/radial-select.css
  • Size: 1.7 KB

Radial Select Button

Radio button da aplicação

Tendo a classe base .inv-radial-select, e é formado por:

  • Um radio button - .inv-radial-select__radio
  • Uma label - .inv-radial-select__label

Default Radial Select

Componente padrão, comum para ações regulares dos usuários.

<div class="inv-radial-select">
  <input id="male" name="sex" type="radio" class="inv-radial-select__radio" value="male" />
  <label class="inv-radial-select__label" for="male">male</label>
</div>

<div class="inv-radial-select">
  <input id="female" name="sex" type="radio" class="inv-radial-select__radio" value="female" />
  <label class="inv-radial-select__label" for="female">female</label>
</div>
Modificadores Uso
disabled Modifica o radial select com estado de desabilitado

Radial Select Disabled

Versão de desabilitada do componente.

Basta inserir o atributo disabled no input radio.

<div class="inv-radial-select">
  <input id="disabled" name="sex" type="radio" class="inv-radial-select__radio" value="disabled" disabled />
  <label class="inv-radial-select__label" for="disabled">disabled</label>
</div>