neocities/public/assets/css/_helper-sass/_mixins.scss

// ----------------------------------------------------------------
//		Vendor Prefix Mixins
// ----------------------------------------------------------------
// All Vendor Prefixes
@mixin vendor($property, $value...){
       -moz-#{$property}:$value;
        -ms-#{$property}:$value;
         -o-#{$property}:$value;
    -webkit-#{$property}:$value;
            #{$property}:$value;
}
            
// Just webkit & moz Prefixes
@mixin base-vendor($property, $value...){
      -moz-#{$property}:$value;
   -webkit-#{$property}:$value;
           #{$property}:$value;
}


// ----------------------------------------------------------------
//		Useful CSS3 Mixins
// ----------------------------------------------------------------
// Box Sizing
@mixin box-sizing($box-value){
	@include base-vendor(box-sizing, $box-value);	
}

// Border Radius
@mixin border-radius($br-value){
	@include base-vendor(border-radius, $br-value);
	background-clip:padding-box;
}

// Box Shadow   ---  See _var.scss to edit & create box-shadow rules
@mixin box-shadow($bs-value){
	@include base-vendor(box-shadow, $bs-value)
}

// Linear Gradient
@mixin linear-gradient($grad-Line, $grad-Colors...) {
  background: -webkit-linear-gradient($grad-Line, $grad-Colors);
  background:    -moz-linear-gradient($grad-Line, $grad-Colors);
  background:      -o-linear-gradient($grad-Line, $grad-Colors);
  background:         linear-gradient($grad-Line, $grad-Colors);
}
    //  grad-Line - use either ###deg or top, left, bottom, right
    //  example:
    //    @include linear-gradient(80deg, #fcc, #f23);
    //    @include linear-gradient(top, #fcc, #f23);

// Radial Gradient
@mixin radial-gradient($radial...) {
  background: -webkit-radial-gradient($radial);
  background:    -moz-radial-gradient($radial);
  background:      -o-radial-gradient($radial);
  background:         radial-gradient($radial);
}
	
	
// ----------------------------------------------------------------
//		Hidden Elements Mixins
// ----------------------------------------------------------------
// Hide text that you don't want visible
// like on submit buttons that use an icon instead of text
@mixin hide-text{
  color:transparent;
  font:0/0 a;
  text-shadow:none;
}

// Hide entire elements that you don't want visible
// but still need for accesibility / functionality 
// -- ie. radio buttons for custom styled radio inputs
@mixin invisible{
	border:0!important; height:1px!important; left:-999999px!important; overflow:hidden!important; position:absolute!important; width:1px!important;
}

// Truncate Text
@mixin truncate($truncation-boundary){
    max-width:$truncation-boundary;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
	// Example --  @include truncate(100%);


// ----------------------------------------------------------------
//		Clearfix
// ----------------------------------------------------------------
@mixin clearfix{
  *zoom:1;
  &:before, &:after{content:""; display:table}
  &:after{clear:both}
}


// ----------------------------------------------------------------
//		Hi-Res Retina Images
// 		https://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
// ----------------------------------------------------------------
@mixin image-2x($image, $width, $height){
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx){
    		    // on retina, use image that's scaled by 2
    		    background-image:url($image);
    		    background-size:$width $height;
    		 }
}


// ----------------------------------------------------------------
//		Responsive Row w/fixed width column -- use in combo with .row
// ----------------------------------------------------------------
@mixin row-fixed-Left($col-Size){
	padding-left:$col-Size;
	
	.f-Col{
		float:left;
		margin-left:-$col-Size + 20px;
		width:$col-Size - 20px;
	}
}

@mixin row-fixed-Right($col-Size){
	padding-right:$col-Size;
	
	.f-Col{
		float:right;
		margin-right:-$col-Size;
		width:$col-Size - 20px;
	}
}