API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 20th, 2016
66
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.97 KB | None | 0 0
raw download clone embed print report
  1. //************************
  2. // VARIABLES
  3. //************************
  4. $gl-gridName: grid !default;
  5. $gl-colName: cell !default;
  6. $gl-gutter: 30px !default; // Total
  7. $gl-col-bottom: $gl-gutter !default;
  8.  
  9. $breakpoints: (
  10. xs: 0,
  11. sm: 576px,
  12. md: 768px,
  13. lg: 992px,
  14. xl: 1200px
  15. ) !default;
  16.  
  17. $gl-sm: "screen and (min-width: 576px)" !default;
  18. $gl-md: "screen and (min-width: 768px)" !default;
  19. $gl-lg: "screen and (min-width: 992px)" !default;
  20. $gl-xl: "screen and (min-width: 1200px)" !default;
  21.  
  22. // margin and padding values array
  23. $space-values : (
  24. 0,
  25. 1,
  26. 2,
  27. 3,
  28. 4,
  29. 5,
  30. 10,
  31. 15,
  32. 20,
  33. 25,
  34. 30,
  35. 35,
  36. 40,
  37. 45,
  38. 50,
  39. 60,
  40. 70,
  41. 80
  42. ) !default;
  43.  
  44. // margin and padding shorthands
  45. $space-prefixes : (
  46. p : padding,
  47. pt : padding-top,
  48. pr : padding-right,
  49. pb : padding-bottom,
  50. pl : padding-left,
  51. px : (padding-left, padding-right),
  52. py : (padding-top, padding-bottom),
  53. m : margin,
  54. mt : margin-top,
  55. mr : margin-right,
  56. mb : margin-bottom,
  57. ml : margin-left,
  58. mx : (margin-left, margin-right),
  59. my : (margin-top, margin-bottom),
  60. ) !default;
  61.  
  62. $glp_col-1: (100%/12);
  63. $glp_col-2: ($glp_col-1*2);
  64. $glp_col-3: ($glp_col-1*3);
  65. $glp_col-4: ($glp_col-1*4);
  66. $glp_col-5: ($glp_col-1*5);
  67. $glp_col-6: ($glp_col-1*6);
  68. $glp_col-7: ($glp_col-1*7);
  69. $glp_col-8: ($glp_col-1*8);
  70. $glp_col-9: ($glp_col-1*9);
  71. $glp_col-10: ($glp_col-1*10);
  72. $glp_col-11: ($glp_col-1*11);
  73. $glp_col-12: 100%;
  74.  
  75. $glp_col-5-12: (100%/5);
  76. $glp_col-7-12: (100%/7);
  77. $glp_col-8-12: (100%/8);
  78. $glp_col-9-12: (100%/9);
  79. $glp_col-10-12: (100%/10);
  80. $glp_col-11-12: (100%/11);
  81.  
  82. // Function to generate the grid by number
  83. @mixin makeGridByNumber($grid)
  84. {
  85. [class*="#{$grid}-1"] > .#{$gl-colName}, [class*="#{$grid}-1"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-12; max-width: $glp_col-12; }
  86. [class*="#{$grid}-2"] > .#{$gl-colName}, [class*="#{$grid}-2"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-6; max-width: $glp_col-6; }
  87. [class*="#{$grid}-3"] > .#{$gl-colName}, [class*="#{$grid}-3"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-4; max-width: $glp_col-4; }
  88. [class*="#{$grid}-4"] > .#{$gl-colName}, [class*="#{$grid}-4"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-3; max-width: $glp_col-3; }
  89. [class*="#{$grid}-5"] > .#{$gl-colName}, [class*="#{$grid}-5"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-5-12; max-width: $glp_col-5-12; }
  90. [class*="#{$grid}-6"] > .#{$gl-colName}, [class*="#{$grid}-6"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-2; max-width: $glp_col-2; }
  91. [class*="#{$grid}-7"] > .#{$gl-colName}, [class*="#{$grid}-7"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-7-12; max-width: $glp_col-7-12; }
  92. [class*="#{$grid}-8"] > .#{$gl-colName}, [class*="#{$grid}-8"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-8-12; max-width: $glp_col-8-12; }
  93. [class*="#{$grid}-9"] > .#{$gl-colName}, [class*="#{$grid}-9"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-9-12; max-width: $glp_col-9-12; }
  94. [class*="#{$grid}-10"] > .#{$gl-colName}, [class*="#{$grid}-10"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-10-12; max-width: $glp_col-10-12; }
  95. [class*="#{$grid}-11"] > .#{$gl-colName}, [class*="#{$grid}-11"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-11-12; max-width: $glp_col-11-12; }
  96. [class*="#{$grid}-12"] > .#{$gl-colName}, [class*="#{$grid}-12"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-1; max-width: $glp_col-1; }
  97. }
  98.  
  99. // Function to generate the grid by columns
  100. @mixin makeCol($col)
  101. {
  102. [class*='#{$gl-gridName}'] {
  103. > [class*="#{$col}-1"]{ flex-basis: $glp_col-1;max-width: $glp_col-1; }
  104. > [class*="#{$col}-2"]{ flex-basis: $glp_col-2;max-width: $glp_col-2; }
  105. > [class*="#{$col}-3"]{ flex-basis: $glp_col-3;max-width: $glp_col-3; }
  106. > [class*="#{$col}-4"]{ flex-basis: $glp_col-4;max-width: $glp_col-4;}
  107. > [class*="#{$col}-5"]{ flex-basis: $glp_col-5;max-width: $glp_col-5;}
  108. > [class*="#{$col}-6"]{ flex-basis: $glp_col-6;max-width: $glp_col-6;}
  109. > [class*="#{$col}-7"]{ flex-basis: $glp_col-7;max-width: $glp_col-7;}
  110. > [class*="#{$col}-8"]{ flex-basis: $glp_col-8;max-width: $glp_col-8;}
  111. > [class*="#{$col}-9"]{ flex-basis: $glp_col-9;max-width: $glp_col-9;}
  112. > [class*="#{$col}-10"]{ flex-basis: $glp_col-10;max-width: $glp_col-10;}
  113. > [class*="#{$col}-11"]{ flex-basis: $glp_col-11;max-width: $glp_col-11;}
  114. > [class*="#{$col}-12"]{ flex-basis: $glp_col-12;max-width: $glp_col-12;}
  115. }
  116. }
  117.  
  118. // Function to generate the offset
  119. @mixin makeOff($off)
  120. {
  121. [class*="#{$gl-gridName}"]{
  122. > [data-left*="#{$off}-0"]{ margin-left: 0; }
  123. > [data-left*="#{$off}-1"]{ margin-left: $glp_col-1; }
  124. > [data-left*="#{$off}-2"]{ margin-left: $glp_col-2; }
  125. > [data-left*="#{$off}-3"]{ margin-left: $glp_col-3; }
  126. > [data-left*="#{$off}-4"]{ margin-left: $glp_col-4; }
  127. > [data-left*="#{$off}-5"]{ margin-left: $glp_col-5; }
  128. > [data-left*="#{$off}-6"]{ margin-left: $glp_col-6; }
  129. > [data-left*="#{$off}-7"]{ margin-left: $glp_col-7; }
  130. > [data-left*="#{$off}-8"]{ margin-left: $glp_col-8; }
  131. > [data-left*="#{$off}-9"]{ margin-left: $glp_col-9; }
  132. > [data-left*="#{$off}-10"]{ margin-left: $glp_col-10; }
  133. > [data-left*="#{$off}-11"]{ margin-left: $glp_col-11; }
  134.  
  135. > [data-right*="#{$off}-0"]{ margin-right: 0; }
  136. > [data-right*="#{$off}-1"]{ margin-right: $glp_col-1; }
  137. > [data-right*="#{$off}-2"]{ margin-right: $glp_col-2; }
  138. > [data-right*="#{$off}-3"]{ margin-right: $glp_col-3; }
  139. > [data-right*="#{$off}-4"]{ margin-right: $glp_col-4; }
  140. > [data-right*="#{$off}-5"]{ margin-right: $glp_col-5; }
  141. > [data-right*="#{$off}-6"]{ margin-right: $glp_col-6; }
  142. > [data-right*="#{$off}-7"]{ margin-right: $glp_col-7; }
  143. > [data-right*="#{$off}-8"]{ margin-right: $glp_col-8; }
  144. > [data-right*="#{$off}-9"]{ margin-right: $glp_col-9; }
  145. > [data-right*="#{$off}-10"]{ margin-right: $glp_col-10; }
  146. > [data-right*="#{$off}-11"]{ margin-right: $glp_col-11; }
  147. }
  148. }
  149.  
  150. [class*="#{$gl-gridName}"] {
  151. box-sizing: border-box;
  152. display: flex;
  153. flex-flow: row wrap;
  154. margin: 0 (-$gl-gutter/2);
  155. }
  156. .#{$gl-gridName} > .#{$gl-colName},
  157. [class*="#{$gl-gridName}"] > [class*="#{$gl-colName}-"],
  158. .#{$gl-gridName}.#{$gl-colName},
  159. [class*="#{$gl-gridName}"][class*="#{$gl-colName}-"] {
  160. box-sizing: border-box;
  161. flex: 0 0 auto;
  162. padding: 0 ($gl-gutter/2) $gl-col-bottom;
  163. width: 100%;
  164. position: relative;
  165. }
  166.  
  167. .#{$gl-colName},
  168. .#{$gl-gridName} > .#{$gl-colName},
  169. .#{$gl-gridName}.#{$gl-colName} {
  170. flex: 1 1 0%;
  171. }
  172.  
  173. [class*="#{$gl-gridName}"].#{$gl-colName},
  174. [class*="#{$gl-gridName}"][class*="#{$gl-colName}-"],
  175. [class="#{$gl-colName}"] > [class*="#{$gl-colName}"],
  176. [class*="#{$gl-colName}-"] > [class*="#{$gl-colName}"]{
  177. margin: 0;
  178. padding: 0;
  179. }
  180.  
  181. /************************
  182. HELPERS SUFFIXES
  183. *************************/
  184. // FOR GRID
  185. [class*="#{$gl-gridName}-"] {
  186. // No spacing between cols : noGutter
  187. > [class*="#{$gl-colName}"]{
  188. padding: 0;
  189. }
  190. // Equal heights columns
  191. &[class*="-equalHeight"] > [class*="#{$gl-colName}"]{
  192. display: flex;
  193. }
  194. // Removes the padding-bottom
  195. &[class*="-noBottom"] > [class*="#{$gl-colName}"]{
  196. padding-bottom: 0;
  197. }
  198. // No Wrapping
  199. &[class*="-noWrap"]{
  200. flex-wrap: nowrap;
  201. }
  202. }
  203.  
  204. [class*="flex-"] {
  205. &[class*="-equalHeight"] {
  206. display: flex;
  207. }
  208. }
  209.  
  210. [class*="flex-flex"] {
  211. box-sizing: border-box;
  212. display: flex;
  213. }
  214.  
  215. [class*="flex-children"] > * {
  216. width: 100%;
  217. }
  218.  
  219. [class*="#{$gl-gridName}-"],
  220. [class*="flex-"] {
  221. &[class*="-noGutter"]{
  222. margin: 0;
  223. }
  224. // Horizontal alignment
  225. &[class*="-center"]{
  226. justify-content: center;
  227. }
  228. &[class*="-right"]{
  229. justify-content: flex-end;
  230. align-self: flex-end;
  231. margin-left: auto;
  232. }
  233. // Vertical alignment
  234. &[class*="-top"]{
  235. align-items: flex-start;
  236. }
  237. &[class*="-middle"]{
  238. align-items: center;
  239. }
  240. &[class*="-bottom"]{
  241. align-items: flex-end;
  242. }
  243.  
  244. // Orders
  245. &[class*="-reverse"]{
  246. flex-direction: row-reverse;
  247. }
  248. &[class*="-column"] {
  249. flex-direction: column;
  250. > [class*="#{$gl-colName}-"] {
  251. flex-basis: auto;
  252. }
  253. }
  254. &[class*="-column-reverse"]{
  255. flex-direction: column-reverse;
  256. }
  257.  
  258. // Spaces between and around cols
  259. &[class*="-spaceBetween"]{
  260. justify-content: space-between;
  261. }
  262. &[class*="-spaceAround"]{
  263. justify-content: space-around;
  264. }
  265. }
  266.  
  267. // FOR COL
  268. [class*="#{$gl-colName}-"]{
  269. &[class*="-top"]{
  270. align-self: flex-start;
  271. }
  272. &[class*="-middle"]{
  273. align-self: center;
  274. }
  275. &[class*="-bottom"]{
  276. align-self: flex-end;
  277. }
  278. &[class*="-first"]{
  279. order: -1;
  280. }
  281. &[class*="-last"]{
  282. order: 1;
  283. }
  284. }
  285.  
  286.  
  287. /********************************************
  288. Responsive Alignment and Hidden
  289. *********************************************/
  290. @mixin responsiveDisplay($breakpoints) {
  291. @each $breakpoint-name, $breakpoint-value in $breakpoints {
  292. @if($breakpoint-value == 0) {
  293. [class*="#{$gl-colName}-"]:not([class*="#{$gl-colName}-0"]) {
  294. display: block;
  295. }
  296. [class*="#{$gl-gridName}"][class*="#{$gl-colName}-"]:not([class*="#{$gl-colName}-0"]) {
  297. display: flex;
  298. }
  299. [class*="#{$gl-colName}-0"] {
  300. display: none;
  301. }
  302. @content
  303. }
  304. @else {
  305. @media screen and (min-width: $breakpoint-value) {
  306. [class*="#{$gl-colName}-"]:not([class*="_#{$breakpoint-name}-0"]) {
  307. display: block;
  308. }
  309. [class*="#{$gl-gridName}"][class*="#{$gl-colName}-"]:not([class*="_#{$breakpoint-name}-0"]) {
  310. display: flex;
  311. }
  312. [class*="#{$gl-colName}-"][class*="_#{$breakpoint-name}-0"]{
  313. display: none;
  314. }
  315. @content
  316. }
  317. }
  318. }
  319. }
  320. @include responsiveDisplay($breakpoints);
  321.  
  322. /************************
  323. GRID BY NUMBER
  324. *************************/
  325. @include makeGridByNumber(#{$gl-gridName});
  326.  
  327. @media #{$gl-sm}{
  328. @include makeGridByNumber(_sm);
  329. }
  330. @media #{$gl-md}{
  331. @include makeGridByNumber(_md);
  332. }
  333. @media #{$gl-lg}{
  334. @include makeGridByNumber(_lg);
  335. }
  336. @media #{$gl-xl}{
  337. @include makeGridByNumber(_xl);
  338. }
  339.  
  340. /************************
  341. COLS SIZES
  342. *************************/
  343. @include makeCol(#{$gl-colName});
  344. @include makeOff(off);
  345.  
  346. @media #{$gl-sm}{
  347. @include makeCol(_sm);
  348. @include makeOff(_sm);
  349. }
  350. @media #{$gl-md}{
  351. @include makeCol(_md);
  352. @include makeOff(_md);
  353. }
  354. @media #{$gl-lg}{
  355. @include makeCol(_lg);
  356. @include makeOff(_lg);
  357. }
  358. @media #{$gl-xl}{
  359. @include makeCol(_xl);
  360. @include makeOff(_xl);
  361. }
  362.  
  363. /************************
  364. SPACING
  365. *************************/
  366. @mixin print-values-xs($prefixes, $breakpoint-name, $values) {
  367. @each $attr-short, $attr-long in $prefixes {
  368. @each $value in $values {
  369. .#{$attr-short}-#{$value} {
  370. @if(length($attr-long)) {
  371. @each $a in $attr-long {
  372. #{$a}: #{$value}px;
  373. }
  374. } @else {
  375. #{$attr-long}: #{$value}px;
  376. }
  377. }
  378. }
  379. }
  380. }
  381.  
  382. @mixin print-values($prefixes, $breakpoint-name, $values) {
  383. @each $attr-short, $attr-long in $prefixes {
  384. @each $value in $values {
  385. .#{$attr-short}-#{$breakpoint-name}-#{$value} {
  386. @if(length($attr-long)) {
  387. @each $a in $attr-long {
  388. #{$a}: #{$value}px;
  389. }
  390. } @else {
  391. #{$attr-long}: #{$value}px;
  392. }
  393. }
  394. }
  395. }
  396. }
  397.  
  398. // main function definition
  399. @mixin make-space($prefixes, $breakpoints, $values) {
  400. @each $breakpoint-name, $breakpoint-value in $breakpoints {
  401. // if xs value = 0, set it global without media queries
  402. @if($breakpoint-value == 0) {
  403. @include print-values-xs($prefixes, $breakpoint-name, $values);
  404. }
  405. // breakpoint values that not equal to 0
  406. @else {
  407. @media screen and (min-width: $breakpoint-value) {
  408. @include print-values($prefixes, $breakpoint-name, $values);
  409. }
  410. }
  411. }
  412. }
  413. @include make-space($space-prefixes, $breakpoints, $space-values );
  414.  
  415.  
  416.  
  417.  
  418.  
  419.  
  420.  
  421. [class*="align-l"] { text-align: left; }
  422. [class*="align-r"] { text-align: right; }
  423. [class*="align-c"] { text-align: center; }
  424. [class*="align-j"] { text-align: justify; }
  425.  
  426. [class*="float-l"] { float: left; }
  427. [class*="float-r"] { float: right; }
  428. [class*="float-n"] { float: none; }
  429.  
  430.  
  431. @media ( min-width: 576px ) {
  432. [class*="align-"][class*="_sm-align-l"] , [class*="mq_"][class*="_sm-align-l"] { text-align: left; }
  433. [class*="align-"][class*="_sm-align-r"] , [class*="mq_"][class*="_sm-align-r"] { text-align: right; }
  434. [class*="align-"][class*="_sm-align-c"] , [class*="mq_"][class*="_sm-align-c"] { text-align: center; }
  435. [class*="align-"][class*="_sm-align-j"], [class*="mq_"][class*="_sm-align-j"] { text-align: justify; }
  436.  
  437. [class*="align-"][class*="_sm-float-l"] , [class*="mq_"][class*="_sm-float-l"] { float: left; }
  438. [class*="align-"][class*="_sm-float-l"] , [class*="mq_"][class*="_sm-float-r"] { float: right; }
  439. [class*="align-"][class*="_sm-float-l"] , [class*="mq_"][class*="_sm-float-n"] { float: none; }
  440. }
  441.  
  442. @media ( min-width: 768px ) {
  443. [class*="align-"][class*="_md-align-l"] , [class*="mq_"][class*="_md-align-l"] { text-align: left; }
  444. [class*="align-"][class*="_md-align-r"] , [class*="mq_"][class*="_md-align-r"] { text-align: right; }
  445. [class*="align-"][class*="_md-align-c"] , [class*="mq_"][class*="_md-align-c"] { text-align: center; }
  446. [class*="align-"][class*="_md-align-j"] , [class*="mq_"][class*="_md-align-j"] { text-align: justify; }
  447.  
  448. [class*="align-"][class*="_md-align-l"] , [class*="mq_"][class*="_md-float-l"] { float: left; }
  449. [class*="align-"][class*="_md-align-r"] , [class*="mq_"][class*="_md-float-r"] { float: right; }
  450. [class*="align-"][class*="_md-align-n"] , [class*="mq_"][class*="_md-float-n"] { float: none; }
  451. }
  452.  
  453. @media ( min-width: 992px ) {
  454. [class*="align-"][class*="_lg-align-l"] , [class*="mq_"][class*="_lg-align-l"] { text-align: left; }
  455. [class*="align-"][class*="_lg-align-r"] , [class*="mq_"][class*="_lg-align-r"] { text-align: right; }
  456. [class*="align-"][class*="_lg-align-c"] , [class*="mq_"][class*="_lg-align-c"] { text-align: center; }
  457. [class*="align-"][class*="_lg-align-j"] , [class*="mq_"][class*="_lg-align-j"] { text-align: justify; }
  458.  
  459. [class*="align-"][class*="_lg-float-l"] , [class*="mq_"][class*="_lg-float-l"] { float: left; }
  460. [class*="align-"][class*="_lg-float-r"] , [class*="mq_"][class*="_lg-float-r"] { float: right; }
  461. [class*="align-"][class*="_lg-float-n"] , [class*="mq_"][class*="_lg-float-n"] { float: none; }
  462. }
  463.  
  464. @media ( min-width: 1200px ) {
  465. [class*="align-"][class*="_xl-align-l"] , [class*="mq_"][class*="_xl-align-l"] { text-align: left; }
  466. [class*="align-"][class*="_xl-align-r"] , [class*="mq_"][class*="_xl-align-r"] { text-align: right; }
  467. [class*="align-"][class*="_lg-align-c"] , [class*="mq_"][class*="_xl-align-c"] { text-align: center; }
  468. [class*="align-"][class*="_xl-align-j"] , [class*="mq_"][class*="_xl-align-j"] { text-align: justify; }
  469.  
  470. [class*="align-"][class*="_xl-float-l"] , [class*="mq_"][class*="_xl-float-l"] { float: left; }
  471. [class*="align-"][class*="_xl-float-r"] , [class*="mq_"][class*="_xl-float-r"] { float: right; }
  472. [class*="align-"][class*="_xl-float-n"] , [class*="mq_"][class*="_xl-float-n"] { float: none; }
  473. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!