diff --git a/_sass/_coderay.scss b/_sass/_coderay.scss index f3f4329884..1547094c09 100644 --- a/_sass/_coderay.scss +++ b/_sass/_coderay.scss @@ -7,7 +7,7 @@ @include font(12); color: #d0d0d0; margin-bottom: 1.5em; - @include rounded(3px); + border-radius: 3px; } .CodeRay .code pre { diff --git a/_sass/_dl-menu.scss b/_sass/_dl-menu.scss index 5e5a2eb12a..5c2c523d41 100644 --- a/_sass/_dl-menu.scss +++ b/_sass/_dl-menu.scss @@ -35,12 +35,12 @@ position: relative; cursor: pointer; outline: none; - @include border-radius(0,3px,0,0); + border-radius: 0 0 3px 0; opacity: 0.6; box-shadow: 0 12px 24px rgba(#000,0.4); @media #{$medium} { - @include border-radius(3px,3px,3px,3px); + border-radius: 3px; } } @@ -159,7 +159,7 @@ z-index: inherit; @media #{$medium} { - @include border-radius(3px,3px,3px,3px); + border-radius: 3px; } } @@ -178,7 +178,7 @@ } .dl-submenu { - @include rounded(3px); + border-radius: 3px; box-shadow: 0 12px 24px rgba(#000,0.4); .btn { diff --git a/_sass/_elements.scss b/_sass/_elements.scss index 51b7534ec8..370a8d6ca6 100644 --- a/_sass/_elements.scss +++ b/_sass/_elements.scss @@ -29,14 +29,12 @@ figure { a { img { - @include translate(0, 0); - -webkit-transition-duration: 0.25s; - -moz-transition-duration: 0.25s; - -o-transition-duration: 0.25s; + transform: translate(0, 0); + transition-duration: 0.25s; &:hover { - @include translate(0, -5px); - @include box-shadow(0 0 10px fade($base-color, 20)); + transform: translate(0, -5px); + box-shadow: 0 0 10px rgba($base-color, 0.2); } } } @@ -92,7 +90,7 @@ svg:not(:root) { border-width: 2px !important; border-style: solid !important; border-color: $primary; - @include rounded(3px); + border-radius: 3px; &:visited { color: #fff; @@ -186,5 +184,5 @@ svg:not(:root) { .well { padding: 20px; border: 1px solid $comp-color; - @include rounded(4px); + border-radius: 4px; } \ No newline at end of file diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss index 87c9536ba6..01a8d16dbf 100644 --- a/_sass/_mixins.scss +++ b/_sass/_mixins.scss @@ -75,193 +75,9 @@ } /* - Gradients + Visibility ========================================================================== */ -@mixin horizontal($startColor : #fff, $endColor : $lightergrey) { - background-color: $endColor; - background-image : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ - background-image : -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+ - background-image : -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+ - background-image : -ms-linear-gradient(left, $startColor, $endColor); // IE10 - background-image : -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10 - background-image : linear-gradient(left, $startColor, $endColor); // W3C - background-repeat : repeat-x; -} - -@mixin vertical($startColor : #fff, $endColor: $lightergrey) { - background-image : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ - background-image : -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+ - background-color : $endColor; - background-image : -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+ - background-image : -ms-linear-gradient(top, $startColor, $endColor); // IE10 - background-image : -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10 - background-image : linear-gradient(top, $startColor, $endColor); // W3C - background-repeat : repeat-x; -} - -@mixin directional($startColor : #fff, $endColor : $lightergrey, $deg : 45deg) { - background-color : $endColor; - background-image : -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+ - background-image : -ms-linear-gradient($deg, $startColor, $endColor); // IE10 - background-image : -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+ - background-image : -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10 - background-image : linear-gradient($deg, $startColor, $endColor); // W3C - background-repeat : repeat-x; -} - -/* .bordered(COLOR, COLOR, COLOR, COLOR); */ -@mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) { - border-top : solid 1px $top-color; - border-left : solid 1px $left-color; - border-right : solid 1px $right-color; - border-bottom : solid 1px $bottom-color; -} - -/* - Rounded corners - ========================================================================== */ - -/* .rounded(VALUE); */ -@mixin rounded($radius:4px) { - -webkit-border-radius : $radius; - -moz-border-radius : $radius; - border-radius : $radius; -} - -/* .border-radius(VALUE,VALUE,VALUE,VALUE); */ -@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) { - -webkit-border-top-right-radius : $topright; - -webkit-border-bottom-right-radius : $bottomright; - -webkit-border-bottom-left-radius : $bottomleft; - -webkit-border-top-left-radius : $topleft; - -moz-border-radius-topright : $topright; - -moz-border-radius-bottomright : $bottomright; - -moz-border-radius-bottomleft : $bottomleft; - -moz-border-radius-topleft : $topleft; - border-top-right-radius : $topright; - border-bottom-right-radius : $bottomright; - border-bottom-left-radius : $bottomleft; - border-top-left-radius : $topleft; - -webkit-background-clip : padding-box; - -moz-background-clip : padding; - background-clip : padding-box; -} - -/* .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)); */ -@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) { - -webkit-box-shadow : $shadow; - -moz-box-shadow : $shadow; - box-shadow : $shadow; -} - -/* .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); */ -@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) { - -webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); - -moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); - box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); -} - -/* .text-shadow(); */ -@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) { - text-shadow : $shadow; -} - -/* - Transformations - ========================================================================== */ - -/* .rotate(VALUEdeg); */ -@mixin rotate($deg) { - -webkit-transform : rotate($deg); - -moz-transform : rotate($deg); - -ms-transform : rotate($deg); - -o-transform : rotate($deg); - transform : rotate($deg); -} - -/* .scale(VALUE); */ -@mixin scale($ratio) { - -webkit-transform : scale($ratio); - -moz-transform : scale($ratio); - -ms-transform : scale($ratio); - -o-transform : scale($ratio); - transform : scale($ratio); -} - -/* .skew(VALUE, VALUE); */ -@mixin skew($x: 0, $y: 0) { - -webkit-transform : skew($x, $y); - -moz-transform : skew($x, $y); - -ms-transform : skew($x, $y); - -o-transform : skew($x, $y); - transform : skew($x, $y); -} - -/* .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); */ -@mixin transition($transition) { - -webkit-transition : $transition; - -moz-transition : $transition; - -ms-transition : $transition; - -o-transition : $transition; - transition : $transition; -} - -/* .translate(VALUE, VALUE); */ -@mixin translate($x: 0, $y: 0) { - -webkit-transform : translate($x, $y); - -moz-transform : translate($x, $y); - -ms-transform : translate($x, $y); - -o-transform : translate($x, $y); - transform : translate($x, $y); -} - -@mixin translate3d($x: 0, $y: 0, $z: 0) { - -webkit-transform : translate($x, $y, $z); - -moz-transform : translate($x, $y, $z); - -ms-transform : translate($x, $y, $z); - -o-transform : translate($x, $y, $z); - transform : translate($x, $y, $z); -} - -@mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) { - -webkit-animation: $name $duration $delay $ease; - -moz-animation: $name $duration $delay $ease; - -ms-animation: $name $duration $delay $ease; -} - -/* - Background - ========================================================================== */ - -/* .background-alpha(VALUE VALUE); */ -@mixin background-alpha($color: #fff, $alpha: 1) { - background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); -} - -/* .background-size(VALUE VALUE); */ -@mixin background-size($size){ - -webkit-background-size : $size; - -moz-background-size : $size; - -o-background-size : $size; - background-size : $size; -} - -/* .background-clip(VALUE); (border-box, padding-box, content-box) */ -@mixin background-clip($clip) { - -webkit-background-clip : $clip; - -moz-background-clip : $clip; - background-clip : $clip; -} - -/* .box-sizing(VALUE); (border-box, padding-box, content-box) */ -@mixin box-sizing($boxsize: border-box) { - -webkit-box-sizing : $boxsize; - -moz-box-sizing : $boxsize; - -ms-box-sizing : $boxsize; - box-sizing : $boxsize; -} - /* For image replacement */ @mixin hide-text() { text-indent : 100%; @@ -284,20 +100,6 @@ visibility : hidden; } -/* .resize(VALUE) (none, both, horizontal, vertical, inherit) */ -@mixin resize($direction: both) { - resize : $direction; - overflow : auto; -} - -/* .userselect(VALUE) (all, element, none, text) */ -@mixin user-select($select) { - -webkit-user-select : $select; - -moz-user-select : $select; - -o-user-select : $select; - user-select : $select; -} - /* Hidden but available to speaking browsers */ @mixin visuallyhidden() { overflow : hidden; diff --git a/_sass/_page.scss b/_sass/_page.scss index 3406330f9f..c6885a6035 100644 --- a/_sass/_page.scss +++ b/_sass/_page.scss @@ -195,7 +195,7 @@ body { color: #fff; @include font-rem(12); text-align: right; - @include border-radius(3px,0,0,3px); + border-radius: 3px 0 0 0; z-index: 10; @media #{$medium} { @@ -236,7 +236,7 @@ body { display: inline-block; margin: 4px; color: #fff; - @include rounded(3px); + border-radius: 3px; background-color: lighten($base-color,50); span { @@ -246,7 +246,7 @@ body { .count { background-color: lighten($base-color,40); - @include border-radius(3px,3px,0,0); + border-radius: 0 3px 3px 0; } &:hover { @@ -275,7 +275,7 @@ header .entry-meta { padding: 10px 15px; background-color: #fff; box-shadow: 0 0 0 0, 0 6px 12px rgba(#000,0.1); - @include rounded(3px); + border-radius: 3px; @media #{$medium} { margin-left: 10px; @@ -299,7 +299,7 @@ header .entry-meta { padding: 10px 15px; background-color: #fff; box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba(#000,0.1); - @include rounded(3px); + border-radius: 3px; @media #{$medium} { margin-left: 10px; @@ -363,7 +363,7 @@ header .entry-meta { padding: 40px 15px 25px; background-color: #fff; box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba(#000,0.1); - @include rounded(3px); + border-radius: 3px; @media #{$medium} { margin: 50px 10px 20px 10px; @@ -472,7 +472,7 @@ header .entry-meta { article { background-color: #fff; box-shadow: 0 0 0 0, 0 6px 12px rgba($base-color,0.1); - @include rounded(3px); + border-radius: 3px; margin-bottom: 20px; padding: 25px 15px; @@ -508,7 +508,7 @@ header .entry-meta { } img { - @include border-radius(3px,0,0,3px); // round image corners + border-radius: 3px 3px 0 0; // round image corners } } @@ -584,7 +584,7 @@ header .entry-meta { border-width: 2px !important; border-style: solid !important; border-color: lighten($primary,50); - @include rounded(3px); + border-radius: 3px; } #goog-wm-sb { diff --git a/_sass/_reset.scss b/_sass/_reset.scss index bbd61d3615..3dff727ec0 100644 --- a/_sass/_reset.scss +++ b/_sass/_reset.scss @@ -143,7 +143,7 @@ input[type="checkbox"] { cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others. } input[type="search"] { // Appearance in Safari/Chrome - @include box-sizing(content-box); + box-sizing: content-box; -webkit-appearance: textfield; } input[type="search"]::-webkit-search-decoration, diff --git a/_sass/_site.scss b/_sass/_site.scss index f678fe35a2..a2f9069bec 100644 --- a/_sass/_site.scss +++ b/_sass/_site.scss @@ -76,5 +76,5 @@ ========================================================================== */ b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a { - @include transition(all 0.2s ease); + transition: all 0.2s ease; } \ No newline at end of file diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss index 34cb79de5d..2203e2402a 100644 --- a/_sass/_syntax.scss +++ b/_sass/_syntax.scss @@ -13,7 +13,7 @@ pre.highlight { color: #d0d0d0; border: 1px solid darken($body-color, 5); background-color: #272822; - @include rounded(3px); + border-radius: 3px; pre { position: relative; diff --git a/_sass/_typography.scss b/_sass/_typography.scss index 304e1008ee..e87443ea3e 100644 --- a/_sass/_typography.scss +++ b/_sass/_typography.scss @@ -82,7 +82,7 @@ figcaption { @include font-rem(14); background-color: $body-color; border: 1px solid darken($body-color,20); - @include rounded(3px); + border-radius: 3px; } /* @@ -119,7 +119,7 @@ li { padding: 0 5px; border: 1px solid lighten(#000, 90); background-color: lighten(#000, 95); - @include rounded(3px); + border-radius: 3px; } } @@ -137,6 +137,6 @@ pre { &::-webkit-scrollbar-thumb:horizontal { background-color: #6a6d5d; - @include rounded(4px); + border-radius: 4px; } } \ No newline at end of file