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.

102 lines
1.9 KiB

  1. /*-------------------
  2. Globals Used
  3. --------------------*/
  4. // (Color Variables)
  5. // @transitionDuration
  6. // @transitionEasing
  7. // @iconWidth
  8. // @borderColor
  9. // @textColor, @invertedTextColor
  10. /*-------------------
  11. Element
  12. --------------------*/
  13. @pageFont: "Helvetica Neue", "Helvetica", Arial;
  14. @verticalPadding: 0.65em;
  15. @horizontalPadding: 1em;
  16. @inputHeight: (@verticalPadding * 2) + 1.5;
  17. @background: #FFFFFF;
  18. @borderWidth: 1px;
  19. @border: @borderWidth solid rgba(0, 0, 0, 0.15);
  20. @boxShadow: none;
  21. @borderRadius: 0.3125em;
  22. @transition:
  23. background-color 0.3s ease-out,
  24. box-shadow 0.2s ease,
  25. border-color 0.2s ease
  26. ;
  27. @inputColor: @textColor;
  28. /*-------------------
  29. Types
  30. --------------------*/
  31. /* Icon */
  32. @iconOpacity: 0.5;
  33. @iconOffset: 0.82em;
  34. @iconFocusOpacity: 1;
  35. @iconMargin: 2.75em;
  36. @iconTransition: opacity 0.3s ease-out;
  37. /* Circular Icon Input */
  38. @circularIconVerticalOffset: 0.35em;
  39. @circularIconHorizontalOffset: 0.5em;
  40. /* Labeled */
  41. @labelSize: 0.7em;
  42. @labeledMargin: 2.5em;
  43. @labeledIconInputMargin: 3.25em;
  44. @labeledIconMargin: 1.25em;
  45. /*-------------------
  46. States
  47. --------------------*/
  48. /* Placeholder */
  49. @placeholderColor: @unselectedTextColor;
  50. @placeholderFocusColor: @textColor;
  51. @placeholderErrorColor: rgba(255, 80, 80, 0.4);
  52. @placeholderErrorFocusColor: rgba(255, 80, 80, 0.7);
  53. /* Down */
  54. @downBorderColor: rgba(0, 0, 0, 0.3);
  55. @downBackground: #FAFAFA;
  56. @downColor: @textColor;
  57. @downBoxShadow: none;
  58. /* Focus */
  59. @focusBorderColor: @selectedBorderColor;
  60. @focusBackground: '';
  61. @focusColor: @selectedTextColor;
  62. @focusBoxShadow: none;
  63. /* Error */
  64. @errorBackground: #FFFAFA;
  65. @errorBorder: #E7BEBE;
  66. @errorColor: #D95C5C;
  67. @errorBoxShadow: none;
  68. /* Loading */
  69. @loadingImage: "@{imagePath}/loader-mini.gif";
  70. /*-------------------
  71. Variations
  72. --------------------*/
  73. /* Sizing */
  74. @mini: 0.8125rem;
  75. @small: 0.875rem;
  76. @medium: 1rem;
  77. @large: 1.125rem;
  78. @big: 1.25rem;
  79. @huge: 1.375rem;
  80. @massive: 1.5rem;