_util.scss 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. /**
  2. * Utility Classes
  3. * --------------------------------------------------
  4. */
  5. .hide {
  6. display: none;
  7. }
  8. .opacity-hide {
  9. opacity: 0;
  10. }
  11. .grade-b .opacity-hide,
  12. .grade-c .opacity-hide {
  13. opacity: 1;
  14. display: none;
  15. }
  16. .show {
  17. display: block;
  18. }
  19. .opacity-show {
  20. opacity: 1;
  21. }
  22. .invisible {
  23. visibility: hidden;
  24. }
  25. .keyboard-open .hide-on-keyboard-open {
  26. display: none;
  27. }
  28. .keyboard-open .tabs.hide-on-keyboard-open + .pane .has-tabs,
  29. .keyboard-open .bar-footer.hide-on-keyboard-open + .pane .has-footer {
  30. bottom: 0;
  31. }
  32. .inline {
  33. display: inline-block;
  34. }
  35. .disable-pointer-events {
  36. pointer-events: none;
  37. }
  38. .enable-pointer-events {
  39. pointer-events: auto;
  40. }
  41. .disable-user-behavior {
  42. // used to prevent the browser from doing its native behavior. this doesnt
  43. // prevent the scrolling, but cancels the contextmenu, tap highlighting, etc
  44. @include user-select(none);
  45. @include touch-callout(none);
  46. @include tap-highlight-transparent();
  47. -webkit-user-drag: none;
  48. -ms-touch-action: none;
  49. -ms-content-zooming: none;
  50. }
  51. // Fill the screen to block clicks (a better pointer-events: none) for the body
  52. // to avoid full-page reflows and paints which can cause flickers
  53. .click-block {
  54. position: absolute;
  55. top: 0;
  56. right: 0;
  57. bottom: 0;
  58. left: 0;
  59. opacity: 0;
  60. z-index: $z-index-click-block;
  61. @include translate3d(0, 0, 0);
  62. overflow: hidden;
  63. }
  64. .click-block-hide {
  65. @include translate3d(-9999px, 0, 0);
  66. }
  67. .no-resize {
  68. resize: none;
  69. }
  70. .block {
  71. display: block;
  72. clear: both;
  73. &:after {
  74. display: block;
  75. visibility: hidden;
  76. clear: both;
  77. height: 0;
  78. content: ".";
  79. }
  80. }
  81. .full-image {
  82. width: 100%;
  83. }
  84. .clearfix {
  85. *zoom: 1;
  86. &:before,
  87. &:after {
  88. display: table;
  89. content: "";
  90. // Fixes Opera/contenteditable bug:
  91. // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
  92. line-height: 0;
  93. }
  94. &:after {
  95. clear: both;
  96. }
  97. }
  98. /**
  99. * Content Padding
  100. * --------------------------------------------------
  101. */
  102. .padding {
  103. padding: $content-padding;
  104. }
  105. .padding-top,
  106. .padding-vertical {
  107. padding-top: $content-padding;
  108. }
  109. .padding-right,
  110. .padding-horizontal {
  111. padding-right: $content-padding;
  112. }
  113. .padding-bottom,
  114. .padding-vertical {
  115. padding-bottom: $content-padding;
  116. }
  117. .padding-left,
  118. .padding-horizontal {
  119. padding-left: $content-padding;
  120. }
  121. /**
  122. * Scrollable iFrames
  123. * --------------------------------------------------
  124. */
  125. .iframe-wrapper {
  126. position: fixed;
  127. -webkit-overflow-scrolling: touch;
  128. overflow: scroll;
  129. iframe {
  130. height: 100%;
  131. width: 100%;
  132. }
  133. }
  134. /**
  135. * Rounded
  136. * --------------------------------------------------
  137. */
  138. .rounded {
  139. border-radius: $border-radius-base;
  140. }
  141. /**
  142. * Utility Colors
  143. * --------------------------------------------------
  144. * Utility colors are added to help set a naming convention. You'll
  145. * notice we purposely do not use words like "red" or "blue", but
  146. * instead have colors which represent an emotion or generic theme.
  147. */
  148. .light, a.light {
  149. color: $light;
  150. }
  151. .light-bg {
  152. background-color: $light;
  153. }
  154. .light-border {
  155. border-color: $button-light-border;
  156. }
  157. .stable, a.stable {
  158. color: $stable;
  159. }
  160. .stable-bg {
  161. background-color: $stable;
  162. }
  163. .stable-border {
  164. border-color: $button-stable-border;
  165. }
  166. .positive, a.positive {
  167. color: $positive;
  168. }
  169. .positive-bg {
  170. background-color: $positive;
  171. }
  172. .positive-border {
  173. border-color: $button-positive-border;
  174. }
  175. .calm, a.calm {
  176. color: $calm;
  177. }
  178. .calm-bg {
  179. background-color: $calm;
  180. }
  181. .calm-border {
  182. border-color: $button-calm-border;
  183. }
  184. .assertive, a.assertive {
  185. color: $assertive;
  186. }
  187. .assertive-bg {
  188. background-color: $assertive;
  189. }
  190. .assertive-border {
  191. border-color: $button-assertive-border;
  192. }
  193. .balanced, a.balanced {
  194. color: $balanced;
  195. }
  196. .balanced-bg {
  197. background-color: $balanced;
  198. }
  199. .balanced-border {
  200. border-color: $button-balanced-border;
  201. }
  202. .energized, a.energized {
  203. color: $energized;
  204. }
  205. .energized-bg {
  206. background-color: $energized;
  207. }
  208. .energized-border {
  209. border-color: $button-energized-border;
  210. }
  211. .royal, a.royal {
  212. color: $royal;
  213. }
  214. .royal-bg {
  215. background-color: $royal;
  216. }
  217. .royal-border {
  218. border-color: $button-royal-border;
  219. }
  220. .dark, a.dark {
  221. color: $dark;
  222. }
  223. .dark-bg {
  224. background-color: $dark;
  225. }
  226. .dark-border {
  227. border-color: $button-dark-border;
  228. }
  229. [collection-repeat] {
  230. /* Position is set by transforms */
  231. left: 0 !important;
  232. top: 0 !important;
  233. position: absolute !important;
  234. z-index: 1;
  235. }
  236. .collection-repeat-container {
  237. position: relative;
  238. z-index: 1; //make sure it's above the after-container
  239. }
  240. .collection-repeat-after-container {
  241. z-index: 0;
  242. display: block;
  243. /* when scrolling horizontally, make sure the after container doesn't take up 100% width */
  244. &.horizontal {
  245. display: inline-block;
  246. }
  247. }
  248. // ng-show fix for windows phone
  249. // https://www.hoessl.eu/2014/12/on-using-the-ionic-framework-for-windows-phone-8-1-apps/
  250. [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak,
  251. .x-ng-cloak, .ng-hide:not(.ng-hide-animate) {
  252. display: none !important;
  253. }