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.
 
 
 
 
 

227 lines
6.7 KiB

  1. // Embedded icons from Open Iconic.
  2. // Released under MIT and copyright 2014 Waybury.
  3. // http://useiconic.com/open
  4. // Checkboxes and radios
  5. //
  6. // Base class takes care of all the key behavioral aspects.
  7. .c-input {
  8. position: relative;
  9. display: inline;
  10. padding-left: 1.5rem;
  11. color: #555;
  12. cursor: pointer;
  13. > input {
  14. position: absolute;
  15. z-index: -1; // Put the input behind the label so it doesn't overlay text
  16. opacity: 0;
  17. &:checked ~ .c-indicator {
  18. color: #fff;
  19. background-color: #0074d9;
  20. @include box-shadow(none);
  21. }
  22. &:focus ~ .c-indicator {
  23. // the mixin is not used here to make sure there is feedback
  24. box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
  25. }
  26. &:active ~ .c-indicator {
  27. color: #fff;
  28. background-color: #84c6ff;
  29. @include box-shadow(none);
  30. }
  31. }
  32. + .c-input {
  33. margin-left: 1rem;
  34. }
  35. }
  36. // Custom indicator
  37. //
  38. // Generates a shadow element to create our makeshift checkbox/radio background.
  39. .c-indicator {
  40. position: absolute;
  41. top: 0;
  42. left: 0;
  43. display: block;
  44. width: 1rem;
  45. height: 1rem;
  46. font-size: 65%;
  47. line-height: 1rem;
  48. color: #eee;
  49. text-align: center;
  50. user-select: none;
  51. background-color: #eee;
  52. background-repeat: no-repeat;
  53. background-position: center center;
  54. background-size: 50% 50%;
  55. @include box-shadow(inset 0 .125rem .125rem rgba(0,0,0,.1));
  56. }
  57. // Checkboxes
  58. //
  59. // Tweak just a few things for checkboxes.
  60. .c-checkbox {
  61. .c-indicator {
  62. border-radius: .25rem;
  63. }
  64. input:checked ~ .c-indicator {
  65. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
  66. }
  67. input:indeterminate ~ .c-indicator {
  68. background-color: #0074d9;
  69. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
  70. @include box-shadow(none);
  71. }
  72. }
  73. // Radios
  74. //
  75. // Tweak just a few things for radios.
  76. .c-radio {
  77. .c-indicator {
  78. border-radius: 50%;
  79. }
  80. input:checked ~ .c-indicator {
  81. background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
  82. }
  83. }
  84. // Layout options
  85. //
  86. // By default radios and checkboxes are `inline-block` with no additional spacing
  87. // set. Use these optional classes to tweak the layout.
  88. .c-inputs-stacked {
  89. .c-input {
  90. display: inline;
  91. &::after {
  92. display: block;
  93. margin-bottom: .25rem;
  94. content: "";
  95. }
  96. + .c-input {
  97. margin-left: 0;
  98. }
  99. }
  100. }
  101. // Select
  102. //
  103. // Replaces the browser default select with a custom one, mostly pulled from
  104. // http://primercss.io.
  105. //
  106. // Includes IE9-specific hacks (noted by ` \9`).
  107. .c-select {
  108. display: inline-block;
  109. max-width: 100%;
  110. padding: .375rem 1.75rem .375rem .75rem;
  111. padding-right: .75rem \9;
  112. color: $input-color;
  113. vertical-align: middle;
  114. background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
  115. background-image: none \9;
  116. background-size: 8px 10px;
  117. border: $input-btn-border-width solid $input-border-color;
  118. // Use vendor prefixes as `appearance` isn't part of the CSS spec.
  119. -moz-appearance: none;
  120. -webkit-appearance: none;
  121. &:focus {
  122. border-color: #51a7e8;
  123. outline: none;
  124. @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5));
  125. }
  126. // Hides the default caret in IE11
  127. &::-ms-expand {
  128. opacity: 0;
  129. }
  130. }
  131. .c-select-sm {
  132. padding-top: 3px;
  133. padding-bottom: 3px;
  134. font-size: 12px;
  135. &:not([multiple]) {
  136. height: 26px;
  137. min-height: 26px;
  138. }
  139. }
  140. // File
  141. //
  142. // Custom file input.
  143. .file {
  144. position: relative;
  145. display: inline-block;
  146. height: 2.5rem;
  147. cursor: pointer;
  148. }
  149. .file input {
  150. min-width: 14rem;
  151. margin: 0;
  152. filter: alpha(opacity = 0);
  153. opacity: 0;
  154. }
  155. .file-custom {
  156. position: absolute;
  157. top: 0;
  158. right: 0;
  159. left: 0;
  160. z-index: 5;
  161. height: 2.5rem;
  162. padding: .5rem 1rem;
  163. line-height: 1.5;
  164. color: #555;
  165. user-select: none;
  166. background-color: #fff;
  167. border: $input-btn-border-width solid #ddd;
  168. border-radius: .25rem;
  169. @include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
  170. }
  171. .file-custom::after {
  172. content: "Choose file...";
  173. }
  174. .file-custom::before {
  175. position: absolute;
  176. top: -.075rem;
  177. right: -.075rem;
  178. bottom: -.075rem;
  179. z-index: 6;
  180. display: block;
  181. height: 2.5rem;
  182. padding: .5rem 1rem;
  183. line-height: 1.5;
  184. color: #555;
  185. content: "Browse";
  186. background-color: #eee;
  187. border: $input-btn-border-width solid #ddd;
  188. border-radius: 0 .25rem .25rem 0;
  189. }
  190. // Focus state
  191. .file input:focus ~ .file-custom {
  192. @include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
  193. }