csslab - npm Package Compare versions

Comparing version 6.0.0 to 6.0.1

base.less

@@ -36,2 +36,19 @@ /*
 
+    // Number
+    .number(){
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+        font-variant-numeric: tabular-nums slashed-zero;
+        font-feature-settings: "tnum" 1, "zero" 1;
+    }
+
+    // Font-Face
+    // 注意传参时，name后接分号
+    .fontface(@name; @sources...) {
+        @font-face {
+            font-family: @name;
+            src: @sources;
+            font-display: swap;
+        }
+    }
+
     // Font color
@@ -57,3 +74,11 @@ .color(@color, @hovercolor: null) {
 
+    // Underline
+    .underline(@offset: 3px, @style: solid, @color: currentColor) {
+        text-decoration: underline;
+        text-decoration-color:@color;
+        text-decoration-style:@style;
+        text-underline-offset: @offset;
+    }
 
+
 /* Word -------------------------------------*/
@@ -93,2 +118,8 @@
 
+    // Special Write Mode
+    // 书写模式：牌匾从右至左水平单行排版效果
+    .retext(x){direction:rtl;unicode-bidi:bidi-override;}
+    // 书写模式：文笺从右至左、从上至下排版效果
+    .retext(y){writing-mode:vertical-rl;text-combine-upright: all;}
+
     // Text Indent
