Reusable component library sources

              

<!--radio -->
<div class="wrapper">
<label class="radio">
<input class="radio__input" type="radio" name="radio" value="1">
<span class="radio__label">Default</span>
</label>

<label class="radio">
<input class="radio__input" type="radio" name="radio" value="2" checked>
<span class="radio__label">Selected</span>
</label>

<label class="radio">
<input class="radio__input" type="radio" name="radio" value="3" disabled>
<span class="radio__label">Disabled</span>
</label>
</div>


<!--checkbox -->
<div class="wrapper">
<label class="checkbox">
    <input class="checkbox__input" type="checkbox" name="checkbox-set" value="1">
    <div class="checkbox__state">
        <div class="checkbox__control">
            <svg class="checkbox__icon">
                <use xlink:href="../../assets/images/sprite.svg#check"></use>
            </svg>  
        </div>
        <div class="checkbox__label">
            Default
        </div>
    </div>
</label>

<label class="checkbox">
    <input class="checkbox__input" type="checkbox" name="checkbox-set" value="2">
    <div class="checkbox__state">
        <div class="checkbox__control">
            <svg class="checkbox__icon">
                <use xlink:href="../../assets/images/sprite.svg#check"></use>
            </svg>  
        </div>
        <div class="checkbox__label">
            Checkbox
        </div>
    </div>
</label>

<label class="checkbox">
    <input class="checkbox__input" type="checkbox" name="checkbox-set" value="3" disabled>
    <div class="checkbox__state">
        <div class="checkbox__control">
            <svg class="checkbox__icon">
                <use xlink:href="../../assets/images/sprite.svg#check"></use>
            </svg>  
        </div>
        <div class="checkbox__label">
            Disabled
        </div>
    </div>
</label>
</div>


<!--toggler -->
<div class="wrapper">

<label class="toggler">
<input class="toggler__input available-hidden" type="checkbox" name="toggler" value="1">
<span class="toggler__label">Off</span>
</label>

<label class="toggler">
<input class="toggler__input available-hidden" type="checkbox" name="toggler" value="2" checked>
<span class="toggler__label">On</span>
</label>

<label class="toggler">
<input class="toggler__input available-hidden" type="checkbox" name="toggler" value="3" disabled>
<span class="toggler__label">Disabled</span>
</label>

</div>


<!--input -->
<div class="wrapper">
<label class="input">
    <span class="input__label">Label</span>
    <input class="input__control" type="text" placeholder="Placeholder">
    <span class="input__status">Some status</span>
</label>
<label class="input input_success">
    <span class="input__label">Success</span>
    <div class="input__block">
    <input class="input__control" type="text" placeholder="Placeholder" value="Success">
        <svg class="input__icon">
            <use xlink:href="../../assets/images/sprite.svg#success"></use>
        </svg>
    </div>
    <span class="input__status">Some status</span>
</label>
<label class="input input_invalid">
    <span class="input__label">Error</span>
    <div class="input__block">
        <input class="input__control" type="text" placeholder="Placeholder" value="Error">
        <svg class="input__icon">
            <use xlink:href="../../assets/images/sprite.svg#error"></use>
        </svg>
    </div>
    <span class="input__status">Some status</span>
</label>
</div>



<!--button -->
<div class="wrapper">
<button class="button button_primary">Primary</button>
<button class="button button_primary" disabled>Primary disabled</button>

<button class="button button_secondary">Secondary</button>
<button class="button button_secondary" disabled>Secondary disabled</button>

<button class="button button_alternate">Alternate</button>
<button class="button button_alternate" disabled>Alternate disabled</button>
</div>


<!--accordion -->
<div class="accordion-wrapper">
  <details class="accordion accordion-wrapper__item" open>
    <summary class="accordion__summary">
      <span class="accordion__title">Accordion item 1</span>
      <svg class="accordion__icon" width="24" height="24">
        <use xlink:href="../src/images/sprite.svg#arrow-down"></use>
      </svg>
    </summary>
    <p class="accordion__text">
      Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
    </p>
  </details>
  
  <details class="accordion accordion-wrapper__item">
      <summary class="accordion__summary">
        <span class="accordion__title">Accordion item 2</span>
        <svg class="accordion__icon" width="24" height="24">
          <use xlink:href="../src/images/sprite.svg#arrow-down"></use>
        </svg>
      </summary>
      <p class="accordion__text">
          Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
      </p>
  </details>
  
  <details class="accordion accordion-wrapper__item">
      <summary class="accordion__summary">
        <span class="accordion__title">Accordion item 3</span>
        <svg class="accordion__icon" width="24" height="24">
          <use xlink:href="../src/images/sprite.svg#arrow-down"></use>
        </svg>
      </summary>
      <p class="accordion__text">
          Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
      </p>
  </details>
</div>

              
            

              
/* radio */
.radio {
line-height: 0;
position: relative;
}

