Skip to content

Instantly share code, notes, and snippets.

@Troland

Troland/mixin.txt

Created June 28, 2018 16:01
Show Gist options
  • Save Troland/2e9842303781d1379056c12b68367286 to your computer and use it in GitHub Desktop.
Save Troland/2e9842303781d1379056c12b68367286 to your computer and use it in GitHub Desktop.
Download ZIP
mixins
Raw
mixin.txt
// Flexbox Mixins
// http://philipwalton.github.io/solved-by-flexbox/
// https://github.com/philipwalton/solved-by-flexbox
//
// Copyright (c) 2013 Brian Franco
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
// The above copyright notice and this permission notice shall be included
// in all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// This is a set of mixins for those who want to mess around with flexbox
// using the native support of current browsers. For full support table
// check: http://caniuse.com/flexbox
//
// Basically this will use:
//
// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
// * Final standards syntax (FF, Safari, Chrome, IE11, Opera)
//
// This was inspired by:
//
// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
//
// With help from:
//
// * http://w3.org/tr/css3-flexbox/
// * http://the-echoplex.net/flexyboxes/
// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
// * http://css-tricks.com/using-flexbox/
// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes
//----------------------------------------------------------------------
// Flexbox Containers
//
// The 'flex' value causes an element to generate a block-level flex
// container box.
//
// The 'inline-flex' value causes an element to generate a inline-level
// flex container box.
//
// display: flex | inline-flex
//
// http://w3.org/tr/css3-flexbox/#flex-containers
//
// (Placeholder selectors for each type, for those who rather @extend)
@mixin flexbox {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
%flexbox { @include flexbox; }
//----------------------------------
@mixin inline-flex {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
%inline-flex { @include inline-flex; }
//----------------------------------------------------------------------
// Flexbox Direction
//
// The 'flex-direction' property specifies how flex items are placed in
// the flex container, by setting the direction of the flex container's
// main axis. This determines the direction that flex items are laid out in.
//
// Values: row | row-reverse | column | column-reverse
// Default: row
//
// http://w3.org/tr/css3-flexbox/#flex-direction-property
@mixin flex-direction($value: row) {
@if $value == row-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
} @else if $value == column {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
} @else if $value == column-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
} @else {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
}
-webkit-flex-direction: $value;
-moz-flex-direction: $value;
-ms-flex-direction: $value;
flex-direction: $value;
}
// Shorter version:
@mixin flex-dir($args...) { @include flex-direction($args...); }
//----------------------------------------------------------------------
// Flexbox Wrap
//
// The 'flex-wrap' property controls whether the flex container is single-line
// or multi-line, and the direction of the cross-axis, which determines
// the direction new lines are stacked in.
//
// Values: nowrap | wrap | wrap-reverse
// Default: nowrap
//
// http://w3.org/tr/css3-flexbox/#flex-wrap-property
@mixin flex-wrap($value: nowrap) {
// No Webkit Box fallback.
-webkit-flex-wrap: $value;
-moz-flex-wrap: $value;
@if $value == nowrap {
-ms-flex-wrap: none;
} @else {
-ms-flex-wrap: $value;
}
flex-wrap: $value;
}
//----------------------------------------------------------------------
// Flexbox Flow (shorthand)
//
// The 'flex-flow' property is a shorthand for setting the 'flex-direction'
// and 'flex-wrap' properties, which together define the flex container's
// main and cross axes.
//
// Values: <flex-direction> | <flex-wrap>
// Default: row nowrap
//
// http://w3.org/tr/css3-flexbox/#flex-flow-property
@mixin flex-flow($values: (row nowrap)) {
// No Webkit Box fallback.
-webkit-flex-flow: $values;
-moz-flex-flow: $values;
-ms-flex-flow: $values;
flex-flow: $values;
}
//----------------------------------------------------------------------
// Flexbox Order
//
// The 'order' property controls the order in which flex items appear within
// their flex container, by assigning them to ordinal groups.
//
// Default: 0
//
// http://w3.org/tr/css3-flexbox/#order-property
@mixin order($int: 0) {
-webkit-box-ordinal-group: $int + 1;
-webkit-order: $int;
-moz-order: $int;
-ms-flex-order: $int;
order: $int;
}
//----------------------------------------------------------------------
// Flexbox Grow
//
// The 'flex-grow' property sets the flex grow factor. Negative numbers
// are invalid.
//
// Default: 0
//
// http://w3.org/tr/css3-flexbox/#flex-grow-property
@mixin flex-grow($int: 0) {
-webkit-box-flex: $int;
-webkit-flex-grow: $int;
-moz-flex-grow: $int;
-ms-flex-positive: $int;
flex-grow: $int;
}
//----------------------------------------------------------------------
// Flexbox Shrink
//
// The 'flex-shrink' property sets the flex shrink factor. Negative numbers
// are invalid.
//
// Default: 1
//
// http://w3.org/tr/css3-flexbox/#flex-shrink-property
@mixin flex-shrink($int: 1) {
-webkit-flex-shrink: $int;
-moz-flex-shrink: $int;
-ms-flex-negative: $int;
flex-shrink: $int;
}
//----------------------------------------------------------------------
// Flexbox Basis
//
// The 'flex-basis' property sets the flex basis. Negative lengths are invalid.
//
// Values: Like "width"
// Default: auto
//
// http://www.w3.org/TR/css3-flexbox/#flex-basis-property
@mixin flex-basis($value: auto) {
-webkit-flex-basis: $value;
-moz-flex-basis: $value;
-ms-flex-preferred-size: $value;
flex-basis: $value;
}
//----------------------------------------------------------------------
// Flexbox "Flex" (shorthand)
//
// The 'flex' property specifies the components of a flexible length: the
// flex grow factor and flex shrink factor, and the flex basis. When an
// element is a flex item, 'flex' is consulted instead of the main size
// property to determine the main size of the element. If an element is
// not a flex item, 'flex' has no effect.
//
// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
// Default: See individual properties (1 1 0).
//
// http://w3.org/tr/css3-flexbox/#flex-property
@mixin flex($fg: 1, $fs: null, $fb: null) {
// Set a variable to be used by box-flex properties
$fg-boxflex: $fg;
// Box-Flex only supports a flex-grow value so let's grab the
// first item in the list and just return that.
@if type-of($fg) == 'list' {
$fg-boxflex: nth($fg, 1);
}
-webkit-box-flex: $fg-boxflex;
-webkit-flex: $fg $fs $fb;
-moz-box-flex: $fg-boxflex;
-moz-flex: $fg $fs $fb;
-ms-flex: $fg $fs $fb;
flex: $fg $fs $fb;
}
//----------------------------------------------------------------------
// Flexbox Justify Content
//
// The 'justify-content' property aligns flex items along the main axis
// of the current line of the flex container. This is done after any flexible
// lengths and any auto margins have been resolved. Typically it helps distribute
// extra free space leftover when either all the flex items on a line are
// inflexible, or are flexible but have reached their maximum size. It also
// exerts some control over the alignment of items when they overflow the line.
//
// Note: 'space-*' values not supported in older syntaxes.
//
// Values: flex-start | flex-end | center | space-between | space-around
// Default: flex-start
//
// http://w3.org/tr/css3-flexbox/#justify-content-property
@mixin justify-content($value: flex-start) {
@if $value == flex-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
} @else if $value == flex-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
} @else if $value == space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
} @else if $value == space-around {
-ms-flex-pack: distribute;
} @else {
-webkit-box-pack: $value;
-ms-flex-pack: $value;
}
-webkit-justify-content: $value;
-moz-justify-content: $value;
justify-content: $value;
}
// Shorter version:
@mixin flex-just($args...) { @include justify-content($args...); }
//----------------------------------------------------------------------
// Flexbox Align Items
//
// Flex items can be aligned in the cross axis of the current line of the
// flex container, similar to 'justify-content' but in the perpendicular
// direction. 'align-items' sets the default alignment for all of the flex
// container's items, including anonymous flex items. 'align-self' allows
// this default alignment to be overridden for individual flex items. (For
// anonymous flex items, 'align-self' always matches the value of 'align-items'
// on their associated flex container.)
//
// Values: flex-start | flex-end | center | baseline | stretch
// Default: stretch
//
// http://w3.org/tr/css3-flexbox/#align-items-property
@mixin align-items($value: stretch) {
@if $value == flex-start {
-webkit-box-align: start;
-ms-flex-align: start;
} @else if $value == flex-end {
-webkit-box-align: end;
-ms-flex-align: end;
} @else {
-webkit-box-align: $value;
-ms-flex-align: $value;
}
-webkit-align-items: $value;
-moz-align-items: $value;
align-items: $value;
}
//----------------------------------
// Flexbox Align Self
//
// Values: auto | flex-start | flex-end | center | baseline | stretch
// Default: auto
@mixin align-self($value: auto) {
// No Webkit Box Fallback.
-webkit-align-self: $value;
-moz-align-self: $value;
@if $value == flex-start {
-ms-flex-item-align: start;
} @else if $value == flex-end {
-ms-flex-item-align: end;
} @else {
-ms-flex-item-align: $value;
}
align-self: $value;
}
//----------------------------------------------------------------------
// Flexbox Align Content
//
// The 'align-content' property aligns a flex container's lines within the
// flex container when there is extra space in the cross-axis, similar to
// how 'justify-content' aligns individual items within the main-axis. Note,
// this property has no effect when the flexbox has only a single line.
//
// Values: flex-start | flex-end | center | space-between | space-around | stretch
// Default: stretch
//
// http://w3.org/tr/css3-flexbox/#align-content-property
@mixin align-content($value: stretch) {
// No Webkit Box Fallback.
-webkit-align-content: $value;
-moz-align-content: $value;
@if $value == flex-start {
-ms-flex-line-pack: start;
} @else if $value == flex-end {
-ms-flex-line-pack: end;
} @else {
-ms-flex-line-pack: $value;
}
align-content: $value;
}
/**
* Set font color according the background
* source: http://thesassway.com/intermediate/dynamically-change-text-color-based-on-its-background-with-sass
* @param {String} $background - background color - format accepted: hsla, rgb, #
* @return {String} #color
*/
@function set-text-color($background) {
@if (lightness($background) > 50) {
@return #000; // Lighter backgorund, return dark color
} @else {
@return #fff; // Darker background, return light color
}
}
@mixin css3($property, $value) {
@each $prefix in ('', -moz-, -ms-, -o-, -webkit-) {
#{$prefix}#{$property}: $value;
}
}
@mixin breakpoint($point) {
@if $point == large{
@media (min-width: 64.375em) {
@content;
}
}
@else if $point == medium {
@media (min-width: 50em){
@content;
}
}
@else if $point == small {
@media (min-width: 37.5em){
@content;
}
}
}
@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;
}
}
@mixin clearfix() {
&:after,
&:before {
content: "";
display: table;
}
&:after {
clear: both;
}
*zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
@function black($opacity) {
@return rgba(0,0,0,$opacity)
}
@function white($opacity) {
@return rgba(255,255,255,$opacity)
}
/*
*inset and outside shadow
*/
@mixin box-emboss($opacity, $opacity2) {
box-shadow: white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;
}
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {
top: $top;
right: $right;
bottom: $bottom;
left: $left;
position: absolute;
}
@mixin line-height($heightValue: 12 ) {
line-height: $heightValue + px; //fallback for old browsers
line-height: (0.125 * $heightValue) + rem;
}
@mixin animated-caption($font-color, $bg-color, $bg-opacity, $padding, $transition-speed) {
display: inline-block;
position: relative;
overflow: hidden;
& img {
display: block;
width: 100%;
height: auto;
}
& span.outer {
display: block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: $padding;
color: $font-color;
position: absolute;
bottom: -100px;
-webkit-transition: bottom $transition-speed ease;
-moz-transition: bottom $transition-speed ease;
-o-transition: bottom $transition-speed ease;
-ms-transition: bottom $transition-speed ease;
transition: bottom $transition-speed ease;
& span.inner {
margin: 0;
position: relative;
}
&:before {
content: " ";
display: block;
position: absolute;
z-index: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: $bg-color;
filter: alpha(opactiy=($bg-opacity * 100));
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$bg-opacity * 100})";
-moz-opacity: $bg-opacity;
-khtml-opacity: $bg-opacity;
opacity: $bg-opacity;
}
}
&:hover span.outer {
bottom: 0;
}
}
/*
setting font-size
*/
@mixin font-dpr($font-size) {
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
/*
transform px to rem
*/
@mixin px2rem($property,$px-values,$baseline-px:75px,$support-for-ie:false) {
//Conver the baseline into rems
$baseline-rem: $baseline-px / 1rem * 1;
//Print the first line in pixel values
@if $support-for-ie {
#{$property}: $px-values;
}
//if there is only one (numeric) value, return the property/value line for it.
@if type-of($px-values) == "number" {
#{$property}: $px-values / $baseline-rem;
}
@else {
//Create an empty list that we can dump values into
$rem-values: ();
@each $value in $px-values {
// If the value is zero or not a number, return it
@if $value == 0 or type-of($value) != "number" {
$rem-values: append($rem-values, $value / $baseline-rem);
}
}
// Return the property and its list of converted values
#{$property}: $rem-values;
}
}
// image adaptive
//$spriteWidth 雪碧图的宽度px
//$spriteHeight 雪碧图的高度px
//$iconWidth 需要显示icon的宽度px
//$iconHeight 需要显示icon的高度px
//$iconX icon的原始x坐标
//$iconY icon的原始y坐标
//.sprite类的background-size必须设置
//示例html:
//<div class="test-sprites">
// <ul class="f-cb">
// <li class="icon1"></li>
// <li class="icon2"></li>
// <li class="icon3"></li>
// <li class="icon4"></li>
// <li class="icon5"></li>
// <li class="icon6"></li>
// </ul>
// </div>
// .test-sprites{
// margin-top: 30px;
//
// ul{
// padding: 0;
// margin: 0;
// }
//
// li{
// width: 0.48rem;
// height: 0.7rem;
// overflow: hidden;
// border: 1px solid #ccc;
// margin-left: 0.3rem;
// float: left;
// background:transparent url('http://nos.netease.com/edu-image/9BC0742AEB1A0B756EFC71B9DF77E452.png') 0 -0.02rem no-repeat;
// background-size: 10.72rem 4.42rem;
// }
//
// .icon2{
// width: 0.74rem;
// height: 0.64rem;
// background-position: -1.88rem -0.05rem;
// }
@mixin bgPosition($spriteWidth, $spriteHeight, $iconWidth, $iconHeight, $iconX, $iconY) {
background-position: (($iconX / ($spriteWidth - $iconWidth)) * 100% ($iconY / ($spriteHeight - $iconHeight)) * 100%);
}
//同一张sprite图，横图
@mixin bgPositionSameSprite($iconWidth, $iconHeight, $iconX, $iconY) {
$spriteWidth: 1072;
$spriteHeight: 442;
@include bgPosition($spriteWidth, $spriteHeight, $iconWidth, $iconHeight, $iconX, $iconY);
}
//同一张sprite图、竖图
@mixin bgPositionSameSprite-tow($iconWidth, $iconHeight, $iconX, $iconY) {
$spriteWidth: 300;
$spriteHeight: 1000;
@include bgPosition($spriteWidth, $spriteHeight, $iconWidth, $iconHeight, $iconX, $iconY);
}
//同一张sprite图并且每个icon的大小相同
@mixin bgPositionSameSpriteAndWidth($iconX, $iconY) {
$spriteWidth: 220;
$spriteHeight: 220;
$iconWidth: 61;
$iconHeight: 61;
@include bgPosition($spriteWidth, $spriteHeight, $iconWidth, $iconHeight, $iconX, $iconY); //www.zhihu.com/question/48436859/answer/111028001
}
/**
|private mySprite
|使用示例
.icon-1 {
@include sprite-t($icon-1)
}
*/
@mixin sprite-position-t($sprite) {
$spritesheet-w: nth($sprite, 7) - nth($sprite, 5);
$spritesheet-h: nth($sprite, 8) - nth($sprite, 6);
@if $spritesheet-w != 0px {
$sprite-offset-x-t: nth($sprite, 1) / $spritesheet-w * 100%;
}
@else {
$sprite-offset-x-t: nth($sprite, 3);
}
@if $spritesheet-h != 0px {
$sprite-offset-y-t: nth($sprite, 2) / $spritesheet-h * 100%;
}
@else {
$sprite-offset-y-t: nth($sprite,4);
}
background-position: $sprite-offset-x-t $sprite-offset-y-t;
}
@mixin sprite-size($sprite) {
background-size: nth($sprite, 7) nth($sprite, 8);
}
@mixin sprite-t($sprite) {
@include sprite-image($sprite);
@include sprite-position-t($sprite);
@include sprite-width($sprite);
@include sprite-height($sprite);
@include sprite-size($sprite);
}
@mixin mySprites($sprites) {
@each $sprite in $sprites{
$sprite-name: nth($sprite, 10);
.#{$sprite-name} {
@include sprite-t($sprite);
}
}
}
/*** Button mixins ***/
/**
* Generate button style
* @param {String} - $name - required
* @param {String} - $background - required - format accepted: hsla, rgb, #
* @param {Strong} - $color - optionnal - format accepted: hsla, rgb, #
* If no $color specify, the 'set-text-color' function is called
* go check the _function.scss
*/
@mixin generate-button($name, $background, $color: '') {
.button-#{$name} {
background: $background;
@if ($color == '') {
color: set-text-color($background);
}
@else {
color: $color;
}
&:hover {
background: lighten($background, 10%);
}
}
}
.v-flex {}
.h-flex {}
/*
* trangle
*/
@mixin trangle($size, $direction, $color) {
display: inline-block;
width: 0;
height: 0;
border: solid transparent;
border-width: $size;
@if $direction == top {
border-bottom-color: $color;
}
@else if $direction == right {
border-left-color: $color;
}
@else if $direction == bottom {
border-top-color: $color;
}
@else {
border-right-color: $color;
}
}
/*
android中在flexible中的1px适配有问题，当在安卓的时候就得写这个样式
用法直接在样式类中使用@include
*/
@mixin setTopLine($c: #C7C7C7, $pseudo: before) {
border-top: 1PX solid $c;
[data-dpr="1"] & {
border-top: none;
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
position: relative;
&:#{$pseudo} {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1PX;
border-top: 1PX solid $c;
transform-origin: 0 0;
transform: scaleY(0.5);
}
@media (min-resolution: 3dppx), (min-resolution: 288dpi) {
&:#{$pseudo} {
transform: scaleY(0.33);
}
}
}
}
}
@mixin setBottomLine($c: #C7C7C7, $pseudo: before) {
border-bottom: 1PX solid $c;
[data-dpr="1"] & {
border-bottom: none;
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
position: relative;
&:#{$pseudo} {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1PX;
border-bottom: 1PX solid $c;
transform-origin: 0 100%;
transform: scaleY(0.5);
}
@media (min-resolution: 3dppx), (min-resolution: 288dpi) {
&:#{$pseudo} {
transform: scaleY(0.33);
}
}
}
}
}
@mixin setLeftLine($c: #C7C7C7, $pseudo: before) {
border-left: 1PX solid $c;
[data-dpr="1"] & {
border-left: none;
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
position: relative;
&:#{$pseudo} {
content: " ";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1PX;
border-left: 1PX solid $c;
transform-origin: 0 0;
transform: scaleX(0.5);
}
@media (min-resolution: 3dppx), (min-resolution: 288dpi) {
&:#{$pseudo} {
transform: scaleX(0.33);
}
}
}
}
}
@mixin setRightLine($c: #C7C7C7, $pseudo: before) {
border-right: 1PX solid $c;
[data-dpr="1"] & {
border-right: none;
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
position: relative;
&:#{$pseudo} {
content: " ";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 1PX;
border-right: 1PX solid $c;
transform-origin: 100% 0;
transform: scaleX(0.5);
}
@media (min-resolution: 3dppx), (min-resolution: 288dpi) {
&:#{$pseudo} {
transform: scaleX(0.33);
}
}
}
}
}
@mixin setLine($c: #C7C7C7, $radius: 0, $pseudo: before) {
border: 1PX solid $c;
border-radius: $radius;
[data-dpr="1"] & {
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
position: relative;
border: none;
transform: translateZ(0);
&:#{$pseudo} {
content: '';
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
border: 1PX solid $c;
border-radius: $radius * 2;
transform-origin: 0 0;
transform: scale(0.5);
box-sizing: border-box;
pointer-events: none;
z-index: -1;
}
}
}
}
@mixin leftline-remove() {
border-left: 0;
&:before {
display: none !important;
}
}
@mixin rightline-remove() {
border-right: 0;
&:before {
display: none !important;
}
}
@mixin topline-remove() {
border-top: 0;
&:before {
display: none !important;
}
}
@mixin bottomline-remove() {
border-bottom: 0;
&:before {
display: none !important;
}
}
@mixin hairline($color: #C7C7C7, $direction: left, $radius: 0, $pseudo: before) {
@if $direction != 'all' {
border-#{$direction}: 1PX solid $color;
[data-dpr="1"] & {
border-#{$direction}: none;
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
position: relative;
&:#{$pseudo} {
content: " ";
position: absolute;
border-#{$direction}: 1PX solid $color;
@if $direction == 'top' {
left: 0;
top: 0;
right: 0;
height: 1PX;
transform-origin: 0 0;
transform: scaleY(0.5);
} @else if $direction == 'right' {
right: 0;
top: 0;
bottom: 0;
width: 1PX;
transform-origin: 100% 0;
transform: scaleX(0.5);
} @else if $direction == 'bottom' {
left: 0;
bottom: 0;
right: 0;
height: 1PX;
transform-origin: 0 100%;
transform: scaleY(0.5);
} @else {
left: 0;
top: 0;
bottom: 0;
width: 1PX;
transform-origin: 0 0;
transform: scaleX(0.5);
}
}
@media (min-resolution: 3dppx), (min-resolution: 288dpi) {
&:#{$pseudo} {
@if $direction == 'top' {
transform: scaleY(0.33);
} @else if $direction == 'right' {
transform: scaleX(0.33);
} @else if $direction == 'bottom' {
transform: scaleY(0.33);
} @else {
transform: scaleX(0.33);
}
}
}
}
}
} @else {
border: 1PX solid $color;
border-radius: $radius;
[data-dpr="1"] & {
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
position: relative;
border: none;
transform: translateZ(0);
&:#{$pseudo} {
content: '';
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
border: 1PX solid $color;
border-radius: $radius * 2;
transform-origin: 0 0;
transform: scale(0.5);
box-sizing: border-box;
pointer-events: none;
z-index: -1;
}
}
}
}
}
@mixin hairline-remove($direction: left) {
border-#{$direction}: 0;
&:before {
display: none !important;
}
}
/**
* 下拉框箭头
*/
@mixin setArrow($arrowsize, $borderColor, $borderWidth, $direction: top) {
@include _setArrow($arrowsize, $borderColor, $borderWidth);
@if $direction == 'top' {
transform: matrix(0.71,-0.71,0.71,0.71,0,0);
} @else if $direction == 'right' {
transform: matrix(0.71,0.71,-0.71,0.71,0,0);
} @else if $direction == 'bottom' {
transform: matrix(-0.71,0.71,-0.71,-0.71,0,0);
} @else {
transform: matrix(-0.71,-0.71,0.71,-0.71,0,0);
}
}
@mixin _setArrow($arrowsize, $borderColor, $borderWidth){
display: inline-block;
height: $arrowsize;
width: $arrowsize;
border-width: $borderWidth $borderWidth 0 0;
border-color: $borderColor;
border-style: solid;
}
// retina.scss
// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
// Submitted by Nathan Crank
// nathancrank.com
// Updated by Gabriel R. Sezefredo
// gabriel.sezefredo.com.br
// Updated by John Newman
// github.com/jgnewman
// http://axial.agency
/**
* Allows you to use retina images at various pixel densities.
* Examples:
*
* @include retina(/images/mypic.jpg, 2);
* @include retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent);
*
* @param {Value} $path The path to the file name minus extension.
* @param {Number} $cap: 2 The highest pixel density level images exist for.
* @param {Value} $size: auto auto The intended width of the rendered image.
* @param {Value} $extras: null Any other `background` values to be added.
*/
@mixin retina($path, $cap: 2, $size: auto auto, $extras: null) {
/*
* Set a counter and get the length of the image path.
*/
$position: -1;
$strpath: '#{$path}';
$length: str-length($strpath);
/*
* Loop ver the image path and figure out the
* position of the dot where the extension begins.
*/
@for $i from $length through $length - 10{
@if $position == -1 {
$char : str-slice($strpath, $i, $i);
@if str-index($char, ".") == 1 {
$position: $i;
}
}
}
/*
* If we were able to figure out where the extension is,
* slice the path into a base and an extension. Use that to
* calculate urls for different density environments. Set
* values for different environments.
*/
@if $position != -1 {
$ext: str-slice($strpath, $position + 1, $length);
$base: str-slice($strpath, 1, $position - 1);
$at1x_path: "#{$base}.#{$ext}";
$at2x_path: "#{$base}@2x.#{$ext}";
/*
* Set a base background for 1x environments.
*/
background: url("#{$at1x_path}") $extras;
background-size: $size;
/*
* Create an @2x-ish media query.
*/
@media all and (-webkit-min-device-pixel-ratio : 1.5),
all and (-o-min-device-pixel-ratio: 3/2),
all and (min--moz-device-pixel-ratio: 1.5),
all and (min-device-pixel-ratio: 1.5) {
background : url("#{$at2x_path}") $extras;
background-size : $size;
}
/*
* Create media queries for all environments that the user has
* provided images for.
*/
@if $cap >= 2 {
@for $env from 2 through $cap {
$suffix: "@#{$env}x";
@media (-webkit-min-device-pixel-ratio: $env),
(min-resolution: $env * 96dpi) {
background : url("#{$base}#{$suffix}.#{$ext}") $extras;
background-size : $size;
}
}
}
/*
* If anything went wrong trying to separate the file from its
* extension, set a background value without doing anything to it.
*/
} @else {
background: url("#{$path}") $extras;
background-size: $size;
}
}
@charset "UTF-8";
/**
* 通用栅格生成器makeGrid
* grid-column-width: 列宽
* grid-gutter-width: 列间距
* grid-offset: 行内边距
* $grid-name: 行名
* $grid-columns: 列数
*/
@mixin makeGrid($grid-column-width, $grid-gutter-width, $grid-offset, $grid-name:grid, $grid-columns:12) {
.#{$grid-name} {
box-sizing:content-box;
padding-left: $grid-offset;
padding-right: $grid-offset;
margin-left: 0 - $grid-gutter-width;
}
.#{$grid-name}:before,
.#{$grid-name}:after{
content: " ";
display: table;
}
.#{$grid-name}:after {
clear: both;
}
.#{$grid-name} [class^="col-"] {
margin-left: $grid-gutter-width;
float: left;
}
@include makeCommonGrid(1, $grid-column-width, $grid-gutter-width, $grid-columns, $grid-name);
}
@mixin makeCommonGrid($index, $grid-column-width, $grid-gutter-width, $grid-columns, $grid-name: grid) {
@while ($index < $grid-columns + 1) {
.#{$grid-name} .col-#{$index} {
width: $grid-column-width * $index + $grid-gutter-width * $index - $grid-gutter-width;
}
$index: $index + 1
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment