working on it ...

Filters

Explore Public Snippets

Sort by

Found 2,500 snippets matching: @mixin

    public by JKCPR  3044  5  5  1

    SCSS button power @mixin

    one $color variable generates all buttons by @mixin and color @functions also leverages %placeholders and %placeholder-selectors
    //core values
    $font-size:16;
    $primary: #0085B7;
    $success: adjust_hue($primary, 260);
    $warning: saturate(adjust_hue($primary, 188), 43);
    $alert: lighten(saturate(adjust_hue($primary, 162), 12), 1);
    
    // function
    @function em($target, $context:$font-size){
      @return ($target/$context) * 1em;
    }
    
    //!default values
    $button-colour: $primary !default;
    $button-text-color: white !default;
    $button-line-height: 32 !default;
    $button-border-radius: 3 !default;
    $button-padding: 30 !default;
    $button-font-size: 24 !default;
    $button-weight: bold !default;
    
    //the btn mixin
    @mixin default-button($color: $button-text-color,
      $line-height: $button-line-height,
      $radius: $button-border-radius,
      $padding: $button-padding,
      $font-size: $button-font-size,
      $weight: $button-weight){
      
      color: $color;
      line-height: em($line-height);
      border-radius: em($radius);
      padding: 0 em($padding);
      font-size: em($font-size);
      font-weight: $weight;
    }
    
    @mixin flat-button($color: $button-color){
      $highlight-color: lighten($color, 50%);
      $shadow-color: grayscale(transparentize($color, 0.1));
    
      background-color: $color;
      border: 1px solid darken($color, 10%);
      text-shadow: 0px 1px 1px darken($color, 20%);
      box-shadow: 0 em(2) em(6) 0 $shadow-color;
      &:hover{
        background-color: darken($color, 5%);
        text-shadow: 1px 1px 1px darken($highlight-color, 5%);
      }
    }
    
    //placeholder selector
    %default-button{
      @include default-button;
    }
    .primary{
      @extend %default-button;
      @include flat-button($primary);  
    }
    .success{
      @extend %default-button;
      @include flat-button($success);
    }
    .warning{
      @extend %default-button;
      @include flat-button($warning);
    }
    .alert{
      @extend %default-button;
      @include flat-button($alert);
    }

    public by JKCPR  2941  1  5  1

    Sass a:pseudo state @mixin

    =linx ($link, $visit, $hover, $active) 
      a 
        color: $link
        font-weight: bolder
        &:visited 
          color: $visit
        
        &:hover 
          color: $hover
        
        &:active 
          color: $active
    $a-tags: 'a, a:link, a:visited'
    $a-tags-hover: 'a:active, a:hover'
     
    #{$a-tags} #{$a-tags-hover} 
      text-decoration: none
      
    ul li
      +linx(#E4EAEA, #0cc, #c0c, #cc0)

    public by lbottaro  2722  4  6  4

    Using mixin in LESS with inheritance to reuse common style

    This simple LESS file shows how to use mixin. Mixin are used to group some CSS instructions in handy, reusable classes. You can embed all the properties of a class into another class by simply including the class name as one of its properties. Since the structure of the css classes is similar, I specify the mixin with also references to the i
    .contentRegion {
      margin: 5px;
      &-Side {
        @leftWidth: 500px;
        @leftMargin: 15px;
        @leftTotalWidth : @leftWidth + @leftMargin;
    
        &-left {
          float: left;
          width: @leftWidth;
          margin-right: @leftMargin;
          vertical-align: top;	        
        
          .mixinProperty()
          {
          	&-label{float: left;}
          	&-control{display: inline-block;}
          }
        
          &-one {  
            .mixinProperty;  
          }
        
          &-two {  
            .mixinProperty;  
          }
        
          &-three {  
            .mixinProperty;  
          }
        }
      }
    }
    
    <div class="contentRegion">
      <div class="contentRegion-Side-left">
          <div class="contentRegion-Side-left-one">
            <div class="contentRegion-Side-left-one-label">One</div>
            <div class="contentRegion-Side-left-one-control">123</div>
          </div>
          <div class="contentRegion-Side-left-two">
            <div class="contentRegion-Side-left-two-label">Two</div>
            <div class="contentRegion-Side-left-two-control">321</div>
          </div>
          <div class="contentRegion-Side-left-three">
            <div class="contentRegion-Side-left-three-label">Three</div>
            <div class="contentRegion-Side-left-three-control">345</div>
          </div>
      </div>
    </div>

    public by sTiLL-iLL @ SniPitz-KND  3093  1  7  19

    Promise-Defer..... then-bindsTo (100% working)

    highly performant async transmission agent. functional units are expressed with a declarative syntax. Just try and break this promise,
    // deferred execution!!!
    
    this.Promise = function () {
    		return {
    			status: 'pending',
    			error: null,
    			posCBKs: [],
    			negCBKs: [],
    			then: function (posCBK, negCBK) {
    				var defer = new Deferred();
    				posCBK = (!posCBK)? function(d){d = (d || true); return d;}:posCBK;
    				negCBK = (!negCBK)? function(d){d = (d || true); return d;}:negCBK;
    				this.posCBKs.push({
    					func: posCBK,
    					deferred: defer
    				});				
    				this.negCBKs.push({
    					func: negCBK,
    					deferred: defer
    				});
    				if (status === 'resolved') {
    					this.execAction({
    						func: posCBK,
    						deferred: defer
    					}, this.data);
    				}
    				else if (status === 'rejected') {
    					this.execAction({
    						func: negCBK,
    						deferred: defer
    					}, this.error);
    				}
    				return defer.promise;
    			},
    			execAction: function (callbackData, result) {
    				wdw.setTimeout(function () {
    					var res = callbackData.func(result);
    					if (res instanceof Promise) {
    						callbackData.deferred.bind(res);
    					}
    					else {
    						callbackData.deferred.resolve(res);
    					}
    				}, 0);
    			}
    		};
    	};
    	this.Deferred = function () {
    		return {
    			promise: new Promise(),
    			resolve: function (data) {
    				var pms = this.promise;
    				pms.data = data;
    				pms.status = 'resolved';
    				if (pms.posCBKs) {
    					pms.posCBKs.forEach(function (dta) {
    						pms.execAction(dta, data);
    					});
    				}
    			},
    			reject: function (err) {
    				var pms = this.promise;
    				pms.error = err;
    				pms.status = 'rejected';
    				if (pms.negCBks) {
    					pms.negCBKs.forEach(function (dta) {
    						pms.execAction(dta, err);
    					});
    				}
    			},
    			bind: function (promise) {
    				var slf = this;
    				promise.then(function (dta) {
    					slf.resolve(dta);
    				}, function (err) {
    					slf.reject(err);
    				});
    			}
    		};
    	};

    public by arkanoid  2048  1  6  4

    A useful LESS mixin to enable animated transition on a HTML element

    This simple less mixin enable animated transitions on all properties of a HTML element.
    .animate( @duration: 0.4s ) {
      -moz-transition-property: all;
      -o-transition-property: all;
      -webkit-transition-property: all;
      transition-property: all;
      -moz-transition-duration: @duration;
      -o-transition-duration: @duration;
      -webkit-transition-duration: @duration;
      transition-duration: @duration;
      -moz-transition-delay: 0.1s;
      -o-transition-delay: 0.1s;
      -webkit-transition-delay: 0.1s;
      transition-delay: 0.1s;
      -moz-transition-timing-function: ease-in-out;
      -o-transition-timing-function: ease-in-out;
      -webkit-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out;
    }

    public by hgonzalez  2595  0  3  1

    Custom scrollbar mixin

    Mixin to customize scrollbars Beware, this does not work in all browsers
    /// Mixin to customize scrollbars
    /// Beware, this does not work in all browsers
    /// @author Hugo Giraudel
    /// @param {Length} $size - Horizontal scrollbar's height and vertical scrollbar's width
    /// @param {Color} $foreground-color - Scrollbar's color
    /// @param {Color} $background-color [mix($foreground-color, white, 50%)] - Scrollbar's color
    /// @example scss - Scrollbar styling
    ///   @include scrollbars(.5em, slategray);
    @mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white,  50%)) {
      // For Google Chrome
      ::-webkit-scrollbar {
          width:  $size;
          height: $size;
      }
    
      ::-webkit-scrollbar-thumb {
          background: $foreground-color;
      }
    
      ::-webkit-scrollbar-track {
          background: $background-color;
      }
    
      // For Internet Explorer
      body {
        scrollbar-face-color: $foreground-color;
        scrollbar-track-color: $background-color;
      }
    }

    public by hgonzalez  1955  0  3  0

    Custom scrollbar mixin

    Mixin to customize scrollbars Beware, this does not work in all browsers
    /// Mixin to customize scrollbars
    /// Beware, this does not work in all browsers
    /// @author Hugo Giraudel
    /// @param {Length} $size - Horizontal scrollbar's height and vertical scrollbar's width
    /// @param {Color} $foreground-color - Scrollbar's color
    /// @param {Color} $background-color [mix($foreground-color, white, 50%)] - Scrollbar's color
    /// @example scss - Scrollbar styling
    ///   @include scrollbars(.5em, slategray);
    @mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white,  50%)) {
      // For Google Chrome
      ::-webkit-scrollbar {
          width:  $size;
          height: $size;
      }
    
      ::-webkit-scrollbar-thumb {
          background: $foreground-color;
      }
    
      ::-webkit-scrollbar-track {
          background: $background-color;
      }
    
      // For Internet Explorer
      body {
        scrollbar-face-color: $foreground-color;
        scrollbar-track-color: $background-color;
      }
    }

    external by Johnny Martin  65511  0  3  0

    Compass Sprite Generator Mixin

    Compass Sprite Generator Mixin: compass-sprite-background.scss
    $sprites: sprite-map("sprites/*.png", $spacing: 15px);
    $sprites2x: sprite-map("sprites2x/*.png", $spacing: 30px);
    
    
    @mixin sprite-background($name) {
      background-image: sprite-url($sprites);
      background-position: sprite-position($sprites, $name);
      background-repeat: no-repeat;
      display: block;
      height: image-height(sprite-file($sprites, $name));
      width: image-width(sprite-file($sprites, $name));
      @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
        // Workaround for https://gist.github.com/2140082
        @if (sprite-position($sprites, $name) != sprite-position($sprites2x, $name)) {
          $ypos: round(nth(sprite-position($sprites2x, $name), 2) / 2);
          background-position: 0 $ypos;
        }
        // Hard coded width of the normal sprite image. There must be a smarter way to do this.
        @include background-size($normal-sprite-width auto);
        background-image: sprite-url($sprites2x);
      }
    }
    
    

    external by djadriano  55187  0  3  0

    VW Mixins

    VW Mixins: vw.scss
    /*
    How to Use:
    @include vw((padding-top, padding-bottom), 40px);
    
    If needs rewrite some property, use:
    
    @include vw((padding-top, padding-bottom), 40px, $min-vw: mq('laptop'));
    */
    
    @mixin vw($property, $min-value, $max-value: $min-value, $min-vw: mq('mobile'), $max-vw: mq('tv')) {
      & {
        // If property is a list, loop the items and set the media queries
        @if( type-of( $property ) == 'list' ) {
          @each $item in $property {
            @include fluid-vw-mq($min-vw, $max-vw, $min-value, $max-value, $item);
          }
        }
    
        @if( type-of( $property ) == 'string' ) {
          @include fluid-vw-mq($min-vw, $max-vw, $min-value, $max-value, $property);
        }
      }
    }
    
    @mixin fluid-vw-mq( $min-vw, $max-vw, $min-value, $max-value, $property ) {
      @include min-screen($min-vw) {
        #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
      }
    
      @if( $max-value != $min-value ) {
        @include min-screen($max-vw) {
          #{$property}: $max-value;
        }
      }
    }
    
    

    external by chrisburnell  22  0  1  0

    SCSS @mixin for choosing a `font-family` and optional `font-display`

    SCSS @mixin for choosing a `font-family` and optional `font-display`: font-family()
    /// @type List
    $font-stack-primary: Georgia, serif !default;
    
    /// @type List
    $font-stack-secondary: Arial, sans-serif !default;
    
    /// @type List
    $font-stack-tertiary: Tahoma, sans-serif !default;
    
    /// @type Map
    /// @prop {String} key - Font Family name
    /// @prop {Number} value - Font Family value
    $font-families: (
        "primary":   $font-stack-primary,
        "secondary": $font-stack-secondary,
        "tertiary":  $font-stack-tertiary
    }
    
    
    ///
    /// Specify font-family and associated font-display
    ///
    /// @param {String} $family - Font Family value
    /// @param {String} $display - Font Display value
    ///
    /// @require {Variable} $font-families
    ///
    /// @example scss
    ///   @include font-family(primary);
    ///   // font-family: Georgia, serif;
    ///
    /// @example scss
    ///   @include font-family(secondary, swap);
    ///   // font-family: Arial, sans-serif;
    ///   // font-display: swap;
    ///
    /// @throw Error if no parameters are passed.
    ///
    @mixin font-family($family, $display) {
    
        @if( length($family) == 0 ) {
            @error "font-family() expects at least one parameter."
        }
    
        @if not map-has-key($font-families, $family) {
            @error "There is no font-family named `#{$family}` in $font-families. Font Family should be one of #{map-keys($font-families)}.";
        }
    
        font-family: map-get($font-families, $family);
    
        @if( length($display) != 0 ) {
            font-display: $display;
        }
    
    }
    
    
    • Public Snippets
    • Channels Snippets