.radio__input {
position: absolute;
opacity: 0;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
z-index: -1;
}

.radio__label {
display: inline-flex;
align-items: center;
user-select: none;

font-family: var(--ff-secondary);
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: var(--grey-4);
}

/* состояние радиокнопки по умолчанию (default) */
.radio__label::before {
content: '';
display: inline-block;
width: 28px;
height: 28px;
flex-shrink: 0;
flex-grow: 0;
border: 1px solid var(--grey-2);
border-radius: 50%;
margin-right: 12px;
box-sizing: border-box;
}

/* наведении курсора */
.radio__input:not(:disabled):not(.radio_disabled):not(:checked) + .radio__label:hover {
cursor: pointer;
}
.radio__input:not(:disabled):not(.radio_disabled):not(:checked) + .radio__label:hover::before {
border-color: var(--grey-3);
}

/* активная радиокнопка, при нажатии */
.radio__input:not(:disabled):not(.radio_disabled):active + .radio__label::before {
background-color: var(--grey-1);
}

/* надпись радиокнопки в фокусе */
.radio__input:not(:disabled):not(.radio_disabled):focus + .radio__label {
text-decoration: underline;
}

/* радиокновка выбрана (checked) - внешняя часть */
.radio__input:not(:disabled):not(.radio_disabled):checked + .radio__label::before {
background-color: var(--white);
border: 2px solid var(--blue);
}

/* радиокновка выбрана (checked) - внутренняя часть */
.radio__input:not(:disabled):not(.radio_disabled):checked + .radio__label::after {
position: absolute;
content: '';
left: 5px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--blue);
}

/* радиокнопка в состоянии disabled */
.radio__input.radio_disabled+ .radio__label::before,
.radio__input:disabled + .radio__label::before {
background-color: var(--grey-2);
}

/* надпись радиокнопки в состоянии disabled */
.radio__input.radio_disabled + .radio__label,
.radio__input:disabled + .radio__label {
color: var(--grey-2);
}

/* checkbox */
.checkbox {
display: inline-block;
}

.checkbox__input {
position: absolute;
opacity: 0;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
z-index: -1;
pointer-events: none;
cursor: default;
}

.checkbox__state {
display: flex;
align-items: center;
}

.checkbox__label {
font-family: var(--ff-secondary);
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: var(--label-color);
margin-left: 12px;
}

.checkbox__control {
display: flex;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
background-color: var(--main-bg);  
border: 1px solid var(--border-input-color);
border-radius: 4px;
box-sizing: border-box;
position: relative;
}

.checkbox__icon {
display: none;
width: 22px;
height: 22px;
color: var(--main-bg);
}

/* чекбокс в состоянии hover */
.checkbox__input:not(:disabled):hover ~ .checkbox__state  {
cursor: pointer;
}

/* чекбокс в состоянии checked - фон и бордер */
.checkbox__input:checked ~ .checkbox__state .checkbox__control {
background-color: var(--primary);
border-color: var(--primary);
}

/* чекбокс в состоянии checked - галочка */
.checkbox__input:checked ~ .checkbox__state .checkbox__icon {
display: block;
}

/* чекбокс в фокусе */
.checkbox__input:focus ~ .checkbox__state .checkbox__label {
text-decoration: underline;
}

/* чекбокс в состоянии disabled - label */
.checkbox__input:disabled ~ .checkbox__state .checkbox__label {
color: var(--grey-2);
}
/* чекбокс в состоянии disabled - сам чекбокс */
.checkbox__input:disabled ~ .checkbox__state .checkbox__control {
background-color: var(--grey-2);
}

/* outline вокруг checkbox */
.checkbox__input:focus ~ .checkbox__state .checkbox__control {
/* Виден в полноцветном пространстве */
box-shadow: 0px 0px 5px 5px var(--outline-color);
/* Отображается в высококонтрастных темах Windows */
outline-color: transparent;
outline-width: 2px;
outline-style: dotted;
}

/* toggler */
.toggler {
display: inline-block;
line-height: 0;
position: relative;
}

.toggler__input {
position: absolute;
opacity: 0;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
z-index: -1;
pointer-events: none;
cursor: default;
}

.toggler__label {
display: inline-flex;
align-items: center;
user-select: none;

font-family: var(--ff-secondary);
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: var(--grey-4);
}

/* состояние toggler по умолчанию (default) - окантовка */
.toggler__label::before {
content: '';
display: inline-block;
width: 52px;
height: 28px;
margin-right: 12px;

flex-shrink: 0;
flex-grow: 0;
background: var(--white);
border: 1px solid var(--grey-2);
border-radius: 16px;
box-sizing: border-box;
}

/* состояние toggler по умолчанию (default) - сердцевина */
.toggler__label::after {
position: absolute;
content: '';
top: calc(50% - 24px/2);
left: 3px;
width: 24px;
height: 24px;
border-radius: 16px;
background: var(--grey-2);
}

