richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge 18d5a0d20c into 6f2a912708

pull/3369/merge
Fatih Kececi 2 years ago
committed by GitHub
parent
6f2a912708 18d5a0d20c
commit
3750509e29
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 356 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 356
      src/definitions/modules/checkbox.less

356
src/definitions/modules/checkbox.less
View File

@ -595,4 +595,360 @@
width: @sliderWidth;
}
/*-------------------
Colors
--------------------*/
/*--- Red ---*/
.ui.toggle.red.checkbox input:checked~.box:before,
.ui.toggle.red.checkbox input:checked~label:before {
background-color: @red;
}
.ui.slider.red.checkbox input:checked~.box:before,
.ui.slider.red.checkbox input:checked~label:before {
background-color: @red;
}
.ui.red.checkbox input:checked~.box:before,
.ui.red.checkbox input:checked~label:before {
background: @red;
border-color: @red;
}
.ui.red.checkbox input:checked ~ .box:after,
.ui.red.checkbox input:checked ~ label:after {
opacity: 1;
color: @redTextColor;
}
.ui.radio.red.checkbox input:checked ~ .box:before,
.ui.radio.red.checkbox input:checked ~ label:before {
background-color: @redTextColor;
}
.ui.radio.red.checkbox input:checked~.box:after,
.ui.radio.red.checkbox input:checked~label:after {
background-color: @red;
}
/*--- Orange ---*/
.ui.toggle.orange.checkbox input:checked~.box:before,
.ui.toggle.orange.checkbox input:checked~label:before {
background-color: @orange;
}
.ui.slider.orange.checkbox input:checked~.box:before,
.ui.slider.orange.checkbox input:checked~label:before {
background-color: @orange;
}
.ui.orange.checkbox input:checked~.box:before,
.ui.orange.checkbox input:checked~label:before {
background: @orange;
border-color: @orange;
}
.ui.orange.checkbox input:checked ~ .box:after,
.ui.orange.checkbox input:checked ~ label:after {
opacity: 1;
color: @orangeTextColor;
}
.ui.radio.orange.checkbox input:checked ~ .box:before,
.ui.radio.orange.checkbox input:checked ~ label:before {
background-color: @orangeTextColor;
}
.ui.radio.orange.checkbox input:checked~.box:after,
.ui.radio.orange.checkbox input:checked~label:after {
background-color: @orange;
}
/*--- Yellow ---*/
.ui.toggle.yellow.checkbox input:checked~.box:before,
.ui.toggle.yellow.checkbox input:checked~label:before {
background-color: @yellow;
}
.ui.slider.yellow.checkbox input:checked~.box:before,
.ui.slider.yellow.checkbox input:checked~label:before {
background-color: @yellow;
}
.ui.yellow.checkbox input:checked~.box:before,
.ui.yellow.checkbox input:checked~label:before {
background: @yellow;
border-color: @yellow;
}
.ui.yellow.checkbox input:checked ~ .box:after,
.ui.yellow.checkbox input:checked ~ label:after {
opacity: 1;
color: @yellowTextColor;
}
.ui.radio.yellow.checkbox input:checked ~ .box:before,
.ui.radio.yellow.checkbox input:checked ~ label:before {
background-color: @yellowTextColor;
}
.ui.radio.yellow.checkbox input:checked~.box:after,
.ui.radio.yellow.checkbox input:checked~label:after {
background-color: @yellow;
}
/*--- Olive ---*/
.ui.toggle.olive.checkbox input:checked~.box:before,
.ui.toggle.olive.checkbox input:checked~label:before {
background-color: @olive;
}
.ui.slider.olive.checkbox input:checked~.box:before,
.ui.slider.olive.checkbox input:checked~label:before {
background-color: @olive;
}
.ui.olive.checkbox input:checked~.box:before,
.ui.olive.checkbox input:checked~label:before {
background: @olive;
border-color: @olive;
}
.ui.olive.checkbox input:checked ~ .box:after,
.ui.olive.checkbox input:checked ~ label:after {
opacity: 1;
color: @oliveTextColor;
}
.ui.radio.olive.checkbox input:checked ~ .box:before,
.ui.radio.olive.checkbox input:checked ~ label:before {
background-color: @oliveTextColor;
}
.ui.radio.olive.checkbox input:checked~.box:after,
.ui.radio.olive.checkbox input:checked~label:after {
background-color: @olive;
}
/*--- Green ---*/
.ui.toggle.green.checkbox input:checked~.box:before,
.ui.toggle.green.checkbox input:checked~label:before {
background-color: @green;
}
.ui.slider.green.checkbox input:checked~.box:before,
.ui.slider.green.checkbox input:checked~label:before {
background-color: @green;
}
.ui.green.checkbox input:checked~.box:before,
.ui.green.checkbox input:checked~label:before {
background: @green;
border-color: @green;
}
.ui.green.checkbox input:checked ~ .box:after,
.ui.green.checkbox input:checked ~ label:after {
opacity: 1;
color: @greenTextColor;
}
.ui.radio.green.checkbox input:checked ~ .box:before,
.ui.radio.green.checkbox input:checked ~ label:before {
background-color: @greenTextColor;
}
.ui.radio.green.checkbox input:checked~.box:after,
.ui.radio.green.checkbox input:checked~label:after {
background-color: @green;
}
/*--- Teal ---*/
.ui.toggle.teal.checkbox input:checked~.box:before,
.ui.toggle.teal.checkbox input:checked~label:before {
background-color: @teal;
}
.ui.slider.teal.checkbox input:checked~.box:before,
.ui.slider.teal.checkbox input:checked~label:before {
background-color: @teal;
}
.ui.teal.checkbox input:checked~.box:before,
.ui.teal.checkbox input:checked~label:before {
background: @teal;
border-color: @teal;
}
.ui.teal.checkbox input:checked ~ .box:after,
.ui.teal.checkbox input:checked ~ label:after {
opacity: 1;
color: @tealTextColor;
}
.ui.radio.teal.checkbox input:checked ~ .box:before,
.ui.radio.teal.checkbox input:checked ~ label:before {
background-color: @tealTextColor;
}
.ui.radio.teal.checkbox input:checked~.box:after,
.ui.radio.teal.checkbox input:checked~label:after {
background-color: @teal;
}
/*--- Blue ---*/
.ui.toggle.blue.checkbox input:checked~.box:before,
.ui.toggle.blue.checkbox input:checked~label:before {
background-color: @blue;
}
.ui.slider.blue.checkbox input:checked~.box:before,
.ui.slider.blue.checkbox input:checked~label:before {
background-color: @blue;
}
.ui.blue.checkbox input:checked~.box:before,
.ui.blue.checkbox input:checked~label:before {
background: @blue;
border-color: @blue;
}
.ui.blue.checkbox input:checked ~ .box:after,
.ui.blue.checkbox input:checked ~ label:after {
opacity: 1;
color: @blueTextColor;
}
.ui.radio.blue.checkbox input:checked ~ .box:before,
.ui.radio.blue.checkbox input:checked ~ label:before {
background-color: @blueTextColor;
}
.ui.radio.blue.checkbox input:checked~.box:after,
.ui.radio.blue.checkbox input:checked~label:after {
background-color: @blue;
}
/*--- Violet ---*/
.ui.toggle.violet.checkbox input:checked~.box:before,
.ui.toggle.violet.checkbox input:checked~label:before {
background-color: @violet;
}
.ui.slider.violet.checkbox input:checked~.box:before,
.ui.slider.violet.checkbox input:checked~label:before {
background-color: @violet;
}
.ui.violet.checkbox input:checked~.box:before,
.ui.violet.checkbox input:checked~label:before {
background: @violet;
border-color: @violet;
}
.ui.violet.checkbox input:checked ~ .box:after,
.ui.violet.checkbox input:checked ~ label:after {
opacity: 1;
color: @violetTextColor;
}
.ui.radio.violet.checkbox input:checked ~ .box:before,
.ui.radio.violet.checkbox input:checked ~ label:before {
background-color: @violetTextColor;
}
.ui.radio.violet.checkbox input:checked~.box:after,
.ui.radio.violet.checkbox input:checked~label:after {
background-color: @violet;
}
/*--- Purple ---*/
.ui.toggle.purple.checkbox input:checked~.box:before,
.ui.toggle.purple.checkbox input:checked~label:before {
background-color: @purple;
}
.ui.slider.purple.checkbox input:checked~.box:before,
.ui.slider.purple.checkbox input:checked~label:before {
background-color: @purple;
}
.ui.purple.checkbox input:checked~.box:before,
.ui.purple.checkbox input:checked~label:before {
background: @purple;
border-color: @purple;
}
.ui.purple.checkbox input:checked ~ .box:after,
.ui.purple.checkbox input:checked ~ label:after {
opacity: 1;
color: @purpleTextColor;
}
.ui.radio.purple.checkbox input:checked ~ .box:before,
.ui.radio.purple.checkbox input:checked ~ label:before {
background-color: @purpleTextColor;
}
.ui.radio.purple.checkbox input:checked~.box:after,
.ui.radio.purple.checkbox input:checked~label:after {
background-color: @purple;
}
/*--- Pink ---*/
.ui.toggle.pink.checkbox input:checked~.box:before,
.ui.toggle.pink.checkbox input:checked~label:before {
background-color: @pink;
}
.ui.slider.pink.checkbox input:checked~.box:before,
.ui.slider.pink.checkbox input:checked~label:before {
background-color: @pink;
}
.ui.pink.checkbox input:checked~.box:before,
.ui.pink.checkbox input:checked~label:before {
background: @pink;
border-color: @pink;
}
.ui.pink.checkbox input:checked ~ .box:after,
.ui.pink.checkbox input:checked ~ label:after {
opacity: 1;
color: @pinkTextColor;
}
.ui.radio.pink.checkbox input:checked ~ .box:before,
.ui.radio.pink.checkbox input:checked ~ label:before {
background-color: @pinkTextColor;
}
.ui.radio.pink.checkbox input:checked~.box:after,
.ui.radio.pink.checkbox input:checked~label:after {
background-color: @pink;
}
/*--- Brown ---*/
.ui.toggle.brown.checkbox input:checked~.box:before,
.ui.toggle.brown.checkbox input:checked~label:before {
background-color: @brown;
}
.ui.slider.brown.checkbox input:checked~.box:before,
.ui.slider.brown.checkbox input:checked~label:before {
background-color: @brown;
}
.ui.brown.checkbox input:checked~.box:before,
.ui.brown.checkbox input:checked~label:before {
background: @brown;
border-color: @brown;
}
.ui.brown.checkbox input:checked ~ .box:after,
.ui.brown.checkbox input:checked ~ label:after {
opacity: 1;
color: @brownTextColor;
}
.ui.radio.brown.checkbox input:checked ~ .box:before,
.ui.radio.brown.checkbox input:checked ~ label:before {
background-color: @brownTextColor;
}
.ui.radio.brown.checkbox input:checked~.box:after,
.ui.radio.brown.checkbox input:checked~label:after {
background-color: @brown;
}
/*--- Grey ---*/
.ui.toggle.grey.checkbox input:checked~.box:before,
.ui.toggle.grey.checkbox input:checked~label:before {
background-color: @grey;
}
.ui.slider.grey.checkbox input:checked~.box:before,
.ui.slider.grey.checkbox input:checked~label:before {
background-color: @grey;
}
.ui.grey.checkbox input:checked~.box:before,
.ui.grey.checkbox input:checked~label:before {
background: @grey;
border-color: @grey;
}
.ui.grey.checkbox input:checked ~ .box:after,
.ui.grey.checkbox input:checked ~ label:after {
opacity: 1;
color: @greyTextColor;
}
.ui.radio.grey.checkbox input:checked ~ .box:before,
.ui.radio.grey.checkbox input:checked ~ label:before {
background-color: @greyTextColor;
}
.ui.radio.grey.checkbox input:checked~.box:after,
.ui.radio.grey.checkbox input:checked~label:after {
background-color: @grey;
}
/*--- Black ---*/
.ui.toggle.black.checkbox input:checked~.box:before,
.ui.toggle.black.checkbox input:checked~label:before {
background-color: @black;
}
.ui.slider.black.checkbox input:checked~.box:before,
.ui.slider.black.checkbox input:checked~label:before {
background-color: @black;
}
.ui.black.checkbox input:checked~.box:before,
.ui.black.checkbox input:checked~label:before {
background: @black;
border-color: @black;
}
.ui.black.checkbox input:checked ~ .box:after,
.ui.black.checkbox input:checked ~ label:after {
opacity: 1;
color: @blackTextColor;
}
.ui.radio.black.checkbox input:checked ~ .box:before,
.ui.radio.black.checkbox input:checked ~ label:before {
background-color: @blackTextColor;
}
.ui.radio.black.checkbox input:checked~.box:after,
.ui.radio.black.checkbox input:checked~label:after {
background-color: @black;
}
.loadUIOverrides();
Write Preview
Loading…
Cancel
Save