@mixin
border-t-1px(
$color) {
position: relative ;
&:: before {
display: block ;
position: absolute ;
left: 0 ;
top: 0 ;
width: 100% ;
border-top: 1 px solid $color ;
content: ' ' ;
}
}
@mixin border-b-1px( $color) {
position: relative ;
&:: after {
display: block ;
position: absolute ;
left: 0 ;
bottom: 0 ;
width: 100% ;
border-top: 1 px solid $color ;
content: ' ' ;
}
position: relative ;
&:: before {
display: block ;
position: absolute ;
left: 0 ;
top: 0 ;
width: 100% ;
border-top: 1 px solid $color ;
content: ' ' ;
}
}
@mixin border-b-1px( $color) {
position: relative ;
&:: after {
display: block ;
position: absolute ;
left: 0 ;
bottom: 0 ;
width: 100% ;
border-top: 1 px solid $color ;
content: ' ' ;
}
}
@media(
-webkit-min-device-pixel-ratio:
1.5)
, (
min-device-pixel-ratio:
1.5) {
. border-t-1px {
&:: before {
-webkit-transform: scaleY( 0.7) ;
transform: scaleY( 0.7) ;
}
}
}
@media( -webkit-min-device-pixel-ratio: 2) , ( min-device-pixel-ratio: 2) {
. border-t-1px {
&:: before {
-webkit-transform: scaleY( 0.5) ;
transform: scaleY( 0.5) ;
}
}
}
@media( -webkit-min-device-pixel-ratio: 2.5) , ( min-device-pixel-ratio: 2.5) {
. border-t-1px {
&:: before {
-webkit-transform: scaleY( 0.33333334) ;
transform: scaleY( 0.33333334) ;
}
}
}
@media( -webkit-min-device-pixel-ratio: 1.5) , ( min-device-pixel-ratio: 1.5) {
. border-b-1px {
&:: after {
-webkit-transform: scaleY( 0.7) ;
transform: scaleY( 0.7) ;
}
}
}
@media( -webkit-min-device-pixel-ratio: 2) , ( min-device-pixel-ratio: 2) {
. border-b-1px {
&:: after {
-webkit-transform: scaleY( 0.5) ;
transform: scaleY( 0.5) ;
}
}
}
@media( -webkit-min-device-pixel-ratio: 2.5) , ( min-device-pixel-ratio: 2.5) {
. border-b-1px {
&:: after {
-webkit-transform: scaleY( 0.33333334) ;
transform: scaleY( 0.33333334) ;
}
}
}
. border-t-1px {
&:: before {
-webkit-transform: scaleY( 0.7) ;
transform: scaleY( 0.7) ;
}
}
}
@media( -webkit-min-device-pixel-ratio: 2) , ( min-device-pixel-ratio: 2) {
. border-t-1px {
&:: before {
-webkit-transform: scaleY( 0.5) ;
transform: scaleY( 0.5) ;
}
}
}
@media( -webkit-min-device-pixel-ratio: 2.5) , ( min-device-pixel-ratio: 2.5) {
. border-t-1px {
&:: before {
-webkit-transform: scaleY( 0.33333334) ;
transform: scaleY( 0.33333334) ;
}
}
}
@media( -webkit-min-device-pixel-ratio: 1.5) , ( min-device-pixel-ratio: 1.5) {
. border-b-1px {
&:: after {
-webkit-transform: scaleY( 0.7) ;
transform: scaleY( 0.7) ;
}
}
}
@media( -webkit-min-device-pixel-ratio: 2) , ( min-device-pixel-ratio: 2) {
. border-b-1px {
&:: after {
-webkit-transform: scaleY( 0.5) ;
transform: scaleY( 0.5) ;
}
}
}
@media( -webkit-min-device-pixel-ratio: 2.5) , ( min-device-pixel-ratio: 2.5) {
. border-b-1px {
&:: after {
-webkit-transform: scaleY( 0.33333334) ;
transform: scaleY( 0.33333334) ;
}
}
}