working on it ...

Filters

Explore Public Snippets

Sort by

Found 5 snippets matching: %placeholder-selector

    public by JKCPR  3051  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);
    }

    external by Aaron Sherrill  183  0  2  0

    Sass Extend and Placeholder Selector Example

    Sass Extend and Placeholder Selector Example: sassextend.css
    // =========================
    // Example 1: using a @mixin
    // =========================
    
    // SCSS:
    
        @mixin a_pink_box() {
        	float: left;
        	display: block;
        	color: pink;
        	width: 100px;
        	height: 100px;
        }
    
        .valentinecard {
        	@include a_pink_box;
        }
    
        .other_pink_thing {
        	@include a_pink_box;
        	font-size: 2em;
        }
    
    =>
     
    // CSS:
    
        .valentinecard {float: left; display: block; color: pink; width: 100px; height: 100px}
        .other_pink_thing {float: left; display: block; color: pink; font-size: 2em; width: 100px; height: 100px}
    
    // Outcome? Unnecessary duplication
    
    // ========================
    // Example 2: using @extend
    // ========================
    
    // SCSS:
    
        .a_pink_box {
        	float: left;
        	display: block;
        	color: pink;
        }
    
        .valentinecard {
        	@extend .a_pink_box;
        }
    
        .other_pink_thing {
        	@extend .a_pink_box;
        	font-size: 2em;
        }
        
    =>
    
    // CSS:
    
        .a_pink_box, .valentinecard, .other_pink_thing {float: left; display: block; color: pink; width: 100px; height: 100px}
        .other_pink_thing {font-size: 2em}
    
    // Outcome? Better, but we don't need the class a_pink_box.' !
    
    
    // ========================
    // Example 3: using @extend and Placeholder Selectors
    // ========================
    
    // SCSS:
    
        %a_pink_box { //<-------- % replaced .
        	float: left;
        	display: block;
        	color: pink;
        }
    
        .valentinecard {
        	@extend %a_pink_box;
        }
    
        .other_pink_thing {
        	@extend %a_pink_box;
        	font-size: 2em;
        }
        
    =>
    
    // CSS:
    
        .valentinecard, .other_pink_thing {float: left; display: block; color: pink; width: 100px; height: 100px}
        .other_pink_thing {font-size: 2em}
    
    // No duplication!
    
    

    external by simplytoxa  381  0  3  0

    SCSS Clearfix using placeholder selector

    SCSS Clearfix using placeholder selector: .scss
    %clearfix {
    	&:after {
    		content: " ";
    		display: block;
    		clear: both;
    	}
    }
    
    

    external by paul-straetmans  17  0  1  0

    SCSS Placeholder selector

    SCSS Placeholder selector: placeholder-selector.scss
    %animal {
        position: relative;
        background: gray;
    }
    .cat {
        @extend %animal;
        color: white;
    }
    .dog {
        @extend %animal;
        color: black;
    }
    
    
    /* compiled CSS */
    .cat, .dog {
      position: relative;
      background: gray;
    }
    .cat {
      color: white;
    }
    .dog {
      color: black;
    }
    
    

    external by mcfarlan  6  0  1  0

    CSS: Placeholder selectors

    CSS: Placeholder selectors: placeholders.css
    CSS
    ::-webkit-input-placeholder,
    :-moz-placeholder,
    ::-moz-placeholder,
    :-ms-input-placeholder
    
    

    List Complete ( 5 snippets total )

    • Public Snippets
    • Channels Snippets