×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

LESS start-up

0
0
 
0
Language: CSS
Posted by: 1080000000 kmph
Added: Jun 4, 2020 12:16 PM
Views: 4373
Tags: bootstrap crossbrowser css less lesscss variables
  1.  
  2. /* HTML5 display-role reset for older browsers */
  3. article,
  4. aside,
  5. details,
  6. figcaption,
  7. figure,
  8. footer,
  9. header,
  10. hgroup,
  11. menu,
  12. nav,
  13. section {
  14.     display: block;
  15. }
  16.  
  17. img {
  18.     max-width: 100%;
  19.     height: auto;
  20. }
  21.  
  22. /* ==========================================================================
  23. Font-face family         >> fonts/stylesheet.css
  24. ========================================================================== */
  25.  
  26. @sans-serif: sans-serif;
  27. @nunito: "Nunito", sans-serif;
  28. @ariel-narrow: "Arial Narrow", "Arial", sans-serif;
  29.  
  30. /* ==========================================================================
  31. Font-face family         >> fonts/stylesheet.css
  32. ========================================================================== */
  33.  
  34. @text-shadow: 0 -1px 5px rgba(150, 150, 150, 1);
  35. @box-shadow-top: 0 -4px 2px -2px rgba(0, 0, 0, 0.4);
  36. @box-shadow-right: 4px 0 2px -2px rgba(0, 0, 0, 0.4);
  37. @box-shadow-bottom: 0 4px 2px -2px rgba(0, 0, 0, 0.4);
  38. @box-shadow-left: -4px 0 2px -2px rgba(0, 0, 0, 0.4);
  39.  
  40. @light: 300;
  41. @regular: 400;
  42. @medium: 500;
  43. @semibold: 600;
  44. @bold: 700;
  45. @extrabold: 900;
  46.  
  47. /* ==========================================================================
  48. Font-size / responsive fonts     >>
  49. ========================================================================== */
  50.  
  51. @font-size-base: 18px;
  52. @font-size-xxl: ceil(@font-size-base * 6);
  53. @font-size-xl: ceil(@font-size-base * 5);
  54. @font-size-large: ceil(@font-size-base * 3.6);
  55. @font-size-default: ceil(@font-size-base * 1);
  56. @font-size-small: ceil(@font-size-base * 0.95);
  57. @font-size-h1: floor((@font-size-base * 3.6));
  58. @font-size-h2: floor((@font-size-base * 3.15));
  59. @font-size-h3: floor((@font-size-base * 2.2));
  60. @font-size-h4: floor((@font-size-base * 1.5));
  61. @font-size-h5: @font-size-base;
  62. @font-size-h6: floor((@font-size-base * 0.85));
  63. @line-height-base: 1.3;
  64. @line-height-small: 1;
  65. @line-height-medium: 1.5;
  66. @line-height-large: 2;
  67. @line-height-single: floor((@line-height-base * 1));
  68. @line-height-normal: @line-height-base;
  69. @line-height-double: floor((@line-height-base * 2.2));
  70. @line-height-triple: floor((@line-height-base * 3));
  71. @line-height-social-label: floor((@line-height-base * 3.6));
  72. /* ==========================================================================
  73. Global Colors - defined
  74. ========================================================================== */
  75.  
  76. @primary_color: #000066;
  77. @second_color: #01ff00;
  78. @text-color: #121111;
  79. @darkgray: #333333;
  80. @black: #000000;
  81. @lightgray: #f3f3f3;
  82. @gray: #716b5c;
  83. @white: #ffffff;
  84. @transparent: transparent;
  85. @errors: darkred;
  86. @success: darkgreen;
  87. @info: darkblue;
  88. @warning: gold;
  89.  
  90. /* ==========================================================================
  91. Helpers
  92. ========================================================================== */
  93.  
  94. ul.horizon {
  95.     width: 100%;
  96.     margin: 0;
  97.     padding: 0;
  98.     display: block;
  99.     position: relative;
  100.     display: block;
  101.     overflow: hidden;
  102.     float: left;
  103. }
  104.  
  105. ul.horizon li {
  106.     float: left;
  107.     list-style-type: none;
  108.     &.right {
  109.         float: right !important;
  110.     }
  111. }
  112.  
  113. .hidden {
  114.     display: none;
  115. }
  116.  
  117. .clear,
  118. .clearfix {
  119.     width: 100%;
  120.     clear: both;
  121.     position: relative;
  122.     margin: 0;
  123.     padding: 0;
  124. }
  125.  
  126. a {
  127.     text-decoration: none !important;
  128. }
  129.  
  130. .js-fail {
  131.     position: absolute;
  132.     top: 0;
  133.     left: 0;
  134.     display: block;
  135.     background: #f00;
  136.     color: #fff;
  137.     text-align: center;
  138.     z-index: 99999 !important;
  139.     width: 100%;
  140.     max-width: 100%;
  141.     padding: 0.5em 1em 0;
  142. }
  143.  
  144.  
  145. button,
  146. .btn {
  147.     border-radius: 0 !important;
  148.     color: @second_color;
  149.     font-weight: @bold !important;
  150.     text-transform: uppercase;
  151.  
  152.     &.default {
  153.         background: @second_color !important;
  154.         color: @white !important;
  155.     }
  156.  
  157.     &.second {
  158.         background: @white !important;
  159.         color: @second_color !important;
  160.     }
  161.     &:focus {
  162.         outline: 0 dotted !important;
  163.         outline: 0 auto -webkit-focus-ring-color !important;
  164.     }
  165. }
  166.  
  167. textarea,
  168. select {
  169.     width: 100% !important;
  170. }
  171.  
  172. .form-control {
  173.     border: 1px solid #c2c2c2 !important;
  174. }
  175.  
  176. a:hover {
  177.     color: @black;
  178.     -webkit-transition: all 0.5s ease 0s;
  179.     -moz-transition: all 0.5s ease 0s;
  180.     -o-transition: all 0.5s ease 0s;
  181.     transition: all 0.5s ease 0s;
  182. }
  183.  
  184. /* ==========================================================================
  185. Body
  186. ========================================================================== */
  187.  
  188. body {
  189.     width: 100%;
  190.     height: 100%;
  191.     margin: 0;
  192.     padding: 0;
  193.     position: relative;
  194.     -webkit-font-smoothing: antialiased;
  195.     -webkit-text-size-adjust: 100%;
  196.     font-family: @ariel-narrow !important;
  197.     font-weight: @regular;
  198.     font-size: @font-size-base !important;
  199.     color: @text-color;
  200.     line-height: @line-height-normal;
  201.     overflow-x: hidden;
  202.  
  203.     p {
  204.         color: @text-color;
  205.         margin: 0;
  206.         padding: 0;
  207.     }
  208. }
  209.  

Write a comment

To post comments, please log in or register.