Friendica Communications Platform (please note that this is a clone of the repository at github, issues are handled there) https://friendi.ca
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

246 lines
5.0KB

  1. //
  2. // Checkboxes
  3. // --------------------------------------------------
  4. $font-family-icon: 'ForkAwesome' !default;
  5. $fa-var-check: "\f00c" !default;
  6. $check-icon: $fa-var-check !default;
  7. @mixin checkbox-variant($parent, $color) {
  8. #{$parent} input[type="checkbox"]:checked + label,
  9. #{$parent} input[type="radio"]:checked + label {
  10. &::before {
  11. background-color: $color;
  12. border-color: $color;
  13. }
  14. &::after{
  15. color: #fff;
  16. }
  17. }
  18. }
  19. @mixin checkbox-variant-indeterminate($parent, $color) {
  20. #{$parent} input[type="checkbox"]:indeterminate + label,
  21. #{$parent} input[type="radio"]:indeterminate + label {
  22. &::before {
  23. background-color: $color;
  24. border-color: $color;
  25. }
  26. &::after{
  27. background-color: #fff;
  28. }
  29. }
  30. }
  31. .checkbox{
  32. padding-left: 20px;
  33. label{
  34. display: inline-block;
  35. vertical-align: middle;
  36. position: relative;
  37. padding-left: 5px;
  38. &::before{
  39. content: "";
  40. display: inline-block;
  41. position: absolute;
  42. width: 17px;
  43. height: 17px;
  44. left: 0;
  45. margin-left: -20px;
  46. border: 1px solid $input-border;
  47. border-radius: 3px;
  48. background-color: #fff;
  49. @include transition(border 0.15s ease-in-out, color 0.15s ease-in-out);
  50. }
  51. &::after{
  52. display: inline-block;
  53. position: absolute;
  54. width: 16px;
  55. height: 16px;
  56. left: 0;
  57. top: 0;
  58. margin-left: -20px;
  59. padding-left: 3px;
  60. padding-top: 1px;
  61. font-size: 11px;
  62. color: $input-color;
  63. }
  64. }
  65. input[type="checkbox"],
  66. input[type="radio"] {
  67. opacity: 0;
  68. z-index: 1;
  69. &:focus + label::before{
  70. @include tab-focus();
  71. }
  72. &:checked + label::after{
  73. font-family: $font-family-icon;
  74. content: $check-icon;
  75. }
  76. &:indeterminate + label::after{
  77. display: block;
  78. content: "";
  79. width: 10px;
  80. height: 3px;
  81. background-color: #555555;
  82. border-radius: 2px;
  83. margin-left: -16.5px;
  84. margin-top: 7px;
  85. }
  86. &:disabled + label{
  87. opacity: 0.65;
  88. &::before{
  89. background-color: $input-bg-disabled;
  90. cursor: not-allowed;
  91. }
  92. }
  93. }
  94. &.checkbox-circle label::before{
  95. border-radius: 50%;
  96. }
  97. &.checkbox-inline{
  98. margin-top: 0;
  99. }
  100. }
  101. @include checkbox-variant('.checkbox-primary', $brand-primary);
  102. @include checkbox-variant('.checkbox-danger', $brand-danger);
  103. @include checkbox-variant('.checkbox-info', $brand-info);
  104. @include checkbox-variant('.checkbox-warning', $brand-warning);
  105. @include checkbox-variant('.checkbox-success', $brand-success);
  106. @include checkbox-variant-indeterminate('.checkbox-primary', $brand-primary);
  107. @include checkbox-variant-indeterminate('.checkbox-danger', $brand-danger);
  108. @include checkbox-variant-indeterminate('.checkbox-info', $brand-info);
  109. @include checkbox-variant-indeterminate('.checkbox-warning', $brand-warning);
  110. @include checkbox-variant-indeterminate('.checkbox-success', $brand-success);
  111. //
  112. // Radios
  113. // --------------------------------------------------
  114. @mixin radio-variant($parent, $color) {
  115. #{$parent} input[type="radio"]{
  116. + label{
  117. &::after{
  118. background-color: $color;
  119. }
  120. }
  121. &:checked + label{
  122. &::before {
  123. border-color: $color;
  124. }
  125. &::after{
  126. background-color: $color;
  127. }
  128. }
  129. }
  130. }
  131. .radio{
  132. padding-left: 20px;
  133. label{
  134. display: inline-block;
  135. vertical-align: middle;
  136. position: relative;
  137. padding-left: 5px;
  138. &::before{
  139. content: "";
  140. display: inline-block;
  141. position: absolute;
  142. width: 17px;
  143. height: 17px;
  144. left: 0;
  145. margin-left: -20px;
  146. border: 1px solid $input-border;
  147. border-radius: 50%;
  148. background-color: #fff;
  149. @include transition(border 0.15s ease-in-out);
  150. }
  151. &::after{
  152. display: inline-block;
  153. position: absolute;
  154. content: " ";
  155. width: 11px;
  156. height: 11px;
  157. left: 3px;
  158. top: 3px;
  159. margin-left: -20px;
  160. border-radius: 50%;
  161. background-color: $input-color;
  162. @include scale(0, 0);
  163. @include transition-transform(.1s cubic-bezier(.8,-0.33,.2,1.33));
  164. //curve - http://cubic-bezier.com/#.8,-0.33,.2,1.33
  165. }
  166. }
  167. input[type="radio"]{
  168. opacity: 0;
  169. z-index: 1;
  170. &:focus + label::before{
  171. @include tab-focus();
  172. }
  173. &:checked + label::after{
  174. @include scale(1, 1);
  175. }
  176. &:disabled + label{
  177. opacity: 0.65;
  178. &::before{
  179. cursor: not-allowed;
  180. }
  181. }
  182. }
  183. &.radio-inline{
  184. margin-top: 0;
  185. }
  186. }
  187. @include radio-variant('.radio-primary', $brand-primary);
  188. @include radio-variant('.radio-danger', $brand-danger);
  189. @include radio-variant('.radio-info', $brand-info);
  190. @include radio-variant('.radio-warning', $brand-warning);
  191. @include radio-variant('.radio-success', $brand-success);
  192. input[type="checkbox"],
  193. input[type="radio"] {
  194. &.styled:checked + label:after {
  195. font-family: $font-family-icon;
  196. content: $check-icon;
  197. }
  198. .styled:checked + label {
  199. &::before {
  200. color: #fff;
  201. }
  202. &::after {
  203. color: #fff;
  204. }
  205. }
  206. }