daily pastebin goal
4%
SHARE
TWEET

Untitled

a guest Jun 14th, 2018 47 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // ********************** //
  2. //    C O N T E N T S     //
  3. // ********************** //
  4.  
  5. //   1. MEDIA QUERIES
  6. //   2. FONT FACE
  7. //   3. FONT BOLD. - update depending how site font takes bold
  8. //   4. SELF CLEAR
  9. //   5. LETTER SPACING
  10. //   6. PLACEHOLDER
  11. //   7. DROP SHADOW
  12. //   8. OPACITY
  13. //   9. BORDER RADIUS
  14. //  10. TRANSFORM
  15. //  11. VERTICALLY AND/OR CENTRE ALIGNING ELEMENTS
  16. //  12. HIDE DEFAULT OVERFLOW SCROLL IN IE
  17. //  13. HIDE DEFAULT FORM ELEMENT STYLING
  18. //  14. FLEX
  19. //  15. LOADER
  20. //  16. MAGNIFYING GLASS
  21.  
  22.  
  23.  
  24. // ------------------------ //
  25. //     1. MEDIA QUERIES     //
  26. // ------------------------ //
  27. $tablet: 1200; //means up to 1200px
  28. $mobile: 600; // 361px - 600px
  29. $mobileSmall: 360; //0px - 360px
  30.  
  31. @mixin breakpoint($point) {
  32.     //desktop
  33.     @if $point == desktop{
  34.         @media (min-width: ($tablet+1)+px) { @content; }
  35.     }
  36.  
  37.     //tablet
  38.     @else if $point == tablet{
  39.         @media (min-width: ($mobile+1)+px) and (max-width: $tablet+px)  { @content; }
  40.     }
  41.  
  42.     //mobile
  43.     @else if $point == mobile{
  44.         @media (min-width: 0px) and (max-width: $mobile+px) { @content; }
  45.     }
  46.  
  47.     //mobile small
  48.     @else if $point == mobileSmall{
  49.         @media (min-width: 0px) and (max-width: $mobileSmall+px) { @content; }
  50.     }
  51. }
  52.  
  53. @mixin bp($min, $max){
  54.     @media (min-width: $min+px) and (max-width: $max+px) { @content; }
  55. }
  56.  
  57. @mixin bpmin($min){
  58.     @media (min-width: $min+px) { @content; }
  59. }
  60.  
  61. @mixin bpmax($max){
  62.     @media (max-width: $max+px) { @content; }
  63. }
  64.  
  65.  
  66.  
  67. // -------------------- //
  68. //     2. FONT FACE     //
  69. // -------------------- //
  70. @mixin font-face($style-name, $file, $family, $category:"") {
  71.     $filepath: "/fonts/" + $family + "/" + $file;
  72.     @font-face {
  73.         font-family: $style-name;
  74.         src: url($filepath + ".eot");
  75.         src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf")  format('truetype'), url($filepath + ".svg#" + $style-name + "") format('svg');
  76.     }
  77. }
  78.  
  79.  
  80.  
  81. // -------------------- //
  82. //     3. FONT BOLD     //
  83. // -------------------- //
  84. @mixin fontBold {
  85.     font-weight: 700;
  86. }
  87.  
  88.  
  89.  
  90. // --------------------- //
  91. //     4. SELF CLEAR     //
  92. // --------------------- //
  93. @mixin selfClear {
  94.     &:after{
  95.         clear: both;
  96.         content: "";
  97.         display: table;
  98.     }
  99. }
  100.  
  101.  
  102.  
  103. // ------------------------- //
  104. //     5. LETTER SPACING     //
  105. // ------------------------- //
  106. @function lSpace($photoshop, $fontsize){
  107.     @return (($photoshop * $fontsize) / 1000)  + px;
  108. }
  109.  
  110.  
  111.  
  112. // ---------------------- //
  113. //     6. PLACEHOLDER     //
  114. // ---------------------- //
  115. @mixin ph($color: #000, $fontSize: 14px, $lineHeight: 14px) {
  116.     input::-webkit-input-placeholder {
  117.         color: $color;
  118.         font-size: $fontSize;
  119.         line-height: $lineHeight;
  120.     }
  121.  
  122.     input:-moz-placeholder { /* Firefox 18- */
  123.         color: $color;
  124.         font-size: $fontSize;
  125.         line-height: $lineHeight;
  126.     }
  127.  
  128.     input::-moz-placeholder {  /* Firefox 19+ */
  129.         color: $color;
  130.         font-size: $fontSize;
  131.         line-height: $lineHeight;
  132.     }
  133.  
  134.     input:-ms-input-placeholder {
  135.         color: $color;
  136.         font-size: $fontSize;
  137.         line-height: $lineHeight;
  138.     }
  139. }
  140.  
  141.  
  142.  
  143. // ------------------ //
  144. //     7. OPACITY     //
  145. // ------------------ //
  146. @mixin opacity($opacity) {
  147.     opacity: $opacity;
  148.     $opacityIE: $opacity * 100;
  149.     filter: alpha(opacity=$opacityIE);
  150. }
  151.  
  152.  
  153.  
  154. // ---------------------- //
  155. //     8. DROP SHADOW     //
  156. // ---------------------- //
  157. @mixin dropShadow ($x: 1px, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) {
  158.     -webkit-box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
  159.     -moz-box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
  160.     box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
  161. }
  162.  
  163.  
  164.  
  165. // ------------------------ //
  166. //     9. BORDER RADIUS     //
  167. // ------------------------ //
  168. @mixin borderRadius ($x: 1px, $y: 1px, $z: 1px, $a: 1px) {
  169.     border-top-left-radius: $x;
  170.     border-top-right-radius: $y;
  171.     border-bottom-right-radius: $z;
  172.     border-bottom-left-radius: $a;
  173. }
  174.  
  175.  
  176.  
  177. // --------------------- //
  178. //     10. TRANSFORM     //
  179. // --------------------- //
  180. @mixin transform($transform...) {
  181.     -webkit-transform: $transform;
  182.     -ms-transform: $transform;
  183.     transform: $transform;
  184. }
  185.  
  186.  
  187.  
  188. // ------------------------------------------------------ //
  189. //     11. VERTICALLY AND/OR CENTRE ALIGNING ELEMENTS     //
  190. // ------------------------------------------------------ //
  191. @mixin verticalAlign {
  192.     position: relative;
  193.     top: 50%;
  194.     @include transform(translateY(-50%));
  195. }
  196.  
  197. @mixin centrePlaced {
  198.     position: absolute;
  199.     top: 50%;
  200.     left: 50%;
  201.     @include transform(translate(-50%, -50%));
  202. }
  203.  
  204.  
  205.  
  206.  
  207. // ---------------------------------------------- //
  208. //     12. HIDE DEFAULT OVERFLOW SCROLL IN IE     //
  209. // ---------------------------------------------- //
  210. @mixin overflowScroll {
  211.     -webkit-overflow-scrolling: touch;
  212.     -ms-overflow-style: none;
  213.     overflow: auto;
  214. }
  215.  
  216.  
  217.  
  218. // --------------------------------------------- //
  219. //     13. HIDE DEFAULT FORM ELEMENT STYLING     //
  220. // --------------------------------------------- //
  221. @mixin appearanceNone {
  222.     -webkit-appearance: none;
  223.     -moz-appearance: none;
  224.     appearance: none;
  225. }
  226.  
  227.  
  228.  
  229. // ---------------- //
  230. //     14. FLEX     //
  231. // ---------------- //
  232. @mixin flex($justify: space-between, $align: top) {
  233.     display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  234.     display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  235.     display: -ms-flexbox;      /* TWEENER - IE 10 */
  236.     display: -webkit-flex;     /* NEW - Chrome */
  237.     display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  238.  
  239.     -webkit-box-flex-direction: row;    /* OLD - iOS 6-, Safari 3.1-6 */
  240.     -moz-box-flex-direction: row;       /* OLD - Firefox 19- (buggy but mostly works) */
  241.     -ms-flex-direction: row;            /* TWEENER - IE 10 */
  242.     -webkit-flex-direction: row;        /* NEW - Chrome */
  243.     flex-direction: row;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
  244.  
  245.     -webkit-box-flex-wrap: wrap;     /* OLD - iOS 6-, Safari 3.1-6 */
  246.     -moz-box-flex-wrap: wrap;        /* OLD - Firefox 19- (buggy but mostly works) */
  247.     -ms-flex-flex-wrap: wrap;        /* TWEENER - IE 10 */
  248.     -webkit-flex-wrap: wrap;         /* NEW - Chrome */
  249.     flex-wrap: wrap;                 /* NEW, Spec - Opera 12.1, Firefox 20+ */
  250.  
  251.     -webkit-box-justify-content: $justify;    /* OLD - iOS 6-, Safari 3.1-6 */
  252.     -moz-box-justify-content: $justify;       /* OLD - Firefox 19- (buggy but mostly works) */
  253.     -ms-flex-justify-content: $justify;       /* TWEENER - IE 10 */
  254.     -webkit-justify-content: $justify;        /* NEW - Chrome */
  255.     justify-content: $justify;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
  256.  
  257.     -webkit-box-align-items: $align;    /* OLD - iOS 6-, Safari 3.1-6 */
  258.     -moz-box-align-items: $align;       /* OLD - Firefox 19- (buggy but mostly works) */
  259.     -ms-flex-align-items: $align;       /* TWEENER - IE 10 */
  260.     -webkit-align-items: $align;        /* NEW - Chrome */
  261.     align-items: $align;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
  262.  
  263.     &:after {
  264.         all: unset;
  265.     }
  266. }
  267.  
  268.  
  269.  
  270. // ------------------ //
  271. //     15. LOADER     //
  272. // ------------------ //
  273. //- You can use either .gif or this mixin.
  274. //- Use only one.
  275. @mixin loader($size, $thickness, $color1, $color2){
  276.     border: $thickness+px solid $color1;
  277.     border-top: $thickness+px solid $color2;
  278.     border-radius: 50%;
  279.     width: $size+px;
  280.     height: $size+px;
  281.     animation: spin 2s linear infinite;
  282. }
  283.  
  284. @keyframes spin {
  285.     0% { transform: rotate(0deg); }
  286.     100% { transform: rotate(360deg); }
  287. }
  288.  
  289.  
  290.  
  291. // -----------------------------//
  292. //     16. MAGNIFYING GLASS     //
  293. // -----------------------------//
  294. //- There is CSS version of this .magShortStalk
  295. //- Use only one.
  296.  
  297. @mixin magGlass($scale, $stalkLength, $color){
  298.     @include transform(scale(#{$scale}));
  299.     border-radius: 50%;
  300.     border: 2px #{$color} solid;
  301.     width: 20px;
  302.     height: 20px;
  303.     position: relative;
  304.     &:after {
  305.         @include transform(rotate(45deg));
  306.         background: $color;
  307.         position:absolute;
  308.         content: "";
  309.     }
  310.     @if $stalkLength == short {
  311.         &:after {
  312.             width: 7px;
  313.             height: 2px;
  314.             bottom:-1px;
  315.             right:-4px;
  316.         }
  317.     }
  318.     @if $stalkLength == long {
  319.         &:after {
  320.             width: 12px;
  321.             height: 2px;
  322.             bottom:-3px;
  323.             right:-8px;
  324.         }
  325.     }
  326. }
  327.  
  328.  
  329.  
  330. @mixin icons($fa-var, $fa-weight) {
  331.     &:after {
  332.         content: "#{$fa-var}";
  333.         display: inline-block;
  334.         font-style: normal;
  335.     }
  336.  
  337.     @if $fa-weight == light {
  338.         &:after {
  339.             font-family: 'Font Awesome 5 Pro';
  340.             font-weight: 300;
  341.         }
  342.     }
  343.  
  344.     @if $fa-weight == reg {
  345.         &:after {
  346.             font-family: 'Font Awesome 5 Pro';
  347.             font-weight: 400;
  348.         }
  349.     }
  350.  
  351.     @if $fa-weight == solid {
  352.         &:after {
  353.             font-family: 'Font Awesome 5 Pro';
  354.             font-weight: 900;
  355.         }
  356.     }
  357.  
  358.     @if $fa-weight == brand {
  359.         &:after {
  360.             font-family: 'Font Awesome 5 Brands';
  361.         }
  362.     }
  363. }
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