Guest User

Untitled

a guest
Oct 21st, 2018
79
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.03 KB | None | 0 0
  1. // Overwrite the Twitter Bootsrap Grid with your custom sizes
  2.  
  3. // FIXED GRID
  4.  
  5. $grid_columns: 12 !default
  6. $grid_column_width: 60px !default
  7. $grid_gutter_width: 20px !default
  8.  
  9.  
  10. @function grid-width($n: $grid_columns, $column_width: $grid_column_width, $gutter_width: $grid_gutter_width)
  11. @return ($n * $column_width) + ($n - 1) * $gutter_width
  12.  
  13. @function grid-offset($n, $column_width: $grid_column_width, $gutter_width: $grid_gutter_width)
  14. @return ($n * $column_width) + ($n + 1) * $gutter_width
  15.  
  16.  
  17. @mixin reset-grid-fixed
  18. .row
  19. margin-left: $grid_gutter_width * -1
  20.  
  21. [class*="span"]
  22. margin-left: $grid_gutter_width
  23.  
  24. .container
  25. &,
  26. .navbar-fixed-top &,
  27. .navbar-fixed-bottom &
  28. width: grid-width()
  29.  
  30. @for $i from 1 through $grid_columns
  31. .span#{$i}
  32. width: grid-width($i)
  33.  
  34. @for $i from 1 through $grid_columns
  35. .offset#{$i}
  36. margin-left: grid-offset($i)
  37.  
  38.  
  39. // FLUID GRID
  40.  
  41. // $grid_fluid_column_width: 6.382978723% !default
  42. // $grid_fluid_gutter_width: 2.127659574% !default
  43.  
  44. $grid_fluid_column_width: percentage(($grid_column_width / grid-width())) !default
  45. $grid_fluid_gutter_width: percentage(($grid_gutter_width / grid-width())) !default
  46.  
  47. @function grid-star-offset()
  48. @return (.5 / (grid-width()/1px) * 100 * 1%)
  49.  
  50. @mixin reset-grid-fluid
  51.  
  52. .row-fluid
  53. & > [class*="span"]
  54. margin-left: $grid_fluid_gutter_width
  55. *margin-left: $grid_fluid_gutter_width - grid-star-offset()
  56.  
  57. &:first-child
  58. margin-left: 0
  59.  
  60. @for $i from 1 through $grid_columns
  61. & > .span#{$i}
  62. width: grid-width($i, $grid_fluid_column_width, $grid_fluid_gutter_width)
  63. *width: grid-width($i, $grid_fluid_column_width, $grid_fluid_gutter_width) - grid-star-offset()
  64.  
  65.  
  66. // Reset Grid
  67.  
  68. @mixin reset-grid
  69. +reset-grid-fixed
  70. +reset-grid-fluid
  71.  
  72. .container-fluid
  73. padding-left: $grid_gutter_width
  74. padding-right: $grid_gutter_width
  75.  
  76. .navbar
  77. .brand
  78. padding-left: $grid_gutter_width
  79. padding-right: $grid_gutter_width
  80. margin-left: $grid_gutter_width * -1
  81.  
  82.  
  83. +reset-grid
Add Comment
Please, Sign In to add comment