/* toggler в состоянии hover */
.toggler__input:not(:disabled):hover + .toggler__label {
cursor: pointer;
}

/* toggler в состоянии checked - фон и бордер */
.toggler__input:checked + .toggler__label::before {
background-color: var(--primary);
border-color: var(--primary);
}

/* toggler в состоянии checked - сердцевина */
.toggler__input:checked + .toggler__label::after {
left: 26px;
background-color: var(--white);
}

/* toggler в состоянии focus */
.toggler__input:focus + .toggler__label {
text-decoration: underline;
}

/* toggler в состоянии disabled - подпись */
.toggler__input:disabled + .toggler__label {
color: var(--grey-2);
}

/* toggler в состоянии disabled - фон */
.toggler__input:disabled + .toggler__label::before {
background-color: var(--grey-2);
}

/* toggler в состоянии disabled - сердцевина */
.toggler__input:disabled + .toggler__label::after {
background-color: var(--grey-3);
}

/* input */
.input {
display: flex;
flex-direction: column;
/* Ранее вносил изменения в index.css, но это еще в ПР, поэтому пока здесь пишу CSS-свойства */
/* потом перенесу всё в index.css */
--box-shadow-input-focus: 0px 1px 1px rgba(51, 154, 240, 0.1);
--box-shadow-input-error: 0px 1px 1px rgba(240, 61, 62, 0.1);
}

.input__label, .input__status {
font-family: var(--ff-secondary);
font-weight: 500;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--grey-3);
}

.input__status {
font-weight: 400;
font-size: 8px;
line-height: 14px;
}

.input__block {
display: flex;
position: relative;
}

.input__control {
width: 350px;
padding: 16px 54px 14px 26px;
background: var(--white);
border: 1px solid var(--grey-2);
border-radius: 8px;
box-sizing: border-box;

font-family: var(--ff-secondary);
font-weight: normal;
font-size: 20px;
line-height: 26px;
color: var(--grey-4);
}

.input__control::placeholder {
color: var(--grey-2);
}

.input:not(.input_success) > .input__block .input__control:focus,
.input:not(.input_invalid) > .input__block .input__control:focus {
border: 1px solid var(--primary);
box-shadow: var(--box-shadow-input-focus);
outline: none;
}

.input__icon {
position: absolute;
top: 17px;
right: 18px;
width: 24px;
height: 24px;
}

.input_success > .input__status,
.input_success > .input__block .input__icon {
color: var(--success);
}

.input_invalid > .input__status,
.input_invalid > .input__block .input__icon {
color: var(--error);
}

.input_success > .input__block .input__control {
box-shadow: var(--box-shadow-input-success);
border-color: var(--success);
}
.input_invalid > .input__block .input__control {
box-shadow: var(--box-shadow-input-error);
border-color: var(--error);
}

/* button */
.button {
width: 189px;
height: 48px;
border-radius: 8px;
border: none;

font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 19px;

text-align: center;

cursor: pointer;
transition: var(--transition-button);
}

.button:disabled {
opacity: 0.5;
pointer-events: none;
}

/* primary */
.button_primary {
color: var(--primary-text);
background-color: var(--primary);
}

.button_primary:hover {
background-color: var(--primary-hover);
}

/* secondary */
.button_secondary {
color: var(--secondary-text);
background-color: var(--secondary);
}

.button_secondary:hover {
background-color: var(--secondary-hover);
}

/* alternate */
.button_alternate {
color: var(--alternate-text);
background-color: var(--alternate);
border: 1px solid var(--alternate-border);
}

.button_alternate:hover {
background-color: var(--alternate-hover);
border: 1px solid var(--alternate-hover-border);
}

/* accordion */
.accordion {
  border: 1px solid var(--border-color);
  border-radius: 0.5em;
  padding: 1em 1.5em;
  font-family: var(--ff-secondary);
  font-size: 1rem;
  line-height: 1.5;
  background-color: var(--main-bg);
}

.accordion__summary {
  display: block;
  outline: none;
  height : 1.5em;
}

.accordion__title {
  float: left;
}

.accordion__icon {
  float: right;
}

.accordion__summary::after {
  clear: both;
}

.accordion__summary:focus {
  border-radius: 2px;
  padding: 2px 4px;
  box-shadow: 0px 0px 2px 2px var(--outline-color);
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__title {
  color: var(--accordion-title);
}

.accordion__text {
  color: var(--accordion-text);
}

.accordion[open] .accordion__icon {
  transform: rotate(180deg);
  transition: transform 0.35s ease-out;
}

.accordion__icon {
  color: var(--accordion-text);
  margin-left: auto;
  transition: transform 0.35s ease-out;
}

.accordion[open] .accordion__summary ~ * {
  animation: sweep .5s ease-in-out;
}

@keyframes sweep {
  0%    {opacity: 0; margin-left: -10px}
  100%  {opacity: 1; margin-left: 0px}
}