mixin.styl 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. $defaultColor = #8FB1DD
  2. $aquaColor = #91D6DF
  3. $blueColor = #BAD0EF
  4. $greenColor = #9BDD89
  5. $tealColor = #97BEAD
  6. $purpleColor = #B6B4EB
  7. $brownColor = #DABB9E
  8. $redColor = #DD9DAC
  9. $chocolateColor = #BB906F
  10. // Sample colors
  11. $color1 = #9EDFB5
  12. $color2 = #DFA57C
  13. $color3 = #E6BC7E
  14. $color4 = #D5D298
  15. $color5 = #98D5A7
  16. $color6 = #98D5BA
  17. $color7 = #91D6DF
  18. $color8 = #8FB1DD
  19. $color9 = #A8B5E7
  20. $color10 = #AF9EDA
  21. $color11 = #DA9EC7
  22. $color12 = #DA9EAF
  23. $color13 = #DA9EA1
  24. $color14 = #DAA39E
  25. $color15 = #DAAF9E
  26. $color16 = #DABB9E
  27. $color17 = #DAC79E
  28. $color18 = #A5DA9E
  29. $color19 = #9EDAB1
  30. $color20 = #9EC4DA
  31. $color21 = #B6B4EB
  32. $color22 = #DD9DAC
  33. $color23 = #BAA8E6
  34. $color24 = #9BDD89
  35. $color25 = #E6D4A8
  36. $color26 = #E6CBA8
  37. $color27 = #E6B7A8
  38. $color28 = #97BEAD
  39. $primaryColor = $defaultColor
  40. $lightGrey = #A0A0A0
  41. $faintGrey = #F0F0F0
  42. $linkColor = darken($primaryColor, 20%)
  43. $textColor = #606060
  44. $textDarkColor = darken($textColor, 4%)
  45. $alertColor = #D3A924
  46. $normalFont = 300
  47. $boldFont = 400
  48. $heavyFont = 700
  49. border-radius()
  50. -moz-border-radius: arguments
  51. -webkit-border-radius: arguments
  52. border-radius: arguments
  53. /* Vertical Background Gradient */
  54. vbg-gradient(fc = #FFF, tc = #FFF)
  55. background: fc
  56. background: -webkit-gradient(linear, left top, left bottom, from(fc), to(tc))
  57. background: -moz-linear-gradient(top, fc, tc)
  58. background: linear-gradient(top, fc, tc)
  59. /* Horizontal Background Gradient */
  60. hbg-gradient(fc = #FFF, tc = #FFF)
  61. background: fc
  62. background: -webkit-gradient(linear, left top, right top, from(fc), to(tc))
  63. background: -moz-linear-gradient(left, fc, tc)
  64. background: linear-gradient(left, fc, tc)
  65. box-shadow()
  66. -moz-box-shadow: arguments
  67. -webkit-box-shadow: arguments
  68. box-shadow: arguments
  69. inset-box-shadow()
  70. -moz-box-shadow: inset arguments
  71. -webkit-box-shadow: inset arguments
  72. box-shadow: inset arguments
  73. box-flex(s = 0)
  74. -webkit-box-flex: s
  75. -moz-box-flex: s
  76. box-flex: s
  77. hbox()
  78. display: -webkit-box
  79. -webkit-box-orient: horizontal
  80. -webkit-box-align: stretch
  81. -webkit-box-pack: start
  82. display: -moz-box
  83. -moz-box-orient: horizontal
  84. -moz-box-align: stretch
  85. -moz-box-pack: start
  86. vbox()
  87. display: -webkit-box
  88. -webkit-box-orient: vertical
  89. -webkit-box-align: stretch
  90. display: -moz-box
  91. -moz-box-orient: vertical
  92. -moz-box-align: stretch
  93. border-box()
  94. -webkit-box-sizing: border-box
  95. -moz-box-sizing: border-box
  96. box-sizing: border-box
  97. content-box()
  98. -webkit-box-sizing: content-box
  99. -moz-box-sizing: content-box
  100. box-sizing: content-box
  101. transition(s = 0.3s, o = opacity, t = linear)
  102. -webkit-transition: s o t
  103. -moz-transition: s o t
  104. transition: s o t
  105. ellipsis()
  106. text-overflow: ellipsis
  107. overflow: hidden
  108. white-space:nowrap
  109. inset-line(opacity = 0.4, size = 1px)
  110. inset-box-shadow(0, size, 0, rgba(255, 255, 255, opacity))
  111. outset-line(opacity = 0.4, size = 1px)
  112. box-shadow(0, size, 0, rgba(255, 255, 255, opacity))
  113. box-pack(type = center)
  114. -webkit-box-pack: type
  115. -moz-box-pack: type
  116. box-pack: type
  117. transform(tr)
  118. -webkit-transform: tr
  119. -moz-transform: tr
  120. -ms-transform: tr
  121. -o-transform: tr
  122. transform: tr
  123. hacel()
  124. transform(translate3d(0,0,0))
  125. arrow(direction = 'right', size = 10px, color = #666, width = 0.53em, length = 1em)
  126. /*
  127. * In Internet Explorer, The"border-style: dashed" will never be
  128. * rendered unless "(width * 5) >= border-width" is true.
  129. * Since "width" is set to "0", the "dashed-border" remains
  130. * invisible to the user, which renders the border just like how
  131. * "border-color: transparent" renders.
  132. */
  133. border-style: dashed
  134. border-color: transparent
  135. border-width: width
  136. display: -moz-inline-box
  137. display: inline-block
  138. /* Use font-size to control the size of the arrow. */
  139. font-size: size
  140. height: 0
  141. line-height: 0
  142. position: relative
  143. vertical-align: middle
  144. width: 0
  145. border-{direction}-width: length;
  146. border-{direction}-style: solid;
  147. border-{direction}-color: color;
  148. {direction}: 0.25em;
  149. iconic(content = '\67', color = $textColor, pos = 'before')
  150. &:{pos}
  151. content: content
  152. font-family: 'fontello-kleks'
  153. font-style: normal
  154. font-weight: normal
  155. speak: none
  156. display: inline-block
  157. text-decoration: none
  158. width: 1em
  159. text-align: center
  160. line-height: 1em
  161. font-size: 1em
  162. color: color
  163. -webkit-font-smoothing: antialiased
  164. clearfix()
  165. *zoom: 1
  166. &:before, &:after
  167. display: table
  168. content: ""
  169. &:after
  170. clear: both