_variable.scss 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. // Variables
  2. @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i|Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
  3. $bodyfont:'IBM Plex Sans', sans-serif;
  4. $headingfont:'Rubik', sans-serif;;
  5. $p100: 100%;
  6. $sid-bar-w: 19.29rem;
  7. $r-sid-bar-w: 340px;
  8. $hed-max: 135px;
  9. $main-hed-nav: 80px;
  10. $default-border-radius: 10px;
  11. $fct-border-radius: 10px;
  12. $border-circle: 50%;
  13. $mini-sid-bar-w: 60px;
  14. $ctrl-sid-bar-w: 345px;
  15. $inn-pg-sid-bar-w: 280px;
  16. $default-gutter-width: 1.5rem;
  17. // Typography
  18. //
  19. // Font-size, font-weight
  20. $fw-unset:unset;
  21. $fw-100:100;
  22. $fw-200: 200;
  23. $fw-300: 300;
  24. $fw-400: 400;
  25. $fw-500: 500;
  26. $fw-600: 600;
  27. $fw-700: 700;
  28. $fw-800: 800;
  29. $fw-900: 900;
  30. $fw-light: 100;
  31. $fw-normal: 400;
  32. $fw-medium: 500;
  33. $fw-bold: 700;
  34. $fs-0: 0;
  35. $fs-10: 0.7143rem;
  36. $fs-12: 0.8571rem;
  37. $fs-14: 1rem;
  38. $fs-16: 1.143rem;
  39. $fs-18: 1.286rem;
  40. $fs-20: 1.429rem;
  41. $fs-22: 1.5714285714285714rem;
  42. $fs-24: 1.714rem;
  43. $fs-26: 1.857rem;
  44. $fs-30: 2.143rem;
  45. $fs-32: 2.2857142857142856rem;
  46. $fs-36: 2.5714285714285716rem;
  47. $fs-38: 2.7142857142857144rem;
  48. $fs-40: 2.857rem;
  49. $fs-42: 3rem;
  50. $fs-46: 3.2857142857142856rem;
  51. $fs-48: 3.4285714285714284rem;
  52. $fs-50: 3.571rem;
  53. $fs-60: 4.286rem;
  54. $fs-70: 5rem;
  55. $fs-72: 5.142857142857143rem;
  56. $fs-76: 5.428571428571429rem;
  57. $fs-78: 5.571428571428571rem;
  58. $fs-80: 5.714rem;
  59. $fs-100: 7.142857142857143rem;
  60. $fs-140: 10rem ;
  61. $fs-180: 12.857142857142858rem;
  62. $fs-200: 14.285714285714286rem ;
  63. /*Social Media Colors*/
  64. $facebook: #3b5998;
  65. $google: #dd4b39;
  66. $twitter: #1da1f2;
  67. $linkedin: #0077b5;
  68. $pinterest: #bd081c;
  69. $git: #6cc644;
  70. $tumblr: #35465c;
  71. $vimeo: #1ab7ea;
  72. $youtube: #ff0000;
  73. $flickr: #ff0084;
  74. $reddit: #ff4500;
  75. $dribbble: #ea4c89;
  76. $skype: #00aff0;
  77. $instagram: #e1306c;
  78. $lastfm: #d51007;
  79. $behance: #1769ff;
  80. $rss: #f26522;
  81. $bitbucket: #205081;
  82. $dropbox: #007ee5;
  83. $foursquare: #2d5be3;
  84. $github: #4078c0;
  85. $vk: #45668e;
  86. /*Theme Colors*/
  87. $dark: #172b4c;
  88. $light:#f3f6f9;
  89. $light2:#ebedf3;
  90. $light3: #e4e6ef;
  91. $light4: #d1d3e0;
  92. $light5: #b5b5c3;
  93. $dx-blue: #485e90;
  94. $white:#ffffff;
  95. $black:#000000;
  96. $primary:#4c95dd;
  97. $secondary:#e4e6ef;
  98. $info:#634fd2;
  99. $success:#01b075;
  100. $warning:#ffb500;
  101. $danger:#e66430;
  102. $mildgray: #bcc2c8;
  103. $icon-lite-color: #172b4c;
  104. $wrapper: #f3f2f7;
  105. $wrapper-dark: #20304c;
  106. /*Lite color*/
  107. $primary-lite:#cde3f9;
  108. $secondary-lite:#e9edf2;
  109. $info-lite:#e3defe;
  110. $success-lite:#e9f5ea;
  111. $warning-lite:#fdf6d9;
  112. $danger-lite:#ffe1d5;
  113. /*Theme Colors For Dark*/
  114. $body-dark: #0c1a32;
  115. $dark-text: #b5b5c3;
  116. $dark2: #566f9e;
  117. $dark3: #0c1a32;
  118. $dark-title: #bdd1f8;
  119. $colors: (
  120. 'primary': $primary,
  121. 'secondary': $secondary,
  122. 'info': $info,
  123. 'success': $success,
  124. 'warning': $warning,
  125. 'danger': $danger,
  126. 'dark': $dark,
  127. 'white': $white,
  128. 'black': $black,
  129. 'light': $light,
  130. );
  131. $gray-100: #f3f6f9;
  132. $gray-200: #ebedf3;
  133. $gray-300: #e4e6ef;
  134. $gray-400: #d1d3e0;
  135. $gray-500: #b5b5c3;
  136. $gray-600: #7e8299;
  137. $gray-700: #5e6278;
  138. $gray-800: #3f4254;
  139. $gray-900: #181c32;
  140. $theme-primary-primary: #4c95dd;
  141. $theme-primary-secondary:#e4e6ef;
  142. $theme-primary-info: #634fd2;
  143. $theme-primary-success: #01b075;
  144. $theme-primary-danger: #e66430;
  145. $theme-primary-warning: #ffb500;
  146. $theme-primary-primary-lite: #cde3f9;
  147. $theme-primary-secondary-lite:#e9edf2;
  148. $theme-primary-info-lite: #e3defe;
  149. $theme-primary-success-lite: #e9f5ea;
  150. $theme-primary-danger-lite: #ffe1d5;
  151. $theme-primary-warning-lite: #fdf6d9;
  152. $theme-primary-grd: linear-gradient(1deg, $theme-primary-primary, lighten($theme-primary-primary, 10%));
  153. $theme-primary-grd-dark: linear-gradient(1deg, darken($theme-primary-primary, 20%), darken($theme-primary-primary, 30%));
  154. $theme-secondary-primary: #e4e6ef;
  155. $theme-secondary-secondary:#4c95dd;
  156. $theme-secondary-info: #634fd2;
  157. $theme-secondary-success: #01b075;
  158. $theme-secondary-danger: #e66430;
  159. $theme-secondary-warning: #ffb500;
  160. $theme-secondary-primary-lite: #e9edf2;
  161. $theme-secondary-secondary-lite:#cde3f9;
  162. $theme-secondary-info-lite: #e3defe;
  163. $theme-secondary-success-lite: #e9f5ea;
  164. $theme-secondary-danger-lite: #ffe1d5;
  165. $theme-secondary-warning-lite: #fdf6d9;
  166. $theme-secondary-grd: linear-gradient(1deg, $theme-secondary-primary, darken($theme-secondary-primary, 10%));
  167. $theme-secondary-grd-dark: linear-gradient(1deg, darken($theme-secondary-primary, 25%), darken($theme-secondary-primary, 35%));
  168. $theme-info-primary: #634fd2;
  169. $theme-info-secondary:#e4e6ef;
  170. $theme-info-info: #4c95dd;
  171. $theme-info-success: #01b075;
  172. $theme-info-danger: #e66430;
  173. $theme-info-warning: #ffb500;
  174. $theme-info-primary-lite: #e3defe;
  175. $theme-info-secondary-lite:#e9edf2;
  176. $theme-info-info-lite: #cde3f9;
  177. $theme-info-success-lite: #e9f5ea;
  178. $theme-info-danger-lite: #ffe1d5;
  179. $theme-info-warning-lite: #fdf6d9;
  180. $theme-info-grd: linear-gradient(1deg, $theme-info-primary, lighten($theme-info-primary, 10%));
  181. $theme-info-grd-dark: linear-gradient(1deg, darken($theme-info-primary, 20%), darken($theme-info-primary, 30%));
  182. $theme-success-primary: #01b075;
  183. $theme-success-secondary:#e4e6ef;
  184. $theme-success-info: #634fd2;
  185. $theme-success-success: #4c95dd;
  186. $theme-success-danger: #e66430;
  187. $theme-success-warning: #ffb500;
  188. $theme-success-primary-lite: #e9f5ea;
  189. $theme-success-secondary-lite:#e9edf2;
  190. $theme-success-info-lite: #e3defe;
  191. $theme-success-success-lite: #cde3f9;
  192. $theme-success-danger-lite: #ffe1d5;
  193. $theme-success-warning-lite: #fdf6d9;
  194. $theme-success-grd: linear-gradient(1deg, $theme-success-primary, lighten($theme-success-primary, 10%));
  195. $theme-success-grd-dark: linear-gradient(90deg, darken($theme-success-primary, 20%), darken($theme-success-primary, 30%));
  196. $theme-danger-primary: #e66430;
  197. $theme-danger-secondary:#e4e6ef;
  198. $theme-danger-info: #634fd2;
  199. $theme-danger-success: #01b075;
  200. $theme-danger-danger: #4c95dd;
  201. $theme-danger-warning: #ffb500;
  202. $theme-danger-primary-lite: #ffe1d5;
  203. $theme-danger-secondary-lite:#e9edf2;
  204. $theme-danger-info-lite: #e3defe;
  205. $theme-danger-success-lite: #e9f5ea;
  206. $theme-danger-danger-lite: #cde3f9;
  207. $theme-danger-warning-lite: #fdf6d9;
  208. $theme-danger-grd: linear-gradient(1deg, $theme-danger-primary, lighten($theme-danger-primary, 10%));
  209. $theme-danger-grd-dark: linear-gradient(1deg, darken($theme-danger-primary, 20%), darken($theme-danger-primary, 30%));
  210. $theme-warning-primary: #ffb500;
  211. $theme-warning-secondary:#e4e6ef;
  212. $theme-warning-info: #634fd2;
  213. $theme-warning-success: #01b075;
  214. $theme-warning-danger: #e66430;
  215. $theme-warning-warning: #4c95dd;
  216. $theme-warning-primary-lite: #fdf6d9;
  217. $theme-warning-secondary-lite:#e9edf2;
  218. $theme-warning-info-lite: #e3defe;
  219. $theme-warning-success-lite: #e9f5ea;
  220. $theme-warning-danger-lite: #ffe1d5;
  221. $theme-warning-warning-lite: #cde3f9;
  222. $theme-warning-grd: linear-gradient(1deg, $theme-warning-primary, lighten($theme-warning-primary, 10%));
  223. $theme-warning-grd-dark: linear-gradient(1deg, darken($theme-warning-primary, 20%), darken($theme-warning-primary, 30%));