123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. @import "../../themes/ionic.globals.wp";
  2. // Windows Checkbox
  3. // --------------------------------------------------
  4. /// @prop - Border bottom width of the checkbox
  5. $checkbox-wp-border-bottom-width: 1px !default;
  6. /// @prop - Border bottom style of the checkbox
  7. $checkbox-wp-border-bottom-style: solid !default;
  8. /// @prop - Border bottom color of the checkbox
  9. $checkbox-wp-border-bottom-color: $list-wp-border-color !default;
  10. /// @prop - Opacity of the disabled checkbox
  11. $checkbox-wp-disabled-opacity: .3 !default;
  12. /// @prop - Background color of the checkbox icon when off
  13. $checkbox-wp-icon-background-color-off: $list-wp-background-color !default;
  14. /// @prop - Background color of the checkbox icon when on
  15. $checkbox-wp-icon-background-color-on: color($colors-wp, primary) !default;
  16. /// @prop - Size of the checkbox icon
  17. $checkbox-wp-icon-size: 16px !default;
  18. /// @prop - Width of the checkbox icon checkmark
  19. $checkbox-wp-icon-checkmark-width: 1px !default;
  20. /// @prop - Style of the checkbox icon checkmark
  21. $checkbox-wp-icon-checkmark-style: solid !default;
  22. /// @prop - Color of the checkbox icon checkmark
  23. $checkbox-wp-icon-checkmark-color: color-contrast($colors-wp, $checkbox-wp-icon-background-color-on) !default;
  24. /// @prop - Border width of the checkbox icon
  25. $checkbox-wp-icon-border-width: 2px !default;
  26. /// @prop - Border style of the checkbox icon
  27. $checkbox-wp-icon-border-style: solid !default;
  28. /// @prop - Border radius of the checkbox icon
  29. $checkbox-wp-icon-border-radius: 0 !default;
  30. /// @prop - Border color of the checkbox icon when off
  31. $checkbox-wp-icon-border-color-off: #333 !default;
  32. /// @prop - Border color of the checkbox icon when on
  33. $checkbox-wp-icon-border-color-on: color($colors-wp, primary) !default;
  34. // deprecated
  35. $checkbox-wp-item-left-margin: null !default;
  36. /// @prop - Margin top of the start checkbox item
  37. $checkbox-wp-item-start-margin-top: $item-wp-padding-media-top !default;
  38. /// @prop - Margin end of the start checkbox item
  39. $checkbox-wp-item-start-margin-end: $item-wp-padding-end !default;
  40. /// @prop - Margin bottom of the start checkbox item
  41. $checkbox-wp-item-start-margin-bottom: $item-wp-padding-media-bottom !default;
  42. /// @prop - Margin start of the start checkbox item
  43. $checkbox-wp-item-start-margin-start: 4px !default;
  44. // deprecated
  45. $checkbox-wp-item-right-margin: null !default;
  46. /// @prop - Margin top of the end checkbox item
  47. $checkbox-wp-item-end-margin-top: 11px !default;
  48. /// @prop - Margin end of the end checkbox item
  49. $checkbox-wp-item-end-margin-end: 10px !default;
  50. /// @prop - Margin bottom of the end checkbox item
  51. $checkbox-wp-item-end-margin-bottom: 10px !default;
  52. /// @prop - Margin start of the end checkbox item
  53. $checkbox-wp-item-end-margin-start: 0 !default;
  54. .checkbox-wp {
  55. position: relative;
  56. display: inline-block;
  57. }
  58. // Windows Checkbox Outer Square: Unchecked
  59. // -----------------------------------------
  60. .checkbox-wp .checkbox-icon {
  61. @include border-radius($checkbox-wp-icon-border-radius);
  62. position: relative;
  63. width: $checkbox-wp-icon-size;
  64. height: $checkbox-wp-icon-size;
  65. border-width: $checkbox-wp-icon-border-width;
  66. border-style: $checkbox-wp-icon-border-style;
  67. border-color: $checkbox-wp-icon-border-color-off;
  68. background-color: $checkbox-wp-icon-background-color-off;
  69. }
  70. // Windows Checkbox Outer Square: Checked
  71. // -----------------------------------------
  72. .checkbox-wp .checkbox-checked {
  73. border-color: $checkbox-wp-icon-border-color-on;
  74. background-color: $checkbox-wp-icon-background-color-on;
  75. }
  76. // Windows Checkbox Inner Checkmark: Checked
  77. // -----------------------------------------
  78. .checkbox-wp .checkbox-checked .checkbox-inner {
  79. @include position(-2px, null, null, 3px);
  80. position: absolute;
  81. width: 6px;
  82. height: 12px;
  83. border-width: $checkbox-wp-icon-checkmark-width;
  84. border-top-width: 0;
  85. border-left-width: 0;
  86. border-style: $checkbox-wp-icon-checkmark-style;
  87. border-color: $checkbox-wp-icon-checkmark-color;
  88. transform: rotate(45deg);
  89. }
  90. // Windows Checkbox: Disabled
  91. // -----------------------------------------
  92. .checkbox-wp.checkbox-disabled,
  93. .item-wp.item-checkbox-disabled ion-label {
  94. opacity: $checkbox-wp-disabled-opacity;
  95. pointer-events: none;
  96. }
  97. // Windows Checkbox Within An Item
  98. // -----------------------------------------
  99. .item.item-wp .checkbox-wp {
  100. position: static;
  101. display: block;
  102. @include deprecated-variable(margin, $checkbox-wp-item-left-margin) {
  103. @include margin($checkbox-wp-item-start-margin-top, $checkbox-wp-item-start-margin-end, $checkbox-wp-item-start-margin-bottom, $checkbox-wp-item-start-margin-start);
  104. }
  105. }
  106. .item.item-wp .checkbox-wp[item-right], // deprecated
  107. .item.item-wp .checkbox-wp[item-end] {
  108. @include deprecated-variable(margin, $checkbox-wp-item-right-margin) {
  109. @include margin($checkbox-wp-item-end-margin-top, $checkbox-wp-item-end-margin-end, $checkbox-wp-item-end-margin-bottom, $checkbox-wp-item-end-margin-start);
  110. }
  111. }
  112. .checkbox-wp + .item-inner ion-label {
  113. @include margin-horizontal(0, null);
  114. }
  115. // Windows Checkbox Color Mixin
  116. // --------------------------------------------------
  117. @mixin checkbox-theme-wp($color-name, $color-base, $color-contrast) {
  118. .checkbox-wp-#{$color-name} .checkbox-checked {
  119. border-color: $color-base;
  120. background-color: $color-base;
  121. }
  122. .checkbox-wp-#{$color-name} .checkbox-checked .checkbox-inner {
  123. border-color: $color-contrast;
  124. }
  125. }
  126. // Generate Windows Checkbox Colors
  127. // --------------------------------------------------
  128. @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
  129. @include checkbox-theme-wp($color-name, $color-base, $color-contrast);
  130. }