// thinco样式库 /* ============ 初始化 ============*/ /* ============ 样式 ============*/ // 页面最外层 .wrap-page { display: flex; flex: 1; flex-direction: column; padding: 20px 20px; background-color: #f4f6f6; } // 内容盒子 .wrap-box { background-color: #ffffff; padding: 20px; border-radius: 10px; } // 标签tag .wrap-tag-blue { display: flex; flex-direction: row; flex-wrap: wrap; .tag { color: #616df2; border: 2px solid #616df2; padding: 5px 10px; border-radius: 2px; margin: auto 10px; flex-shrink: 0; &.active { background-color: #616df2; color: #fff; } } } // 标签 .wrap-tag-gray { display: flex; flex-direction: row; flex-wrap: wrap; .tag { color: #939393; border: 2px solid #f4f4f4; background-color: #f4f4f4; padding: 5px 10px; border-radius: 2px; margin: auto 10px; flex-shrink: 0; &.active { color: #898ce7; background-color: #f3f1fd; } } } /* ============ 颜色 ============*/ // 常用颜色 $border-color: #d1d5db; // 主边框颜色(灰色) $icon-color: #616df2; // 主图标颜色(蓝色) .icon-color { color: $icon-color; } .border-color { color: $border-color; } // 其他颜色 $color: ( // 灰色 gray-50: #f9fafb, gray-100: #f3f4f6, gray-200: #e5e7eb, gray-300: #d1d5db, gray-400: #9ca3af, gray-500: #6b7280, gray-600: #4b5563, gray-700: #374151, gray-800: #1f2937, gray-900: #111827, // 红色 red-50: #fef2f2, red-100: #fee2e2, red-200: #fecaca, red-300: #fca5a5, red-400: #f87171, red-500: #ef4444, red-600: #dc2626, red-700: #b91c1c, red-800: #991b1b, red-900: #7f1d1d, // 黄色 yellow-50: #fffbeb, yellow-100: #fef3c7, yellow-200: #fde68a, yellow-300: #fcd34d, yellow-400: #fbbf24, yellow-500: #f59e0b, yellow-600: #d97706, yellow-700: #b45309, yellow-800: #92400e, yellow-900: #78350f, // 绿色 green-50: #ecfdf5, green-100: #d1fae5, green-200: #a7f3d0, green-300: #6ee7b7, green-400: #34d399, green-500: #10b981, green-600: #059669, green-700: #047857, green-800: #065f46, green-900: #064e3b, // 蓝色 blue-50: #eff6ff, blue-100: #dbeafe, blue-200: #bfdbfe, blue-300: #93c5fd, blue-400: #60a5fa, blue-500: #3b82f6, blue-600: #2563eb, blue-700: #1d4ed8, blue-800: #1e40af, blue-900: #1e3a8a, // 紫色 purple-50: #f5f3ff, purple-100: #ede9fe, purple-200: #ddd6fe, purple-300: #c4b5fd, purple-400: #a78bfa, purple-500: #8b5cf6, purple-600: #7c3aed, purple-700: #6d28d9, purple-800: #5b21b6, purple-900: #4c1d95 ); // 文本、边框、背景 @each $key, $val in $color { //文本颜色 .text-#{$key} { color: #{$val} !important; } //边框颜色 .border-#{$key} { border-color: #{$val} !important; } //背景颜色 .bg-#{$key} { background-color: #{$val} !important; } } // 文本/图标/背景 .text-white { color: #fff; } .text-black { color: #000; } .text-blue { color: #616df2; } .text-gray { color: #9ca3af; } .text-yellow { color: #faad14; } .icon-blue { color: #616df2; } .bg-white { background-color: #fff; } .bg-gray { background-color: #f2f2f2; } /* ============ 布局 ============*/ // box .box-border { box-sizing: border-box; } .box-content { box-sizing: content-box; } // 显示 .block { display: block !important; } .inline-block { display: inline-block !important; } .inline { display: inline; } .flex { display: flex !important; } .hidden { display: none !important; } // 溢出 .overflow-hidden { overflow: hidden; } .overflow-scroll { overflow: scroll; } .overflow-x-hidden { overflow-x: hidden; } .overflow-y-hidden { overflow-y: hidden; } .overflow-x-scroll { overflow-x: scroll; } .overflow-y-scroll { overflow-y: scroll; } // 定位 .static { position: static; } .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: static; } .left-0 { left: 0; } .top-0 { top: 0; } .bottom-0 { bottom: 0; } .right-0 { right: 0; } // 可见性 .visible { visibility: visible; } .invisible { visibility: hidden; } // 优先级 .z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-auto { z-index: auto; } // FLEXBOX 布局 // 方向 .flex-row { flex-direction: row !important; } .flex-row-reverse { flex-direction: row-reverse !important; } .flex-col { flex-direction: column !important; } .flex-col-reverse { flex-direction: column-reverse !important; } // 换行 .flex-wrap { flex-wrap: wrap !important; } .flex-wrap-reverse { flex-wrap: wrap-reverse !important; } .flex-nowrap { flex-wrap: nowrap !important; } // 控制 flex 项目放大和缩小 .flex-1 { flex: 1 1 0% !important; } // 控制 flex 项目放大的功能类 .flex-grow-0 { flex-grow: 0 !important; } .flex-grow { flex-grow: 1 !important; } // 控制 flex 项目缩小的功能类 .flex-shrink-0 { flex-shrink: 0 !important; } .flex-shrink { flex-shrink: 1 !important; } // justify-content用于控制 flex 和 grid 项目如何沿着容器的主轴定位的功能类 .justify-start { justify-content: flex-start !important; } .justify-end { justify-content: flex-end !important; } .justify-center { justify-content: center !important; } .justify-between { justify-content: space-between !important; } .justify-around { justify-content: space-around !important; } .justify-evenly { justify-content: space-evenly !important; } // align-items用于控制 Flex 和网格项如何沿着容器的横轴定位的功能类 .items-start { align-items: flex-start !important; } .items-end { align-items: flex-end !important; } .items-center { align-items: center !important; } .items-baseline { align-items: baseline !important; } .items-stretch { align-items: stretch !important; } /* ============ 间距 ============*/ // 上下左右的内外边距:0 - 80(递增数:2,含尾数为5的数) @for $i from 0 through 80 { // 只要双数和能被5除尽的数 @if $i % 2 == 0 or $i % 5 == 0 { // 定义外边距,结果如:m-30 .m-#{$i} { margin: $i + px !important; } // 定义内边距,结果如:p-30 .p-#{$i} { padding: $i + px !important; } @each $short, $long in l left, t top, r right, b bottom { // 定义外边距,结果如: ml-30 .m#{$short}-#{$i} { margin-#{$long}: $i + px !important; } // 定义内边距 .p#{$short}-#{$i} { padding-#{$long}: $i + px !important; } } } } // 水平和垂直的内外边距:0 - 80(递增数:5) @for $i from 0 through 16 { $var: $i * 5; .mx-#{$var} { margin-left: $var + px !important; margin-right: $var + px !important; } .my-#{$var} { margin-top: $var + px !important; margin-bottom: $var + px !important; } .px-#{$var} { padding-left: $var + px !important; padding-right: $var + px !important; } .py-#{$var} { padding-top: $var + px !important; padding-bottom: $var + px !important; } } // 自动填充的内外边距 @each $short, $long in l left, t top, r right, b bottom { // 定义外边距 .m#{$short}-auto { margin-#{$long}: auto !important; } // 定义内边距 .p#{$short}-auto { padding-#{$long}: auto !important; } } /* ============ 尺寸 ============*/ // 高度 .h-1-2 { height: 50%; } .h-1-3 { height: 33.333333%; } .h-2-3 { height: 66.666667%; } .h-1-4 { height: 25%; } .h-2-4 { height: 50%; } .h-3-4 { height: 75%; } .h-1-5 { height: 20%; } .h-2-5 { height: 40%; } .h-3-5 { height: 60%; } .h-4-5 { height: 80%; } .h-1-6 { height: 16.666667%; } .h-2-6 { height: 33.333333%; } .h-3-6 { height: 50%; } .h-4-6 { height: 66.666667%; } .h-5-6 { height: 83.333333%; } .h-full { height: 100% !important; } .h-screen { height: 100vh; } // 宽度 .w-1-2 { width: 50%; } .w-1-3 { width: 33.333333%; } .w-2-3 { width: 66.666667%; } .w-1-4 { width: 25%; } .w-2-4 { width: 50%; } .w-3-4 { width: 75%; } .w-1-5 { width: 20%; } .w-2-5 { width: 40%; } .w-3-5 { width: 60%; } .w-4-5 { width: 80%; } .w-1-6 { width: 16.666667%; } .w-2-6 { width: 33.333333%; } .w-3-6 { width: 50%; } .w-4-6 { width: 66.666667%; } .w-5-6 { width: 83.333333%; } .w-1-12 { width: 8.333333%; } .w-2-12 { width: 16.666667%; } .w-3-12 { width: 25%; } .w-4-12 { width: 33.333333%; } .w-5-12 { width: 41.666667%; } .w-6-12 { width: 50%; } .w-7-12 { width: 58.333333%; } .w-8-12 { width: 66.666667%; } .w-9-12 { width: 75%; } .w-10-12 { width: 83.333333%; } .w-11-12 { width: 91.666667%; } .w-full { width: 100% !important; } .w-screen { width: 100vh; } @for $i from 1 through 10 { $var: $i * 10; .w-#{$var} { width: #{$var + '%'}; } } @for $i from 1 through 19 { $var: $i * 5; .w-#{$var} { width: #{$var + '%'}; } } /* ============ 字体文本 ============*/ // 大小 // 数值形式(取偶数) @for $i from 10 through 50 { @if $i % 2 == 0 { .text-#{$i} { font-size: $i + px; } } } // 粗细 .font-thin { font-weight: 100; } .font-extralight { font-weight: 200; } .font-light { font-weight: 300; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; } .font-black { font-weight: 900; } // 行高 .leading-0 { line-height: 0 !important; } .leading-05 { line-height: 0.5 !important; } .leading-10 { line-height: 1 !important; } .leading-12 { line-height: 1.2 !important; } .leading-15 { line-height: 1.5 !important; } .leading-20 { line-height: 2 !important; } .leading-30 { line-height: 3 !important; } // 文本对齐 .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-justify { text-align: justify !important; } // 文本溢出 .line-1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .line-2 { -webkit-line-clamp: 2; } .line-3 { -webkit-line-clamp: 3; } .line-4 { -webkit-line-clamp: 4; } .line-5 { -webkit-line-clamp: 5; } .line-2, .line-3, .line-4, .line-5 { overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; // 弹性伸缩盒 -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式 } // 换行 .break-normal { overflow-wrap: normal; word-break: normal; } .break-words { overflow-wrap: break-word; } // 在长单词或 URL 地址内部进行换行 .break-all { word-break: break-all; } // 在单词内换行 // 文本修饰 .underline { text-decoration-line: underline; } .overline { text-decoration-line: overline; } .line-through { text-decoration-line: line-through; } .no-underline { text-decoration-line: no-underline; } // 下划线位置 .underline-offset-auto { text-underline-offset: auto; } .underline-offset-0 { text-underline-offset: 0px; } .underline-offset-1 { text-underline-offset: 1px; } .underline-offset-2 { text-underline-offset: 2px; } .underline-offset-4 { text-underline-offset: 4px; } .underline-offset-8 { text-underline-offset: 8px; } /* ============ 边框 ============*/ // 圆角 .rounded-none { border-radius: 0px; } .rounded { border-radius: 5px; } .rounded-10 { border-radius: 10px; } .rounded-20 { border-radius: 20px; } .rounded-30 { border-radius: 30px; } .rounded-50 { border-radius: 50px; } .rounded-circle { border-radius: 100%; } // 边框 @each $var in left, right, top, bottom { // 边框,结果如:border-l .border-#{str-slice($var,0,1)} { border-#{$var}-width: 1px; border-#{$var}-style: solid; border-#{$var}-color: $border-color; } // 边框为0,结果如:border-l-0 .border-#{str-slice($var,0,1)}-0 { border-#{$var}-width: 0; } } .border { border-width: 1px; border-style: solid; border-color: $border-color; } .border-0 { border-width: 0; } /* ============ 效果 ============*/ // 阴影 .shadow-sm { box-shadow: 0 2px 4px rgba(114, 130, 138, 0.2) !important; } .shadow { box-shadow: 0 8px 16px rgba(114, 130, 138, 0.2) !important; } .shadow-lg { box-shadow: 0 16px 48px rgba(114, 130, 138, 0.2) !important; } // 透明度 .opacity-0 { opacity: 0; } .opacity-10 { opacity: 0.1; } .opacity-20 { opacity: 0.2; } .opacity-30 { opacity: 0.3; } .opacity-40 { opacity: 0.4; } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .opacity-70 { opacity: 0.7; } .opacity-80 { opacity: 0.8; } .opacity-90 { opacity: 0.9; } .opacity-100 { opacity: 1; }