mirror of
https://github.com/neocities/neocities.git
synced 2025-04-25 01:32:36 +02:00
138 lines
4.1 KiB
SCSS
138 lines
4.1 KiB
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;
|
|
}
|
|
}
|
|
|