| 提交 | 用户 | 时间 | ||
| dd4b70 | 1 | @import "./variables"; |
| A | 2 | |
| 3 | // 全局样式 | |
| 4 | * { | |
| 5 | margin: 0; | |
| 6 | padding: 0; | |
| 7 | list-style-type: none; | |
| 8 | outline: none; | |
| 9 | box-sizing: border-box; | |
| 10 | } | |
| 11 | ||
| 12 | html { | |
| 13 | margin: 0; | |
| 14 | padding: 0; | |
| 15 | } | |
| 16 | ||
| 17 | body { | |
| 18 | font-family: Arial, Helvetica, sans-serif; | |
| 19 | line-height: 1.2em; | |
| 20 | background-color: #f1f1f1; | |
| 21 | margin: 0; | |
| 22 | padding: 0; | |
| 23 | overflow: hidden; | |
| 24 | } | |
| 25 | ||
| 26 | a { | |
| 27 | color: #343440; | |
| 28 | text-decoration: none; | |
| 29 | } | |
| 30 | ||
| 31 | .clearfix { | |
| 32 | &::after { | |
| 33 | content: ""; | |
| 34 | display: table; | |
| 35 | height: 0; | |
| 36 | line-height: 0; | |
| 37 | visibility: hidden; | |
| 38 | clear: both; | |
| 39 | } | |
| 40 | } | |
| 41 | ||
| 42 | //浮动 | |
| 43 | .float-r { | |
| 44 | float: right; | |
| 45 | } | |
| 46 | ||
| 47 | //浮动 | |
| 48 | .float-l { | |
| 49 | float: left; | |
| 50 | } | |
| 51 | ||
| 52 | // 字体加粗 | |
| 53 | .fw-b { | |
| 54 | font-weight: bold; | |
| 55 | } | |
| 56 | ||
| 57 | //文章一行显示，多余省略号显示 | |
| 58 | .title-item { | |
| 59 | overflow: hidden; | |
| 60 | text-overflow: ellipsis; | |
| 61 | white-space: nowrap; | |
| 62 | } | |
| 63 | ||
| 64 | .bg-color-black { | |
| 65 | background-color: rgba(19, 25, 47, 0.6); | |
| 66 | } | |
| 67 | ||
| 68 | .bg-color-blue { | |
| 69 | //background-color: #1a5cd7; | |
| 70 | background-color: rgba(19, 25, 47, 0.6); | |
| 71 | ||
| 72 | } | |
| 73 | ||
| 74 | .colorBlack { | |
| 75 | color: #272727 !important; | |
| 76 | ||
| 77 | &:hover { | |
| 78 | color: #272727 !important; | |
| 79 | } | |
| 80 | } | |
| 81 | ||
| 82 | .colorGrass { | |
| 83 | color: #33cea0; | |
| 84 | ||
| 85 | &:hover { | |
| 86 | color: #33cea0 !important; | |
| 87 | } | |
| 88 | } | |
| 89 | ||
| 90 | .colorRed { | |
| 91 | color: #ff5722; | |
| 92 | ||
| 93 | &:hover { | |
| 94 | color: #ff5722 !important; | |
| 95 | } | |
| 96 | } | |
| 97 | ||
| 98 | .colorText { | |
| 99 | color: #d3d6dd !important; | |
| 100 | ||
| 101 | &:hover { | |
| 102 | color: #d3d6dd !important; | |
| 103 | } | |
| 104 | } | |
| 105 | ||
| 106 | .colorBlue { | |
| 107 | color: #257dff !important; | |
| 108 | ||
| 109 | &:hover { | |
| 110 | color: #257dff !important; | |
| 111 | } | |
| 112 | } | |
| 113 | ||
| 114 | //颜色 | |
| 115 | @each $colorkey, $color in $colors { | |
| 116 | .text-#{$colorkey} { | |
| 117 | color: $color; | |
| 118 | } | |
| 119 | ||
| 120 | .bg-#{$colorkey} { | |
| 121 | background-color: $color; | |
| 122 | } | |
| 123 | } | |
| 124 | ||
| 125 | //对齐 | |
| 126 | @each $var in (left, center, right) { | |
| 127 | .text-#{$var} { | |
| 128 | text-align: $var !important; | |
| 129 | } | |
| 130 | } | |
| 131 | ||
| 132 | //flex | |
| 133 | @each $key, $value in $flex-jc { | |
| 134 | .jc-#{$key} { | |
| 135 | justify-content: $value; | |
| 136 | } | |
| 137 | } | |
| 138 | ||
| 139 | @each $key, $value in $flex-ai { | |
| 140 | .ai-#{$key} { | |
| 141 | align-items: $value; | |
| 142 | } | |
| 143 | } | |
| 144 | ||
| 145 | //字体 | |
| 146 | @each $fontkey, $fontvalue in $font-sizes { | |
| 147 | .fs-#{$fontkey} { | |
| 148 | font-size: $fontvalue * $base-font-size; | |
| 149 | } | |
| 150 | } | |
| 151 | ||
| 152 | //.mt-1 => margin top | |
| 153 | //spacing | |
| 154 | ||
| 155 | @each $typekey, $type in $spacing-types { | |
| 156 | //.m-1 | |
| 157 | @each $sizekey, $size in $spacing-sizes { | |
| 158 | .#{$typekey}-#{$sizekey} { | |
| 159 | #{$type}: $size * $spacing-base-size; | |
| 160 | } | |
| 161 | } | |
| 162 | ||
| 163 | //.mx-1 | |
| 164 | @each $sizekey, $size in $spacing-sizes { | |
| 165 | .#{$typekey}x-#{$sizekey} { | |
| 166 | #{$type}-left: $size * $spacing-base-size; | |
| 167 | #{$type}-right: $size * $spacing-base-size; | |
| 168 | } | |
| 169 | ||
| 170 | .#{$typekey}y-#{$sizekey} { | |
| 171 | #{$type}-top: $size * $spacing-base-size; | |
| 172 | #{$type}-bottom: $size * $spacing-base-size; | |
| 173 | } | |
| 174 | } | |
| 175 | ||
| 176 | //.mt-1 | |
| 177 | @each $directionkey, $direction in $spacing-directions { | |
| 178 | @each $sizekey, $size in $spacing-sizes { | |
| 179 | .#{$typekey}#{$directionkey}-#{$sizekey} { | |
| 180 | #{$type}-#{$direction}: $size * $spacing-base-size; | |
| 181 | } | |
| 182 | } | |
| 183 | } | |
| 184 | ||
| 185 | .#{$typekey} { | |
| 186 | #{$type}: 0; | |
| 187 | } | |
| 188 | } | |
