S CSS Анимированный флажок: динамика c ширина - PullRequest
Новая
       85

S CSS Анимированный флажок: динамика c ширина

1 голос
/ 29 мая 2020

У меня есть флажок анимированного переворота S CSS, и у меня есть 2 проблемы, которые я не могу решить:

a) Я хочу sh иметь динамическую ширину c в зависимости от содержимого, а не stati c. Проблема в том, что у меня есть 2 содержимого, одно для «проверено» и одно для «непроверено»

б) Я хочу sh добавить оба значка (используя fontawesome 5) и текст, а не эксклюзив (я имею в виду значок + текст). В худшем случае у меня есть sh способ использовать либо значок, либо текст

Вот как я его определяю: 

<input class="btn-toggle btn-toggle-flip" id="cb5" type="checkbox" />
<label class="btn-toggle-label" data-tg-off="UNSAVED" data-tg-on="SAVED" for="cb5"></label>

S CSS тоже long, лучше всего взглянуть на образец здесь:

https://codepen.io/cdemez/pen/QWjXRjw

Для обеих проблем найдите текст 'data-tg-off' в S CSS пожалуйста; -)

Есть идеи?

Thx

1 Ответ

3 голосов
/ 29 мая 2020

Для того, чтобы : до и : после отображалось содержимое, вам необходимо установить ширину элемента ярлыка, поскольку внутри ярлыка нет содержимого (логически пустого), только тогда вы сможете увидеть псевдоэлементы, поскольку псевдоэлементы отображаются внутри элемента до и после содержимого элемента. Кроме того, для появления font-awesome вам нужны юникоды значков, которые вы хотите показать, чтобы вы могли передать их как атрибут html в css, но также вам необходимо явно установить семейство шрифтов для псевдо элементы, которые сделают ваш текст странным. Две основные вещи, которые решают ваши варианты использования:

Для отображения значка внутри метки и для динамического c ширина псевдоэлементов:

HTML

<label class="btn-toggle-label" data-tg-off="UNSAVED &#xf004" data-tg-on="SAVED &#xf004 " for="cb5"></label>

CSS

.btn-toggle-flip {
+ .btn-toggle-label {
    &:after,
    &:before {
       width: auto;
       max-width: 100%;
       font-family: "Font Awesome 5 Free";
    }
}
.btn-toggle-label {
    width: 200px;
}

Я пробовал этот обходной путь для обоих вариантов использования здесь, проверьте эту ручку:

https://codepen.io/mudassirzr/pen/XWmvrWp

...