Создать флажки с иконками внутри кругов - PullRequest
1 голос
/ 10 февраля 2020

Мне нужна помощь по поводу того, что сводит меня с ума, хахаха. Итак, у меня есть следующие флажки: enter image description here

Итак, у меня есть такой дизайн, который мой коллега по UX & UI сделал для этого проекта, мне нужно что-то похожее на это:

enter image description here Как вы можете видеть на изображении выше, мне нужно реализовать что-то, где нет флажков, и в данный момент я выбираю значок, синий цвет которого должен отображаться на границе как пользователь знает, что опция была выбрана.

Ресурс, который я использую для этого, является материализованным CSS флажками, а мой текущий CSS следующий:

/*Checkboxes*/
[type="checkbox"]:checked + span:not(.lever):before {
    top: -4px;
    left: -5px;
    width: 12px;
    height: 22px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #2372bd;
    border-bottom: 2px solid #2372bd;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

/*Checkboxes*/
[type="checkbox"] + span:not(.lever):before, [type="checkbox"]:not(.filled-in) + span:not(.lever):after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    z-index: 0;
    border: 2px solid #888888;
    border-radius: 1px;
    margin-top: 3px;
    -webkit-transition: .2s;
    transition: .2s;
}

//This are the current circles that wrapps the icons
.services-circle{
  border: 1px solid #858585;
  width: 45px;
  margin-top: 10px;
  margin-bottom: 20px;
  height: 45px;
  border-radius: 50%;
}

//Current HTML
<label>
   <div class="services-circle center-align">
     <i class="material-icons-two-tone px32 no-margin-top-bottom">fireplace</i>
      <input name="property[services_attributes][0][gas]" type="hidden" value="0"><input 
 type="checkbox" value="1" name="property[services_attributes][0][gas]" 
 id="property_services_attributes_0_gas">
     <span for="gas">Gas</span>
    </div>
</label>

ПРИМЕЧАНИЕ. Если я выберу значок или кружок он отмечен флажком, так что я думаю, это здорово enter image description here

Итак, есть ли какой-нибудь крутой ресурс в потерянном inte rnet, чтобы сделать что-то подобное? Или если у вас есть какой-нибудь базовый код, который подталкивает меня к достижению чего-то подобного, это было бы здорово! Буду признателен за вашу помощь!

1 Ответ

2 голосов
/ 10 февраля 2020

Установите флажки для отображения: нет;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...