dimanche 21 janvier 2018

Unable to move checkboxes to right

I am unable to move all checkboxes right in one vertical line. I have no idea how can i do it. Because float:right added to .checkbox moves all content to right.

You can take a look for better understanding of my problem on site https://vitas.sk/OnlineTv/ (it loads slowly because of embed videos and big images)

<!-- BEGIN - FILTERS -->
    <div class="indexfilters">
    <div class="border">
    <label class="checkbox">
    <i class="fas fa-child"></i><a class="icontext">Starostlivosť o deti</a>
    <input id="check1" type="checkbox" onchange="console.log('changed');">
    <span></span>
    </label><br>
    <label class="checkbox">
    <i class="fas fa-utensils"></i><a class="icontext">Zdravá strava</a>
    <input id="check1" type="checkbox" onchange="console.log('changed');">
    <span></span>
    </label><br>
    <label class="checkbox">
    <i class="fas fa-book"></i><a class="icontext">Recepty</a>
    <input id="check1" type="checkbox" onchange="console.log('changed');">
    <span></span>
    </label>
    <label class="checkbox">
    <i class="fas fa-crosshairs"></i><a class="icontext">Potravinové podvody</a>
    <input id="check1" type="checkbox" onchange="console.log('changed');">
    <span></span>
    </label>
    <label class="checkbox">
    <i class="fas fa-ban"></i><a class="icontext">Jedy v potrave</a>
    <input id="check1" type="checkbox" onchange="console.log('changed');">
    <span></span>
    </label>
    <label class="checkbox">
    <i class="fas fa-industry"></i><a class="icontext">Potravinový priemysel</a>
    <input id="check1" type="checkbox" onchange="console.log('changed');">
    <span></span>
    </label>
    <label class="checkbox">
    <i class="fas fa-recycle"></i><a class="icontext">Recyklovanie</a>
    <input id="check1" type="checkbox" onchange="console.log('changed');">
    <span></span>
    </label>
    <div class="divbtnfilter">
    <a class="btnfilter">Filtrovať</a>
    </div>
    </div>
    </div>

CSS

/* Checkboxes */

body:not(#foo) input[type='checkbox'] {
  opacity: 0;
}

.checkbox, .radio {
  position: relative;
  cursor: pointer;
  padding: 1em;
  display:inline-block;


}
.checkbox::-moz-selection, .radio::-moz-selection {
  background: transparent;
}
.checkbox::selection, .radio::selection {
  background: transparent;
}
.checkbox input + span, .radio input + span {
    border: 1px solid black;
  background: white;
  content: "";
  display: inline-block;
  margin: 0 .5em 9px 0;
  padding: 0;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}
.checkbox input + span::after, .radio input + span::after {
  content: "";
  display: block;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}
@media screen and (min-width: 768px) {
  .checkbox:hover input + span, .radio:hover input + span {
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  }
}
.checkbox input:active + span, .radio input:active + span {
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.checkbox input:focus + span, .radio input:focus + span {
  -webkit-box-shadow: 0 0 0 3px lightblue;
          box-shadow: 0 0 0 3px lightblue;
}
.checkbox input:checked + span::after, .radio input:checked + span::after {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.checkbox input, .radio input {
  position: absolute;
  cursor: pointer;
  opacity: 0;
}

.checkbox input + span {
  border-radius: 2px;
}
.checkbox input + span::after {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTMuNzA3LDMyLjI5MyAxMi4yOTMsMzMuODU0IDI0LjI5Myw0NiAyNS43MDcsNDYgNDkuNzA3LDIxLjg1NCA0OC4yOTMsMjAuMzY2IDI1LDQzLjYyMyAiLz48L2c+PC9zdmc+) no-repeat center;
  background-size: contain;
  width: 1em;
  height: 1em;
}

.radio input + span {
  border-radius: 100%;
}
.radio input + span::after {
  border-radius: 100%;
  margin: .65em;
  width: .75em;
  height: .75em;
}
.radio input:checked + span::after {
  background: black;
}




Aucun commentaire:

Enregistrer un commentaire