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