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.

191 lines
5.7 KiB

2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
  1. @import (reference) "./colortheme-all.less";
  2. .checkmark_vars(
  3. @size: 20px
  4. ) {
  5. @checkmark-size: @size;
  6. @checkmark-width: round(@size / 8);
  7. @checkmark-dim1: round(@size / 3);
  8. @checkmark-dim2: round(2 * @size / 3);
  9. @checkmark-top: round(@size / 12) - 1;
  10. @checkmark-radio-size: @checkmark-dim1 * 3;
  11. }
  12. .checkmark_main(@size: 20px) {
  13. --LessLoader_require: LessLoader_currentFile();
  14. .checkmark_vars(@size);
  15. --checkmark-size: @checkmark-size;
  16. --checkmark-width: @checkmark-width;
  17. --checkmark-dim1: @checkmark-dim1;
  18. --checkmark-dim2: @checkmark-dim2;
  19. --checkmark-top: @checkmark-top;
  20. --checkmark-radio-size: @checkmark-radio-size;
  21. }
  22. & {
  23. .checkmark_vars();
  24. // <label.cp-checkmark><input><span.cp-checkmark-mark></span>Text</label>
  25. .cp-checkmark {
  26. margin: 0;
  27. display: flex;
  28. align-items: center;
  29. position: relative;
  30. -webkit-user-select: none;
  31. -moz-user-select: none;
  32. -ms-user-select: none;
  33. user-select: none;
  34. & > a {
  35. margin-left: 0.25em;
  36. }
  37. &.cp-checkmark-secondary {
  38. .cp-checkmark-mark {
  39. &:after {
  40. border-color: @colortheme_checkmark-col2;
  41. }
  42. }
  43. input {
  44. &:checked ~ .cp-checkmark-mark {
  45. background-color: @colortheme_checkmark-back2;
  46. border-color: @colortheme_checkmark-back2;
  47. }
  48. }
  49. }
  50. &:hover .cp-checkmark-mark {
  51. background-color: @colortheme_checkmark-back0-active;
  52. }
  53. input {
  54. display: none;
  55. &:checked ~ .cp-checkmark-mark {
  56. background-color: @colortheme_checkmark-back1;
  57. border-color: @colortheme_checkmark-back1;
  58. &:after {
  59. display: block;
  60. }
  61. }
  62. }
  63. .cp-checkmark-label {
  64. cursor: default;
  65. &:empty {
  66. display: none;
  67. }
  68. }
  69. .cp-checkmark-mark {
  70. margin-right: 10px;
  71. position: relative;
  72. height: @checkmark-size;
  73. height: var(--checkmark-size);
  74. width: @checkmark-size;
  75. width: var(--checkmark-size);
  76. background-color: @colortheme_checkmark-back0;
  77. display: flex;
  78. justify-content: center;
  79. border: 1px solid @colortheme_form-border;
  80. flex-shrink: 0;
  81. &:after {
  82. content: "";
  83. display: none;
  84. margin-top: @checkmark-top;
  85. margin-top: var(--checkmark-top);
  86. width: @checkmark-dim1;
  87. width: var(--checkmark-dim1);
  88. height: @checkmark-dim2;
  89. height: var(--checkmark-dim2);
  90. transform: rotate(45deg);
  91. border: solid @colortheme_checkmark-col1;
  92. border-width: 0 @checkmark-width @checkmark-width 0;
  93. border-width: 0 var(--checkmark-width) var(--checkmark-width) 0;
  94. position: absolute;
  95. }
  96. &:focus {
  97. //border-color: #FF007C !important;
  98. box-shadow: 0px 0px 5px @colortheme_checkmark-back1;
  99. outline: none;
  100. }
  101. }
  102. }
  103. .cp-radio {
  104. margin: 0;
  105. display: flex;
  106. align-items: center;
  107. position: relative;
  108. -webkit-user-select: none;
  109. -moz-user-select: none;
  110. -ms-user-select: none;
  111. user-select: none;
  112. &.cp-radio-secondary {
  113. .cp-radio-mark {
  114. &:after {
  115. border-color: @colortheme_checkmark-col2;
  116. }
  117. }
  118. input {
  119. &:checked ~ .cp-radio-mark {
  120. background-color: @colortheme_checkmark-back2;
  121. }
  122. }
  123. }
  124. &:hover .cp-radio-mark {
  125. background-color: @colortheme_checkmark-back0-active;
  126. }
  127. input {
  128. display: none;
  129. &:checked ~ .cp-radio-mark {
  130. background-color: @colortheme_checkmark-back1;
  131. border-color: @colortheme_checkmark-back1;
  132. &:after {
  133. display: block;
  134. }
  135. }
  136. }
  137. .cp-checkmark-label {
  138. cursor: default;
  139. &:empty {
  140. display: none;
  141. }
  142. }
  143. .cp-radio-mark {
  144. margin-right: 10px;
  145. position: relative;
  146. height: @checkmark-radio-size;
  147. height: var(--checkmark-radio-size);
  148. width: @checkmark-radio-size;
  149. width: var(--checkmark-radio-size);
  150. background-color: @colortheme_checkmark-back0;
  151. border-radius: 50%;
  152. display: flex;
  153. justify-content: center;
  154. align-items: center;
  155. border: 1px solid @colortheme_form-border;
  156. flex-shrink: 0;
  157. &:after {
  158. display: none;
  159. content: "";
  160. border-radius: 50%;
  161. background: white;
  162. width: @checkmark-dim1;
  163. width: var(--checkmark-dim1);
  164. height: @checkmark-dim1;
  165. height: var(--checkmark-dim1);
  166. //transform: rotate(45deg);
  167. //border: solid @colortheme_checkmark-col1;
  168. //border-width: 0 var(--checkmark-width) var(--checkmark-width) 0;
  169. }
  170. &:focus {
  171. //border-color: #FF007C !important;
  172. box-shadow: 0px 0px 5px @colortheme_checkmark-back1;
  173. outline: none;
  174. }
  175. }
  176. }
  177. }