/* flex
|
--------------------------------------------------------- */
|
.ml-auto {
|
margin-left: auto;
|
}
|
.mr-auto {
|
margin-right: auto;
|
}
|
.flex {
|
display: flex;
|
}
|
|
.flex-col {
|
flex-direction: column;
|
}
|
|
.grow {
|
flex-grow: 1;
|
}
|
|
.grow-0 {
|
flex-grow: 0;
|
}
|
.shrink {
|
flex-shrink: 1;
|
}
|
|
.shrink-0 {
|
flex-shrink: 0;
|
}
|
.flex-wrap {
|
flex-wrap: wrap;
|
}
|
|
.flex-nowrap {
|
flex-wrap: nowrap;
|
}
|
|
.flex-wrap-reverse {
|
flex-wrap: wrap-reverse;
|
}
|
|
.justify-start {
|
justify-content: flex-start;
|
}
|
|
.justify-end {
|
justify-content: flex-end;
|
}
|
|
.justify-center {
|
justify-content: center;
|
}
|
|
.justify-between {
|
justify-content: space-between;
|
}
|
|
.justify-around {
|
justify-content: space-around;
|
}
|
|
.items-start {
|
align-items: flex-start;
|
}
|
|
.items-end {
|
align-items: flex-end;
|
}
|
|
.items-center {
|
align-items: center;
|
}
|
|
.self-start {
|
align-self: flex-start;
|
}
|
|
.self-end {
|
align-self: flex-end;
|
}
|
|
.self-center {
|
align-self: center;
|
}
|
|
.cursor-pointer {
|
cursor: pointer;
|
}
|
|
$z-index-steps: (0, 10, 20, 30, 40, 50, auto);
|
|
@for $i from 1 through length($z-index-steps) {
|
$index: nth($z-index-steps, $i);
|
.z-#{$index} {
|
z-index: #{$index};
|
}
|
}
|
|
@for $i from 0 through 20 {
|
$opacity: ($i * 0.05);
|
.opacity-#{$i * 5} {
|
opacity: $opacity;
|
}
|
}
|
|
.box-border {
|
box-sizing: border-box;
|
}
|
|
.box-content {
|
box-sizing: content-box;
|
}
|
/* Position
|
--------------------------------------------------------- */
|
.static {
|
position: static;
|
}
|
|
.fixed {
|
position: fixed;
|
}
|
|
.absolute {
|
position: absolute;
|
}
|
|
.relative {
|
position: relative;
|
}
|
|
.sticky {
|
position: sticky;
|
}
|
|
/* overflow
|
--------------------------------------------------------- */
|
.overflow-auto {
|
overflow: auto !important;
|
}
|
|
.overflow-hidden {
|
overflow: hidden;
|
}
|
|
.overflow-x-hidden {
|
overflow-x: hidden;
|
}
|
|
.overflow-y-hidden {
|
overflow-y: hidden;
|
}
|
|
.rounded-none {
|
border-radius: 0px;
|
}
|
|
.rounded-sm {
|
border-radius: 0.125rem;
|
/* 2px */
|
}
|
|
.rounded {
|
border-radius: 0.25rem;
|
/* 4px */
|
}
|
|
.rounded-md {
|
border-radius: 0.375rem;
|
/* 6px */
|
}
|
|
.rounded-lg {
|
border-radius: 0.5rem;
|
/* 8px */
|
}
|
|
.rounded-xl {
|
border-radius: 0.75rem;
|
/* 12px */
|
}
|
|
.rounded-2xl {
|
border-radius: 1rem;
|
/* 16px */
|
}
|
|
.rounded-3xl {
|
border-radius: 1.5rem;
|
/* 24px */
|
}
|
|
.rounded-full {
|
border-radius: 9999px;
|
}
|
|
.float-start {
|
float: inline-start;
|
}
|
|
.float-end {
|
float: inline-end;
|
}
|
|
.float-right {
|
float: right;
|
}
|
|
.float-left {
|
float: left;
|
}
|
|
.font-bold {
|
font-weight: 700;
|
}
|
|
.border {
|
border-width: 1rpx;
|
}
|
|
.bg-red-50 {
|
background-color: rgb(254 242 242) !important;
|
}
|
|
.bg-red-100 {
|
background-color: rgb(254 226 226) !important;
|
}
|
|
.bg-red-200 {
|
background-color: rgb(254 202 202) !important;
|
}
|
|
.bg-red-300 {
|
background-color: rgb(252 165 165) !important;
|
}
|
|
.bg-red-400 {
|
background-color: rgb(248 113 113) !important;
|
}
|
|
.bg-red-500 {
|
background-color: rgb(239 68 68) !important;
|
}
|
|
.bg-red-600 {
|
background-color: rgb(220 38 38) !important;
|
}
|
|
.bg-red-700 {
|
background-color: rgb(185 28 28) !important;
|
}
|
|
.bg-red-800 {
|
background-color: rgb(153 27 27) !important;
|
}
|
|
.bg-red-900 {
|
background-color: rgb(127 29 29) !important;
|
}
|
|
.bg-red-950 {
|
background-color: rgb(69 10 10) !important;
|
}
|
|
.bg-orange-50 {
|
background-color: rgb(255 247 237) !important;
|
}
|
|
.bg-gray-50 {
|
background-color: rgb(249 250 251) !important;
|
}
|
|
.bg-gray-100 {
|
background-color: rgb(243 244 246) !important;
|
}
|
|
.bg-gray-200 {
|
background-color: rgb(229 231 235) !important;
|
}
|
|
.bg-gray-300 {
|
background-color: rgb(209 213 219) !important;
|
}
|
|
.bg-gray-400 {
|
background-color: rgb(156 163 175) !important;
|
}
|
|
.bg-gray-500 {
|
background-color: rgb(107 114 128) !important;
|
}
|
|
.bg-gray-600 {
|
background-color: rgb(75 85 99) !important;
|
}
|
|
.bg-gray-700 {
|
background-color: rgb(55 65 81) !important;
|
}
|
|
.bg-gray-800 {
|
background-color: rgb(31 41 55) !important;
|
}
|
|
.bg-gray-900 {
|
background-color: rgb(17 24 39) !important;
|
}
|
|
.bg-gray-950 {
|
background-color: rgb(3 7 18) !important;
|
}
|
|
.bg-blue-50 {
|
background-color: rgb(239 246 255) !important;
|
}
|
|
.bg-blue-100 {
|
background-color: rgb(219 234 254) !important;
|
}
|
|
.bg-blue-200 {
|
background-color: rgb(191 219 254) !important;
|
}
|
|
.bg-blue-300 {
|
background-color: rgb(147 197 253) !important;
|
}
|
|
.bg-blue-400 {
|
background-color: rgb(96 165 250) !important;
|
}
|
|
.bg-blue-500 {
|
background-color: rgb(59 130 246) !important;
|
}
|
|
.bg-blue-600 {
|
background-color: rgb(37 99 235) !important;
|
}
|
|
.bg-blue-700 {
|
background-color: rgb(29 78 216) !important;
|
}
|
|
.bg-blue-800 {
|
background-color: rgb(30 64 175) !important;
|
}
|
|
.bg-blue-900 {
|
background-color: rgb(30 58 138) !important;
|
}
|
|
.bg-blue-950 {
|
background-color: rgb(23 37 84) !important;
|
}
|
.bg-white {
|
background-color: rgb(255 255 255) !important;
|
}
|
|
.bg-black {
|
background-color: rgb(0 0 0) !important;
|
}
|
|
.text-red-50 {
|
color: rgb(254 242 242) !important;
|
}
|
|
.text-red-100 {
|
color: rgb(254 226 226) !important;
|
}
|
|
.text-red-200 {
|
color: rgb(254 202 202) !important;
|
}
|
|
.text-red-300 {
|
color: rgb(252 165 165) !important;
|
}
|
|
.text-red-400 {
|
color: rgb(248 113 113) !important;
|
}
|
|
.text-red-500 {
|
color: rgb(239 68 68) !important;
|
}
|
|
.text-red-600 {
|
color: rgb(220 38 38) !important;
|
}
|
|
.text-red-700 {
|
color: rgb(185 28 28) !important;
|
}
|
|
.text-red-800 {
|
color: rgb(153 27 27) !important;
|
}
|
|
.text-red-900 {
|
color: rgb(127 29 29) !important;
|
}
|
|
.text-red-950 {
|
color: rgb(69 10 10) !important;
|
}
|
|
.text-blue-50 {
|
color: rgb(239 246 255) !important;
|
}
|
|
.text-blue-100 {
|
color: rgb(219 234 254) !important;
|
}
|
|
.text-blue-200 {
|
color: rgb(191 219 254) !important;
|
}
|
|
.text-blue-300 {
|
color: rgb(147 197 253) !important;
|
}
|
|
.text-blue-400 {
|
color: rgb(96 165 250) !important;
|
}
|
|
.text-blue-500 {
|
color: rgb(59 130 246) !important;
|
}
|
|
.text-blue-600 {
|
color: rgb(37 99 235) !important;
|
}
|
|
.text-blue-700 {
|
color: rgb(29 78 216) !important;
|
}
|
|
.text-blue-800 {
|
color: rgb(30 64 175) !important;
|
}
|
|
.text-blue-900 {
|
color: rgb(30 58 138) !important;
|
}
|
|
.text-blue-950 {
|
color: rgb(23 37 84) !important;
|
}
|
|
.text-gray-50 {
|
color: rgb(249 250 251) !important;
|
}
|
|
.text-gray-100 {
|
color: rgb(243 244 246) !important;
|
}
|
|
.text-gray-200 {
|
color: rgb(229 231 235) !important;
|
}
|
|
.text-gray-300 {
|
color: rgb(209 213 219) !important;
|
}
|
|
.text-gray-400 {
|
color: rgb(156 163 175) !important;
|
}
|
|
.text-gray-500 {
|
color: rgb(107 114 128) !important;
|
}
|
|
.text-gray-600 {
|
color: rgb(75 85 99) !important;
|
}
|
|
.text-gray-700 {
|
color: rgb(55 65 81) !important;
|
}
|
|
.text-gray-800 {
|
color: rgb(31 41 55) !important;
|
}
|
|
.text-gray-900 {
|
color: rgb(17 24 39) !important;
|
}
|
|
.text-gray-950 {
|
color: rgb(3 7 18) !important;
|
}
|
|
.text-black {
|
color: rgb(0 0 0) !important;
|
}
|
|
.text-white {
|
color: rgb(255 255 255) !important;
|
}
|
