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.

242 lines
4.8KB

  1. //
  2. // Checkboxes
  3. // --------------------------------------------------
  4. @font-family-icon: 'ForkAwesome';
  5. @fa-var-check: "\f00c";
  6. @check-icon: @fa-var-check;
  7. .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. .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. .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. .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. .checkbox-variant(checkbox-primary, @brand-primary);
  102. .checkbox-variant(checkbox-danger, @brand-danger);
  103. .checkbox-variant(checkbox-info, @brand-info);
  104. .checkbox-variant(checkbox-warning, @brand-warning);
  105. .checkbox-variant(checkbox-success, @brand-success);
  106. .checkbox-variant-indeterminate(checkbox-primary, @brand-primary);
  107. .checkbox-variant-indeterminate(checkbox-danger, @brand-danger);
  108. .checkbox-variant-indeterminate(checkbox-info, @brand-info);
  109. .checkbox-variant-indeterminate(checkbox-warning, @brand-warning);
  110. .checkbox-variant-indeterminate(checkbox-success, @brand-success);
  111. //
  112. // Radios
  113. // --------------------------------------------------
  114. .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. .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. .scale(0, 0);
  163. .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. .tab-focus();
  172. }
  173. &:checked + label::after{
  174. .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. .radio-variant(radio-primary, @brand-primary);
  188. .radio-variant(radio-danger, @brand-danger);
  189. .radio-variant(radio-info, @brand-info);
  190. .radio-variant(radio-warning, @brand-warning);
  191. .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. }