@@ -101,9 +132,2 @@ .indent(@indent:-200%){
 
-    // Special Write Mode
-    // 书写模式：牌匾从右至左水平单行排版效果
-    .retext(x){direction:rtl;unicode-bidi:bidi-override;}
-    // 书写模式：文笺从右至左、从上至下排版效果
-    .retext(y){writing-mode:vertical-rl;text-combine-upright: all;}
-
-
 /* Inline(-Block) Align -------------------------------------*/
@@ -128,2 +152,3 @@
     .size(@width,@height:@width){width:@width;height:@height;}
+    .ratio(@ratio){aspect-ratio:@ratio;}
 
@@ -145,3 +170,2 @@ .db(){display:block;}
     .grid(){display:grid;}
-    .grid(x,@count){display:grid;grid-template-columns: repeat(@count, 1fr);}
     .grid(@rows, @cols) {
@@ -152,3 +176,16 @@ display: grid;
     }
+    .grid(x, @count) {
+        display: grid;
 
+        // 无单位数字：固定列数
+        & when (isnumber(@count)) and (isunit(@count, "")) {
+            grid-template-columns: repeat(@count, 1fr);
+        }
+
+        // 带单位数值（px/%/rem/...）：auto-fill + minmax
+        & when (isnumber(@count)) and not (isunit(@count, "")) {
+            grid-template-columns: repeat(auto-fill, minmax(@count, 1fr));
+        }
+    }
+
     .ps(){position:static;}
@@ -165,7 +202,29 @@ .pr(){position:relative;}
 
-/* Other -------------------------------------*/
+/* UI -------------------------------------*/
 
     .pointer(){cursor:pointer;}
 
+    .noclick(){pointer-events:none;}
 
+    .scrollbar(@w:4px,@color:#fafafa,@thumb:#eee) {
+        &::-webkit-scrollbar {
+            width: @w;
+        }
+        &::-webkit-scrollbar-track,
+        &::-webkit-scrollbar-track-piece {
+            background-color: @color;
+            border-radius: @w + 2px;
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: @thumb;
+            border-radius: @w + 2px;
+        }
+        &::-webkit-scrollbar-button,
+        &::-webkit-scrollbar-corner,
+        &::-webkit-resizer {
+            display: none;
+        }
+    }
+
+
 /* IE余孽 -------------------------------------*/
@@ -172,0 +231,0 @@

package.json

 {
     "name": "csslab",
-    "version": "6.0.0",
+    "version": "6.0.1",
     "description": "用于快速进行页面重构的CSS函数库",
@@ -5,0 +5,0 @@ "keywords": ["css","less"],

reset.css

@@ -1,1 +0,267 @@
-@charset "utf-8";html{-webkit-overflow-scrolling:touch;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,th,td{margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,nav,menu,section,summary{display:block}hr{box-sizing:content-box;height:0;overflow:visible}iframe{border:none}blockquote,q{quotes:none}table{border-collapse:collapse;border-spacing:0}ul,ul li{margin:0;padding:0;list-style:none}dl,dd,dt{margin:0;padding:0}audio,video,canvas{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}img{border:none;-ms-interpolation-mode:bicubic;max-width:100%}svg:not(:root){overflow:hidden}template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects;text-decoration:none}a:active,a:hover{outline-width:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}b,strong{font-weight:normal}i,em{font-style:normal}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}input,button,select,textarea{outline:none;margin:0;padding:0;color:inherit}button{box-sizing:content-box;*line-height:normal}select{padding-right:0 !important}button[disabled],input[disabled]{cursor:default}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{display:table;max-width:100%;box-sizing:border-box;white-space:normal;color:inherit;padding:0}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[hidden]{display:none}
+@charset "utf-8";
+/*
+ * Reset.less
+ * Author: iRuxu
+ * Creat: 2014/08
+ * Update: 2026/1/2
+ * Description: reset browser style
+ * Manual: http://csslab.cc
+ * Reference: github.com/necolas/normalize.css
+ */
+/*-------------------------------------
+├   Document                           ┆
+└------------------------------------*/
+html {
+  -webkit-overflow-scrolling: touch;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+}
+body {
+  padding: 0;
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
+}
+* {
+  outline: none;
+}
+/*-------------------------------------
+├   Sections                           ┆
+└------------------------------------*/
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+blockquote,
+th,
+td {
+  margin: 0;
+  padding: 0;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+menu,
+section {
+  display: block;
+}
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+iframe {
+  border: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+ul,
+ul li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+dl,
+dd,
+dt {
+  margin: 0;
+  padding: 0;
+}
+/*-------------------------------------
+├   Embedded content                   ┆
+└------------------------------------*/
+audio,
+video,
+canvas {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+img {
+  border: none;
+  -ms-interpolation-mode: bicubic;
+  max-width: 100%;
+}
+svg:not(:root) {
+  overflow: hidden;
+}
+template {
+  display: none;
+}
+/*-------------------------------------
+├   Text                           	   ┆
+└------------------------------------*/
+a {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration: none;
+}
+a:active,
+a:hover {
+  outline-width: 0;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: normal;
+}
+b,
+strong {
+  font-weight: normal;
+}
+i,
+em {
+  font-style: normal;
+}
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+dfn {
+  font-style: italic;
+}
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+/*-------------------------------------
+├   Forms                  			   ┆
+└------------------------------------*/
+input,
+button,
+select,
+textarea {
+  outline: none;
+  margin: 0;
+  padding: 0;
+  color: inherit;
+}
+button {
+  box-sizing: content-box;
+  *line-height: normal;
+}
+select {
+  padding-right: 0 !important;
+}
+button[disabled],
+input[disabled] {
+  cursor: default;
+}
+button,
+input {
+  overflow: visible;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+legend {
+  display: table;
+  max-width: 100%;
+  box-sizing: border-box;
+  white-space: normal;
+  color: inherit;
+  padding: 0;
+}
+progress {
+  display: inline-block;
+  vertical-align: baseline;
+}
+textarea {
+  overflow: auto;
+}
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+[hidden] {
+  display: none;
+}

reset.less

@@ -5,3 +5,3 @@ /*
  * Creat: 2014/08
- * Update: 2018/03/22
+ * Update: 2026/1/2
  * Description: reset browser style
@@ -12,6 +12,4 @@ * Manual: http://csslab.cc
 
-
 @charset "utf-8";
 
-
 /*-------------------------------------
@@ -22,8 +20,19 @@ ├   Document                           ┆
 //Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
-html{
-	-webkit-overflow-scrolling:touch;
-	-ms-text-size-adjust: 100%;
-	-webkit-text-size-adjust: 100%;
+html {
+    -webkit-overflow-scrolling: touch;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
 }
 
+body {
+    padding: 0;
+    margin: 0;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
+}
+
+* {
+    outline: none;
+}
+
 /*-------------------------------------
@@ -34,44 +43,67 @@ ├   Sections                           ┆
 //Remove the margin in all browsers (opinionated).
-body,
-h1,h2,h3,h4,h5,h6,
-hr,p,blockquote,
-th,td{
-	margin:0;padding:0;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+blockquote,
+th,
+td {
+    margin: 0;
+    padding: 0;
 }
 
 //Add the correct display in IE 9-.
-article,aside,details,figcaption,figure,footer,header,hgroup,nav,menu,section{
-  display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+menu,
+section {
+    display: block;
 }
 
-hr{
-  box-sizing: content-box;height: 0; //Add the correct box sizing in Firefox.
-  overflow: visible;	//Show the overflow in Edge and IE.
+hr {
+    box-sizing: content-box;
+    height: 0; //Add the correct box sizing in Firefox.
+    overflow: visible; //Show the overflow in Edge and IE.
 }
 
 //Remove iframe content borders
-iframe{
-	border:none;
+iframe {
+    border: none;
 }
 
 //Remove quote style
-blockquote,q{
-	quotes:none;
+blockquote,
+q {
+    quotes: none;
 }
 
 //collapse table border
-table{
-	border-collapse:collapse;
-	border-spacing:0;
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
 }
 
 //Reset list style
-ul,ul li{
-	margin:0;
-	padding:0;
-	list-style:none;
+ul,
+ul li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
-dl,dd,dt{
-  margin:0;
-  padding: 0;
+dl,
+dd,
+dt {
+    margin: 0;
+    padding: 0;
 }
@@ -84,29 +116,31 @@
 //Add the correct display in IE 9-.
-audio,video,canvas{
-  display: inline-block;
-  *display:inline;
-  *zoom:1;
+audio,
+video,
+canvas {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
 }
 
 //Add the correct display in iOS 4-7.
-audio:not([controls]){
-  display: none;
-  height: 0;
+audio:not([controls]) {
+    display: none;
+    height: 0;
 }
 
 //Remove the border on images inside links in IE 10-.
-img{
-  border:none;
-  -ms-interpolation-mode:bicubic;
-  max-width:100%;
+img {
+    border: none;
+    -ms-interpolation-mode: bicubic;
+    max-width: 100%;
 }
 
 //Hide the overflow in IE.
-svg:not(:root){
-  overflow: hidden;
+svg:not(:root) {
+    overflow: hidden;
 }
 
 //Add the correct display in IE.
-template{
-  display: none;
+template {
+    display: none;
 }
@@ -118,52 +152,64 @@
 
-a{
-  background-color: transparent; //Remove the gray background on active links in IE 10
-  -webkit-text-decoration-skip: objects; //Remove gaps in links underline in iOS 8+ and Safari 8+.
-  text-decoration:none;	//Remove the underline effect.
+a {
+    background-color: transparent; //Remove the gray background on active links in IE 10
+    -webkit-text-decoration-skip: objects; //Remove gaps in links underline in iOS 8+ and Safari 8+.
+    text-decoration: none; //Remove the underline effect.
 }
 
 //Remove the outline on focused links when they are also active or hovered in all browsers (opinionated).
-a:active,a:hover{
-  outline-width:0;
+a:active,
+a:hover {
+    outline-width: 0;
 }
 
 //Remove the h1~h6 title style
-h1,h2,h3,h4,h5,h6{
-	font-size:100%;font-weight:normal;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: 100%;
+    font-weight: normal;
 }
 
 //Remove bold style.
-b,strong{
-	font-weight:normal;
+b,
+strong {
+    font-weight: normal;
 }
 
 //Remove italic style.
-i,em{
-	font-style:normal;
+i,
+em {
+    font-style: normal;
 }
 
-abbr[title]{
-  border-bottom: none; //Remove the bottom border in Firefox 39-.
-  text-decoration: underline;text-decoration: underline dotted; //Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+abbr[title] {
+    border-bottom: none; //Remove the bottom border in Firefox 39-.
+    text-decoration: underline;
+    text-decoration: underline dotted; //Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 }
 
-code,kbd,samp{
-  font-family: monospace, monospace; //Correct the inheritance and scaling of font size in all browsers.
-  font-size: 1em; //Correct the odd `em` font sizing in all browsers.
+code,
+kbd,
+samp {
+    font-family: monospace, monospace; //Correct the inheritance and scaling of font size in all browsers.
+    font-size: 1em; //Correct the odd `em` font sizing in all browsers.
 }
 
 //Add the correct font style in Android 4.3-.
-dfn{
-  font-style: italic;
+dfn {
+    font-style: italic;
 }
 
 //Add the correct background and color in IE 9-.
-mark{
-  background-color: #ff0;
-  color: #000;
+mark {
+    background-color: #ff0;
+    color: #000;
 }
 
 //Add the correct font size in all browsers.
-small{
-  font-size: 80%;
+small {
+    font-size: 80%;
 }
@@ -173,13 +219,13 @@
 sub,
-sup{
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
 }
-sub{
-  bottom: -0.25em;
+sub {
+    bottom: -0.25em;
 }
-sup{
-  top: -0.5em;
+sup {
+    top: -0.5em;
 }
@@ -190,31 +236,36 @@
 └------------------------------------*/
-input,button,select,textarea{
-  outline:none;//Remove webkit outline
-	margin: 0;//Remove the margin in Firefox and Safari.
-  padding: 0;//Remove the padding in different browser.
-	color:inherit;
+input,
+button,
+select,
+textarea {
+    outline: none; //Remove webkit outline
+    margin: 0; //Remove the margin in Firefox and Safari.
+    padding: 0; //Remove the padding in different browser.
+    color: inherit;
 }
 
-button{
-  box-sizing:content-box; //ie6~8
-  *line-height:normal;  //ie7 text position
+button {
+    box-sizing: content-box; //ie6~8
+    *line-height: normal; //ie7 text position
 }
 
-select{
-  padding-right:0 !important; //ie arrow
+select {
+    padding-right: 0 !important; //ie arrow
 }
 
-
-button[disabled],input[disabled]{
-	cursor: default;
+button[disabled],
+input[disabled] {
+    cursor: default;
 }
 
 button,//Show the overflow in IE.
-input{//Show the overflow in Edge.
-  overflow: visible;
+input {
+    //Show the overflow in Edge.
+    overflow: visible;
 }
 
 button,//Remove the inheritance of text transform in Edge, Firefox, and IE.
-select{//Remove the inheritance of text transform in Firefox.
-  text-transform: none;
+select {
+    //Remove the inheritance of text transform in Firefox.
+    text-transform: none;
 }
@@ -226,3 +277,3 @@
 [type="submit"] {
-  -webkit-appearance: button; //Correct the inability to style clickable types in iOS and Safari.
+    -webkit-appearance: button; //Correct the inability to style clickable types in iOS and Safari.
 }
@@ -235,4 +286,4 @@
 [type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
+    border-style: none;
+    padding: 0;
 }
@@ -245,21 +296,24 @@
 [type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
+    outline: 1px dotted ButtonText;
 }
 
 //Change the border, margin, and padding in all browsers (opinionated).
-fieldset{
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
 }
 
-legend{
-  display: table;max-width: 100%;box-sizing: border-box;white-space: normal; //Correct the text wrapping in Edge and IE.
-  color: inherit; //Correct the color inheritance from `fieldset` elements in IE.
-  padding: 0; //Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
+legend {
+    display: table;
+    max-width: 100%;
+    box-sizing: border-box;
+    white-space: normal; //Correct the text wrapping in Edge and IE.
+    color: inherit; //Correct the color inheritance from `fieldset` elements in IE.
+    padding: 0; //Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 }
 
 progress {
-  display: inline-block; //Add the correct display in IE 9-.
-  vertical-align: baseline; //Add the correct vertical alignment in Chrome, Firefox, and Opera.
+    display: inline-block; //Add the correct display in IE 9-.
+    vertical-align: baseline; //Add the correct vertical alignment in Chrome, Firefox, and Opera.
 }
@@ -269,3 +323,3 @@
 textarea {
-  overflow: auto;
+    overflow: auto;
 }
@@ -275,4 +329,4 @@
 [type="radio"] {
-  box-sizing: border-box; //Add the correct box sizing in IE 10-.
-  padding: 0; //Remove the padding in IE 10-.
+    box-sizing: border-box; //Add the correct box sizing in IE 10-.
+    padding: 0; //Remove the padding in IE 10-.
 }
@@ -283,8 +337,8 @@
 [type="number"]::-webkit-outer-spin-button {
-  height: auto;
+    height: auto;
 }
 
 [type="search"] {
-  -webkit-appearance: textfield; //Correct the odd appearance in Chrome and Safari.
-  outline-offset: -2px; //Correct the outline style in Safari.
+    -webkit-appearance: textfield; //Correct the odd appearance in Chrome and Safari.
+    outline-offset: -2px; //Correct the outline style in Safari.
 }
@@ -295,13 +349,12 @@
 [type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
+    -webkit-appearance: none;
 }
 
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; //Correct the inability to style clickable types in iOS and Safari.
-  font: inherit; //Change font properties to `inherit` in Safari.
+    -webkit-appearance: button; //Correct the inability to style clickable types in iOS and Safari.
+    font: inherit; //Change font properties to `inherit` in Safari.
 }
 
-
 [hidden] {
-  display: none;
+    display: none;
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51471

8.21%

Lines of code

267

Infinity%

No dependency changes