Skip to content

R
retain.css
Commit 7c0ba229 by zhengxiao
Options

feat: 新在样式兼容前缀适配

parent 572c5b23
Showing with 203 additions and 23 deletions
package.json
......@@ -15,8 +15,15 @@
"retain.min.css"
],
"browserslist": [
"> 3%",
"last 2 versions"
"ie >= 8",
"ie_mob >= 10",
"ff >= 26",
"chrome >= 30",
"safari >= 6",
"opera >= 23",
"ios >= 5",
"android >= 2.3",
"bb >= 10"
],
"dependencies": {
"cssnano": "^6.0.1",
......
retain.css
......@@ -49,7 +49,6 @@
content: '';
top: 0;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
......@@ -62,7 +61,6 @@
content: '';
top: 0;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
......@@ -71,20 +69,17 @@
pointer-events: none;
}
@media (-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
@media (min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
[retain~="border:top"]:before,
[retain~="border:bottom"]:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
[retain~="border:left"]:before,
[retain~="border:right"]:after {
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
......@@ -92,7 +87,6 @@
[retain~="round"]:after {
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
......@@ -104,28 +98,24 @@
[retain~="border:left"]:before,
[retain~="border"]:after,
[retain~="round"]:after {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
[retain~="border:bottom"]:after,
[retain~="border:right"]:after {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
}
@media (-webkit-device-pixel-ratio: 1.5) {
@media (device-pixel-ratio: 1.5) {
[retain~="border:top"]:before,
[retain~="border:bottom"]:after {
-webkit-transform: scaleY(0.6666);
transform: scaleY(0.6666);
}
[retain~="border:left"]:before,
[retain~="border:right"]:after {
-webkit-transform: scaleX(0.6666);
transform: scaleX(0.6666);
}
......@@ -133,7 +123,6 @@
[retain~="round"]:after {
width: 150%;
height: 150%;
-webkit-transform: scale(0.6666);
transform: scale(0.6666);
}
......@@ -142,17 +131,15 @@
}
}
@media (-webkit-device-pixel-ratio: 3) {
@media (device-pixel-ratio: 3) {
[retain~="border:top"]:before,
[retain~="border:bottom"]:after {
-webkit-transform: scaleY(0.3333);
transform: scaleY(0.3333);
}
[retain~="border:left"]:before,
[retain~="border:right"]:after {
-webkit-transform: scaleX(0.3333);
transform: scaleX(0.3333);
}
......@@ -160,7 +147,6 @@
[retain~="round"]:after {
width: 300%;
height: 300%;
-webkit-transform: scale(0.3333);
transform: scale(0.3333);
}
......
retain.min.css
@charset "UTF-8";
/*!
* retain.css
* Version - 1.0.4
* Version - 1.0.5
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
*
* Copyright (c) 2023 zhengxiao
*/[retain]{--retain-border-color:#d4d4d4;--retain-border-radius:40px;position:relative;position:relative!important}[retain~="border:bottom"]:after,[retain~="border:top"]:before{background:var(--retain-border-color);content:"";height:1px;left:0;pointer-events:none;position:absolute;right:0}[retain~="border:top"]:before{top:0}[retain~="border:bottom"]:after{bottom:0}[retain~="border:left"]:before,[retain~="border:right"]:after{background:var(--retain-border-color);bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:1px}[retain~="border:left"]:before{left:0}[retain~="border:right"]:after{right:0}[retain~=border]:after{border:1px solid var(--retain-border-color)}[retain~=border]:after,[retain~=round]:after{-webkit-box-sizing:border-box;box-sizing:border-box;content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}[retain~=round]:after{border:1px solid var(--retain-border-color);border-radius:var(--retain-border-radius)}@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5),(min-resolution:1.5dppx),(min-resolution:144dpi){[retain~="border:bottom"]:after,[retain~="border:top"]:before{-webkit-transform:scaleY(.5);transform:scaleY(.5)}[retain~="border:left"]:before,[retain~="border:right"]:after{-webkit-transform:scaleX(.5);transform:scaleX(.5)}[retain~=border]:after,[retain~=round]:after{height:200%;-webkit-transform:scale(.5);transform:scale(.5);width:200%}[retain~=round]:after{border-radius:calc(var(--retain-border-radius)*2)}[retain~="border:left"]:before,[retain~="border:top"]:before,[retain~=border]:after,[retain~=round]:after{-webkit-transform-origin:0 0;transform-origin:0 0}[retain~="border:bottom"]:after,[retain~="border:right"]:after{-webkit-transform-origin:100% 100%;transform-origin:100% 100%}}@media (-webkit-device-pixel-ratio:1.5){[retain~="border:bottom"]:after,[retain~="border:top"]:before{-webkit-transform:scaleY(.6666);transform:scaleY(.6666)}[retain~="border:left"]:before,[retain~="border:right"]:after{-webkit-transform:scaleX(.6666);transform:scaleX(.6666)}[retain~=border]:after,[retain~=round]:after{height:150%;-webkit-transform:scale(.6666);transform:scale(.6666);width:150%}[retain~=round]:after{border-radius:calc(var(--retain-border-radius)*1.5)}}@media (-webkit-device-pixel-ratio:3){[retain~="border:bottom"]:after,[retain~="border:top"]:before{-webkit-transform:scaleY(.3333);transform:scaleY(.3333)}[retain~="border:left"]:before,[retain~="border:right"]:after{-webkit-transform:scaleX(.3333);transform:scaleX(.3333)}[retain~=border]:after,[retain~=round]:after{height:300%;-webkit-transform:scale(.3333);transform:scale(.3333);width:300%}[retain~=round]:after{border-radius:calc(var(--retain-border-radius)*3)}}
\ No newline at end of file
*/
[retain] {
--retain-border-color: #d4d4d4;
--retain-border-radius: 40px;
position: relative;
position: relative !important;
-webkit-transition: all .3;
transition: all .3
}
[retain~="border:bottom"]:after,
[retain~="border:top"]:before {
background: var(--retain-border-color);
content: "";
height: 1px;
left: 0;
pointer-events: none;
position: absolute;
right: 0
}
[retain~="border:top"]:before {
top: 0
}
[retain~="border:bottom"]:after {
bottom: 0
}
[retain~="border:left"]:before,
[retain~="border:right"]:after {
background: var(--retain-border-color);
bottom: 0;
content: "";
pointer-events: none;
position: absolute;
top: 0;
width: 1px
}
[retain~="border:left"]:before {
left: 0
}
[retain~="border:right"]:after {
right: 0
}
[retain~=border]:after {
border: 1px solid var(--retain-border-color);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
content: "";
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%
}
[retain~=round]:after {
border: 1px solid var(--retain-border-color);
border-radius: var(--retain-border-radius);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
content: "";
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%
}
@media (-webkit-min-device-pixel-ratio:1.5),
(min-device-pixel-ratio:1.5),
(min-resolution:1.5dppx),
(min-resolution:144dpi) {
[retain~="border:bottom"]:after,
[retain~="border:top"]:before {
-webkit-transform: scaleY(.5);
-ms-transform: scaleY(.5);
transform: scaleY(.5)
}
[retain~="border:left"]:before,
[retain~="border:right"]:after {
-webkit-transform: scaleX(.5);
-ms-transform: scaleX(.5);
transform: scaleX(.5)
}
[retain~=border]:after,
[retain~=round]:after {
height: 200%;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
width: 200%
}
[retain~=round]:after {
border-radius: -webkit-calc(var(--retain-border-radius)*2);
border-radius: calc(var(--retain-border-radius)*2)
}
[retain~="border:left"]:before,
[retain~="border:top"]:before,
[retain~=border]:after,
[retain~=round]:after {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0
}
[retain~="border:bottom"]:after,
[retain~="border:right"]:after {
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%
}
}
@media (device-pixel-ratio:1.5) {
[retain~="border:bottom"]:after,
[retain~="border:top"]:before {
-webkit-transform: scaleY(.6666);
-ms-transform: scaleY(.6666);
transform: scaleY(.6666)
}
[retain~="border:left"]:before,
[retain~="border:right"]:after {
-webkit-transform: scaleX(.6666);
-ms-transform: scaleX(.6666);
transform: scaleX(.6666)
}
[retain~=border]:after,
[retain~=round]:after {
height: 150%;
-webkit-transform: scale(.6666);
-ms-transform: scale(.6666);
transform: scale(.6666);
width: 150%
}
[retain~=round]:after {
border-radius: -webkit-calc(var(--retain-border-radius)*1.5);
border-radius: calc(var(--retain-border-radius)*1.5)
}
}
@media (device-pixel-ratio:3) {
[retain~="border:bottom"]:after,
[retain~="border:top"]:before {
-webkit-transform: scaleY(.3333);
-ms-transform: scaleY(.3333);
transform: scaleY(.3333)
}
[retain~="border:left"]:before,
[retain~="border:right"]:after {
-webkit-transform: scaleX(.3333);
-ms-transform: scaleX(.3333);
transform: scaleX(.3333)
}
[retain~=border]:after,
[retain~=round]:after {
height: 300%;
-webkit-transform: scale(.3333);
-ms-transform: scale(.3333);
transform: scale(.3333);
width: 300%
}
[retain~=round]:after {
border-radius: -webkit-calc(var(--retain-border-radius)*3);
border-radius: calc(var(--retain-border-radius)*3)
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment