You are here

Home » API reference » Icon Select 8

icon_select.css in Icon Select 8 

.icon-select-wrapper {
  max-width: 1200px;
}
.icon-select-wrapper .form-type-checkbox {
  display: block;
  border-bottom: 1px solid lightgrey;
  padding: 2px;
  text-align: center;
  position: relative;
}
.icon-select-wrapper .form-type-checkbox.selected {
  background-color: rgb(235, 235, 235);
  font-weight: bold;
}
.icon-select-wrapper .form-checkboxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.icon-select-wrapper .form-checkboxes .form-type-checkbox {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  padding-left: 32px;
  margin: 0;
  box-sizing: border-box;
  cursor: pointer;
}
@media (min-width: 767px) {
  .icon-select-wrapper .form-checkboxes .form-type-checkbox {
    flex: 0 0 48%;
  }
}
@media (min-width: 767px) {
  .icon-select-wrapper .form-checkboxes .form-type-checkbox:nth-child(even) {
    margin-left: 24px;
  }
}
.icon-select-wrapper input {
  order: 1;
  height: 100%;
  left: 5px;
  position: absolute;
  top: 0;
}
.icon-select-wrapper .field-suffix {
  order: 2;
  opacity: 0.5;
  position: relative;
  margin-right: 24px;
  margin-left: 5px;
  transition: 0.18s;
}
.icon-select-wrapper .field-suffix:hover {
  transform: scale(2);
  z-index: 1000;
  background: white;
  opacity: 1;
}
.icon-select-wrapper .form-type-checkbox.selected .field-suffix {
  opacity: 1;
}
.icon-select-wrapper .icon {
  width: 32px;
  height: 32px;
  display: block;
  order: 1;
}
.icon-select-wrapper .field-prefix {
  order: 3;
}

File

css/icon_select.css
View source 
  1. .icon-select-wrapper {

  2.   max-width: 1200px;

  3. }

  4. .icon-select-wrapper .form-type-checkbox {

  5.   display: block;

  6.   border-bottom: 1px solid lightgrey;

  7.   padding: 2px;

  8.   text-align: center;

  9.   position: relative;

  10. }

  11. .icon-select-wrapper .form-type-checkbox.selected {

  12.   background-color: rgb(235, 235, 235);

  13.   font-weight: bold;

  14. }

  15. .icon-select-wrapper .form-checkboxes {

  16.   display: flex;

  17.   flex-direction: row;

  18.   flex-wrap: wrap;

  19. }

  20. .icon-select-wrapper .form-checkboxes .form-type-checkbox {

  21.   display: flex;

  22.   flex: 0 0 100%;

  23.   align-items: center;

  24.   padding-left: 32px;

  25.   margin: 0;

  26.   box-sizing: border-box;

  27.   cursor: pointer;

  28. }

  29. @media (min-width: 767px) {

  30.   .icon-select-wrapper .form-checkboxes .form-type-checkbox {

  31.     flex: 0 0 48%;

  32.   }

  33. }

  34. @media (min-width: 767px) {

  35.   .icon-select-wrapper .form-checkboxes .form-type-checkbox:nth-child(even) {

  36.     margin-left: 24px;

  37.   }

  38. }

  39. .icon-select-wrapper input {

  40.   order: 1;

  41.   height: 100%;

  42.   left: 5px;

  43.   position: absolute;

  44.   top: 0;

  45. }

  46. .icon-select-wrapper .field-suffix {

  47.   order: 2;

  48.   opacity: 0.5;

  49.   position: relative;

  50.   margin-right: 24px;

  51.   margin-left: 5px;

  52.   transition: 0.18s;

  53. }

  54. .icon-select-wrapper .field-suffix:hover {

  55.   transform: scale(2);

  56.   z-index: 1000;

  57.   background: white;

  58.   opacity: 1;

  59. }

  60. .icon-select-wrapper .form-type-checkbox.selected .field-suffix {

  61.   opacity: 1;

  62. }

  63. .icon-select-wrapper .icon {

  64.   width: 32px;

  65.   height: 32px;

  66.   display: block;

  67.   order: 1;

  68. }

  69. .icon-select-wrapper .field-prefix {

  70.   order: 3;

  71. }