daily pastebin goal
13%
SHARE
TWEET

Untitled

a guest Mar 13th, 2018 53 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @mixin space($type:margin, $direction:all, $amount:'5px'){
  2.   @if $type == padding {
  3.     @if $direction == all{
  4.       padding: $amount;
  5.     } @else if $direction == top {
  6.       padding-top:$amount
  7.     } @else if $direction == left {
  8.       padding-left:$amount
  9.     } @else if $direction == right {
  10.       padding-right:$amount
  11.     } @else {
  12.       padding-bottom:$amount
  13.     }
  14.   } @else {
  15.     @if $direction == all{
  16.       margin: $amount;
  17.     } @else if $direction == top {
  18.       margin-top:$amount
  19.     } @else if $direction == left {
  20.       margin-left:$amount
  21.     } @else if $direction == right {
  22.       margin-right:$amount
  23.     } @else {
  24.       margin-bottom:$amount
  25.     }
  26.   }
  27. }
  28.  
  29. /**
  30.  *  Padding
  31.  */
  32. .has-space-p-5  {  @include space(padding, all, 5px ); }
  33. .has-space-p-10 { @include space(padding, all, 10px ); }
  34. .has-space-p-15 { @include space(padding, all, 15px ); }
  35. .has-space-p-20 { @include space(padding, all, 20px ); }
  36.  
  37. .has-space-p-top-5  { @include space(padding, top,  5px ); }
  38. .has-space-p-top-10 { @include space(padding, top, 10px ); }
  39. .has-space-p-top-15 { @include space(padding, top, 15px ); }
  40. .has-space-p-top-20 { @include space(padding, top, 20px ); }
  41.  
  42. .has-space-p-bottom-5  { @include space(padding, bottom,  5px ); }
  43. .has-space-p-bottom-10 { @include space(padding, bottom, 10px ); }
  44. .has-space-p-bottom-15 { @include space(padding, bottom, 15px ); }
  45. .has-space-p-bottom-20 { @include space(padding, bottom, 20px ); }
  46.  
  47. .has-space-p-left-5  { @include space(padding, left,  5px ); }
  48. .has-space-p-left-10 { @include space(padding, left, 10px ); }
  49. .has-space-p-left-15 { @include space(padding, left, 15px ); }
  50. .has-space-p-left-20 { @include space(padding, left, 20px ); }
  51.  
  52. .has-space-p-right-5  { @include space(padding, right,  5px ); }
  53. .has-space-p-right-10 { @include space(padding, right, 10px ); }
  54. .has-space-p-right-15 { @include space(padding, right, 15px ); }
  55. .has-space-p-right-20 { @include space(padding, right, 20px ); }
  56.  
  57.  
  58. /**
  59.  *  Margin
  60.  */
  61. .has-space-m-5  {  @include space(margin, all, 5px ); }
  62. .has-space-m-10 { @include space(margin, all, 10px ); }
  63. .has-space-m-15 { @include space(margin, all, 15px ); }
  64. .has-space-m-20 { @include space(margin, all, 20px ); }
  65.  
  66. .has-space-m-top-5  { @include space(margin, top,  5px ); }
  67. .has-space-m-top-10 { @include space(margin, top, 10px ); }
  68. .has-space-m-top-15 { @include space(margin, top, 15px ); }
  69. .has-space-m-top-20 { @include space(margin, top, 20px ); }
  70.  
  71. .has-space-m-bottom-5  { @include space(margin, bottom,  5px ); }
  72. .has-space-m-bottom-10 { @include space(margin, bottom, 10px ); }
  73. .has-space-m-bottom-15 { @include space(margin, bottom, 15px ); }
  74. .has-space-m-bottom-20 { @include space(margin, bottom, 20px ); }
  75.  
  76. .has-space-m-left-5   { @include space(margin, left,  5px ); }
  77. .has-space-m-left-10  { @include space(margin, left, 10px ); }
  78. .has-space-m-left-15  { @include space(margin, left, 15px ); }
  79. .has-space-m-left-20  { @include space(margin, left, 20px ); }
  80. .has-space-m-left-50  { @include space(margin, left, 50px ); }
  81. .has-space-m-left-80  { @include space(margin, left, 80px ); }
  82. .has-space-m-left-100 { @include space(margin, left, 100px ); }
  83.  
  84. .has-space-m-right-5   { @include space(margin, right,  5px ); }
  85. .has-space-m-right-10  { @include space(margin, right, 10px ); }
  86. .has-space-m-right-15  { @include space(margin, right, 15px ); }
  87. .has-space-m-right-20  { @include space(margin, right, 20px ); }
  88. .has-space-m-right-50  { @include space(margin, right, 50px ); }
  89. .has-space-m-right-80  { @include space(margin, right, 80px ); }
  90. .has-space-m-right-100 { @include space(margin, right, 100px ); }
RAW Paste Data
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
 
Top