kaixuanhuang / hui-button Goto Github PK

// This Responsive Typography demo is to show the simplier syntax
//
// It asks just for the min size and the max size
// h1 { @include responsive-type(22px, 38px); }
//
// Built of the back of the authors of:
// http://www.sassmeister.com/gist/7f22e44ace49b5124eec
// http://codepen.io/stowball/pen/JWoWWz?editors=0100

// As most min-width values will be 320px and the max value often will be the max-width of the container
// We set "smart" default values
$responsive-type-min-width: 320px !default;
$responsive-type-max-width: 700px !default;

// Base Responsive resize function that the type one uses
@mixin responsive-resize($properties, $min-vw, $max-vw, $min-value, $max-value) {
@each $property in $properties {
#{$property}: $min-value;
}

@media (min-width: $min-vw) {
@each $property in $properties {
#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
}
}

@media (min-width: $max-vw) {
@each $property in $properties {
#{$property}: $max-value;
}
}
}

// Type Focus helper mixin for the resize function
@mixin responsive-type($min-value, $max-value, $properties: font-size) {
// use the global default values based on the assumption these
// will be contained in a block
$min-vw: $responsive-type-min-width;
$max-vw: $responsive-type-max-width;

// check if value is using the "@" api syntax.
@if ( type-of($min-value) == "string") {
// So it is a string does it have a "@" symbol to break apart
@if ( str-index($min-value, '@') ) {
// split string helper
$min-value-list : split-str($min-value, '@');
// unquote the split and cast the string to a number
// http://hugogiraudel.com/2014/01/15/sass-string-to-number/
$min-value: to-number( unquote( nth($min-value-list, 1) ) );
$min-vw: to-number( unquote( nth($min-value-list, 2) ));
}
}

// run the same checks over the $max-value
@if ( type-of($max-value) == "string") {
// So it is a string does it have a "@" symbol to break apart
@if ( str-index($max-value, '@') ) {
$max-value-list : split-str($max-value, '@');
$max-value: to-number( unquote( nth($max-value-list, 1) ) );
$max-vw: to-number( unquote( nth($max-value-list, 2) ));
}
}

// feed the shorter api back to the responsice resizer
@include responsive-resize($properties, $min-vw, $max-vw, $min-value, $max-value);
}

/*
Single property.
with min and max passed.
*/
h1 {
@include responsive-type(22px, 38px);
}

/* An example of adding another property in such as line height */
h2 {
@include responsive-type(18px, 28px);
@include responsive-type(1.2, 1.05, line-height);
}

/* An example of the custom breakpoints for '@' redable syntax /
/ This is to avoid the map approach here: http://codepen.io/stowball/pen/JWoWWz */

h3 {
@include responsive-type('14px@400px', '50px@1900px');
@include responsive-type('1.2@400px', '1.05@1900px', line-height);
}

/* Multiple properties with same values with default */
div.box {
@include responsive-resize(width height, 20em, 70em, 5em, 10em);
margin: 1em auto;
}

// set up a familiar context.

article {
max-width: $responsive-type-max-width;
margin: 0 auto;
line-height: 1.5;
}

.box {
background-color: red;
}

pre {
@include responsive-type(10px, 16px);
border: 1px solid #95bdf2;;
border-radius: 4px;
margin-bottom: 1em;
padding: 0.66667em 1.86667em;
color: darken(#5193EA, 20%);
background-color: #d4e4fa;
overflow: scroll;
}

code {
color: darken(#5193EA, 20%);
background-color: #d4e4fa;
}

hr {
position: relative;
magin: 1em;
height: 2px;
border: none;
background: darken(#5193EA, 20%);

animation-duration: 3s;
animation-name: resizeMe;
animation-iteration-count: infinite;

&:before,
&:after{
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
position: absolute;
top: -11px;
}
&:before{
left: -2px;
border-width: 12px 20.8px 12px 0;
border-color: transparent darken(#5193EA, 20%) transparent transparent;
}
&:after{
right: -2px;
border-width: 12px 0 12px 20.8px;
border-color: transparent transparent transparent darken(#5193EA, 20%);

}
}

body {
padding: 20px;
}

@Keyframes resizeMe {
0% {
width: 100%;
}

50% {
width: 50%;
}

100% {
width: 100%;
}
}