1
  2/**
  3 * Checkbox
  4 * --------------------------------------------------
  5 */
  6
  7.checkbox {
  8  // set the color defaults
  9  @include checkbox-style($checkbox-off-border-default, $checkbox-on-bg-default, $checkbox-on-border-default);
 10
 11  position: relative;
 12  display: inline-block;
 13  padding: ($checkbox-height / 4) ($checkbox-width / 4);
 14  cursor: pointer;
 15}
 16.checkbox-light  {
 17  @include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light, $checkbox-off-border-light);
 18}
 19.checkbox-stable  {
 20  @include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable, $checkbox-off-border-stable);
 21}
 22.checkbox-positive  {
 23  @include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive, $checkbox-off-border-positive);
 24}
 25.checkbox-calm  {
 26  @include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm, $checkbox-off-border-calm);
 27}
 28.checkbox-assertive  {
 29  @include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive, $checkbox-off-border-assertive);
 30}
 31.checkbox-balanced  {
 32  @include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced, $checkbox-off-border-balanced);
 33}
 34.checkbox-energized{
 35  @include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized, $checkbox-off-border-energized);
 36}
 37.checkbox-royal  {
 38  @include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal, $checkbox-off-border-royal);
 39}
 40.checkbox-dark  {
 41  @include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark, $checkbox-off-border-dark);
 42}
 43
 44.checkbox input:disabled:before,
 45.checkbox input:disabled + .checkbox-icon:before {
 46  border-color: $checkbox-off-border-light;
 47}
 48
 49.checkbox input:disabled:checked:before,
 50.checkbox input:disabled:checked + .checkbox-icon:before {
 51  background: $checkbox-on-bg-light;
 52}
 53
 54
 55.checkbox.checkbox-input-hidden input {
 56  display: none !important;
 57}
 58
 59.checkbox input,
 60.checkbox-icon {
 61  position: relative;
 62  width: $checkbox-width;
 63  height: $checkbox-height;
 64  display: block;
 65  border: 0;
 66  background: transparent;
 67  cursor: pointer;
 68  -webkit-appearance: none;
 69
 70  &:before {
 71    // what the checkbox looks like when its not checked
 72    display: table;
 73    width: 100%;
 74    height: 100%;
 75    border-width: $checkbox-border-width;
 76    border-style: solid;
 77    border-radius: $checkbox-border-radius;
 78    background: $checkbox-off-bg-color;
 79    content: ' ';
 80    @include transition(background-color 20ms ease-in-out);
 81  }
 82}
 83
 84.checkbox input:checked:before,
 85input:checked + .checkbox-icon:before {
 86  border-width: $checkbox-border-width + 1;
 87}
 88
 89// the checkmark within the box
 90.checkbox input:after,
 91.checkbox-icon:after {
 92  @include transition(opacity .05s ease-in-out);
 93  @include rotate(-45deg);
 94  position: absolute;
 95  top: 33%;
 96  left: 25%;
 97  display: table;
 98  width: ($checkbox-width / 2);
 99  height: ($checkbox-width / 4) - 1;
100  border: $checkbox-check-width solid $checkbox-check-color;
101  border-top: 0;
102  border-right: 0;
103  content: ' ';
104  opacity: 0;
105}
106
107.platform-android .checkbox-platform input:before,
108.platform-android .checkbox-platform .checkbox-icon:before,
109.checkbox-square input:before,
110.checkbox-square .checkbox-icon:before {
111  border-radius: 2px;
112  width: 72%;
113  height: 72%;
114  margin-top: 14%;
115  margin-left: 14%;
116  border-width: 2px;
117}
118
119.platform-android .checkbox-platform input:after,
120.platform-android .checkbox-platform .checkbox-icon:after,
121.checkbox-square input:after,
122.checkbox-square .checkbox-icon:after {
123  border-width: 2px;
124  top: 19%;
125  left: 25%;
126  width: ($checkbox-width / 2) - 1;
127  height: 7px;
128}
129
130.platform-android .item-checkbox-right .checkbox-square .checkbox-icon::after {
131  top: 31%;
132}
133
134.grade-c .checkbox input:after,
135.grade-c .checkbox-icon:after {
136  @include rotate(0);
137  top: 3px;
138  left: 4px;
139  border: none;
140  color: $checkbox-check-color;
141  content: '\2713';
142  font-weight: bold;
143  font-size: 20px;
144}
145
146// what the checkmark looks like when its checked
147.checkbox input:checked:after,
148input:checked + .checkbox-icon:after {
149  opacity: 1;
150}
151
152// make sure item content have enough padding on left to fit the checkbox
153.item-checkbox {
154  padding-left: ($item-padding * 2) + $checkbox-width;
155
156  &.active {
157    box-shadow: none;
158  }
159}
160
161// position the checkbox to the left within an item
162.item-checkbox .checkbox {
163  position: absolute;
164  top: 50%;
165  right: $item-padding / 2;
166  left: $item-padding / 2;
167  z-index: $z-index-item-checkbox;
168  margin-top: (($checkbox-height + ($checkbox-height / 2)) / 2) * -1;
169}
170
171
172.item-checkbox.item-checkbox-right {
173  padding-right: ($item-padding * 2) + $checkbox-width;
174  padding-left: $item-padding;
175}
176
177.item-checkbox-right .checkbox input,
178.item-checkbox-right .checkbox-icon {
179  float: right;
180}