@neatui/css 1.0.2

package/core/cover.scss

@@ -0,0 +1,94 @@
+$sz: no, xs, ss, sm, ms, mm, ml, ls, lm, ll, xl;
+
+[ui-cover] {
+  position: relative;
+  width: 100%;
+  height: 0;
+  box-sizing: content-box;
+  padding-top: 100%;
+
+  & > * {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+  img {
+    object-fit: cover;
+  }
+
+  &[ui-cover~='cover'] {
+    img {
+      object-fit: cover;
+    }
+  }
+  &[ui-cover~='contain'] {
+    img {
+      object-fit: contain;
+    }
+  }
+
+  &[ui-cover~='1:1'] {
+    padding-top: 100%;
+  }
+  &[ui-cover~='4:3'] {
+    padding-top: 75%;
+  }
+  &[ui-cover~='3:4'] {
+    padding-top: 133.333333%;
+  }
+  &[ui-cover~='3:2'] {
+    padding-top: 66.666666%;
+  }
+  &[ui-cover~='2:3'] {
+    padding-top: 150%;
+  }
+  &[ui-cover~='16:9'] {
+    padding-top: 56.25%;
+  }
+  &[ui-cover~='9:16'] {
+    padding-top: 177.777777%;
+  }
+  &[ui-cover~='16:10'] {
+    padding-top: 62.5%;
+  }
+  &[ui-cover~='10:16'] {
+    padding-top: 160%;
+  }
+  &[ui-cover~='2.39:1'] {
+    padding-top: 41.841004%;
+  }
+  &[ui-cover~='1:2.39'] {
+    padding-top: 239%;
+  }
+}
+
+$base_br: 0;
+$base_max: 100%;
+$base_min: 100%;
+@each $s in $sz {
+  // 增量
+  [ui-cover~='+#{$s}'] {
+    padding-top: $base_max;
+  }
+  $base_max: ($base_max + 5);
+
+  // 减量
+  [ui-cover~='-#{$s}'] {
+    padding-top: $base_min;
+  }
+  $base_min: ($base_min - 5);
+
+  // 圆角
+  // [ui-cover~='br:#{$s}'] {
+  //   border-radius: #{$base_br}em;
+  //   & > * {
+  //     border-radius: #{$base_br * 0.5}em;
+  //   }
+  // }
+  $base_br: $base_br + 0.1;
+}

package/core/flex.scss

@@ -0,0 +1,616 @@
+%flex {
+  display: flex;
+}
+
+%row {
+  @extend %flex;
+  flex-direction: row;
+}
+%col {
+  @extend %flex;
+  flex-direction: column;
+}
+
+.flex {
+  // 行列
+  &-row {
+    &-lt {
+      @extend %row;
+      justify-content: flex-start;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &-ct {
+      @extend %row;
+      justify-content: center;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &-rt {
+      @extend %row;
+      justify-content: flex-end;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &-xt {
+      @extend %row;
+      justify-content: space-between;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+    &-at {
+      @extend %row;
+      justify-content: space-around;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &-lm {
+      @extend %row;
+      justify-content: flex-start;
+      align-items: center;
+      align-content: center;
+    }
+
+    &-cm {
+      @extend %row;
+      justify-content: center;
+      align-items: center;
+      align-content: center;
+    }
+
+    &-rm {
+      @extend %row;
+      justify-content: flex-end;
+      align-items: center;
+      align-content: center;
+    }
+
+    &-xm {
+      @extend %row;
+      justify-content: space-between;
+      align-items: center;
+      align-content: center;
+    }
+
+    &-am {
+      @extend %row;
+      justify-content: space-around;
+      align-items: center;
+      align-content: center;
+    }
+
+    &-lb {
+      @extend %row;
+      justify-content: flex-start;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &-cb {
+      @extend %row;
+      justify-content: center;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &-rb {
+      @extend %row;
+      justify-content: flex-end;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &-ry {
+      @extend %row;
+      justify-content: flex-end;
+      align-items: stretch;
+      align-content: space-between;
+    }
+
+    &-xb {
+      @extend %row;
+      justify-content: space-between;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &-ab {
+      @extend %row;
+      justify-content: space-around;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+  }
+  &-col {
+    &-lt {
+      @extend %col;
+      justify-content: flex-start;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &-ct {
+      @extend %col;
+      justify-content: flex-start;
+      align-items: center;
+      align-content: center;
+    }
+
+    &-rt {
+      @extend %col;
+      justify-content: flex-start;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &-xt {
+      @extend %col;
+      justify-content: flex-start;
+      align-items: stretch;
+      align-content: stretch;
+    }
+    &-at {
+      @extend %col;
+      justify-content: flex-start;
+      align-items: space-around;
+      align-content: space-around;
+    }
+
+    &-lm {
+      @extend %col;
+      justify-content: center;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &-cm {
+      @extend %col;
+      justify-content: center;
+      align-items: center;
+      align-content: center;
+    }
+
+    &-rm {
+      @extend %col;
+      justify-content: center;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &-xm {
+      @extend %col;
+      justify-content: center;
+      align-items: stretch;
+      align-content: stretch;
+    }
+    &-am {
+      @extend %col;
+      justify-content: center;
+      align-items: space-around;
+      align-content: space-around;
+    }
+
+    &-lb {
+      @extend %col;
+      justify-content: flex-end;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &-cb {
+      @extend %col;
+      justify-content: flex-end;
+      align-items: center;
+      align-content: center;
+    }
+
+    &-rb {
+      @extend %col;
+      justify-content: flex-end;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &-xb {
+      @extend %col;
+      justify-content: flex-end;
+      align-items: stretch;
+      align-content: stretch;
+    }
+    &-ab {
+      @extend %col;
+      justify-content: flex-end;
+      align-items: space-around;
+      align-content: space-around;
+    }
+
+    &-ly {
+      @extend %col;
+      justify-content: space-between;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+    &-la {
+      @extend %col;
+      justify-content: space-around;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &-cy {
+      @extend %col;
+      justify-content: space-between;
+      align-items: center;
+      align-content: center;
+    }
+    &-ca {
+      @extend %col;
+      justify-content: space-around;
+      align-items: center;
+      align-content: center;
+    }
+    &-ry {
+      @extend %col;
+      justify-content: space-between;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+    &-ra {
+      @extend %col;
+      justify-content: space-around;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+    &-xy {
+      @extend %col;
+      justify-content: space-between;
+      align-items: stretch;
+      align-content: space-between;
+    }
+    &-aa {
+      @extend %col;
+      justify-content: space-around;
+      align-items: space-around;
+      align-content: space-around;
+    }
+  }
+
+  // 撑满
+  &-full {
+    & > * {
+      flex-grow: 1;
+    }
+  }
+
+  // 行内
+  &-inline {
+    display: inline-flex !important;
+  }
+
+  & > * {
+    position: relative !important;
+  }
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-fixed {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.flex-block {
+  flex: 1;
+  overflow: hidden;
+}
+
+[ui-flex] {
+  display: flex;
+
+  &[ui-flex~=':inline'] {
+    display: inline-flex !important;
+  }
+
+  &[ui-flex~=':wrap'] {
+    flex-wrap: wrap;
+  }
+
+  &[ui-flex~=':fixed'] > * {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  &[ui-flex~='row'] {
+    flex-direction: row;
+
+    // 等分
+    &[ui-flex~='ew:1'] > * {
+      width: 100%;
+    }
+    &[ui-flex~='ew:2'] > * {
+      width: 50%;
+    }
+    &[ui-flex~='ew:3'] > * {
+      width: 33.333333%;
+    }
+    &[ui-flex~='ew:4'] > * {
+      width: 25%;
+    }
+    &[ui-flex~='ew:5'] > * {
+      width: 20%;
+    }
+    &[ui-flex~='ew:6'] > * {
+      width: 16.666666%;
+    }
+    &[ui-flex~='ew:7'] > * {
+      width: 14.285714%;
+    }
+    &[ui-flex~='ew:8'] > * {
+      width: 12.5%;
+    }
+    &[ui-flex~='ew:9'] > * {
+      width: 11.111111%;
+    }
+
+    // 对齐
+    &[ui-flex~='lt'] {
+      justify-content: flex-start;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &[ui-flex~='ct'] {
+      justify-content: center;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &[ui-flex~='rt'] {
+      justify-content: flex-end;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &[ui-flex~='xt'] {
+      justify-content: space-between;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+    &[ui-flex~='at'] {
+      justify-content: space-around;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &[ui-flex~='lm'] {
+      justify-content: flex-start;
+      align-items: center;
+      align-content: center;
+    }
+
+    &[ui-flex~='cm'] {
+      justify-content: center;
+      align-items: center;
+      align-content: center;
+    }
+
+    &[ui-flex~='rm'] {
+      justify-content: flex-end;
+      align-items: center;
+      align-content: center;
+    }
+
+    &[ui-flex~='xm'] {
+      justify-content: space-between;
+      align-items: center;
+      align-content: center;
+    }
+
+    &[ui-flex~='am'] {
+      justify-content: space-around;
+      align-items: center;
+      align-content: center;
+    }
+
+    &[ui-flex~='lb'] {
+      justify-content: flex-start;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &[ui-flex~='cb'] {
+      justify-content: center;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &[ui-flex~='rb'] {
+      justify-content: flex-end;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &[ui-flex~='ry'] {
+      justify-content: flex-end;
+      align-items: stretch;
+      align-content: space-between;
+    }
+
+    &[ui-flex~='xb'] {
+      justify-content: space-between;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &[ui-flex~='ab'] {
+      justify-content: space-around;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+  }
+
+  &[ui-flex~='col'] {
+    flex-direction: column;
+
+    // 位置
+    &[ui-flex~='lt'] {
+      @extend %col;
+      justify-content: flex-start;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &[ui-flex~='ct'] {
+      @extend %col;
+      justify-content: flex-start;
+      align-items: center;
+      align-content: center;
+    }
+
+    &[ui-flex~='rt'] {
+      @extend %col;
+      justify-content: flex-start;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &[ui-flex~='xt'] {
+      @extend %col;
+      justify-content: flex-start;
+      align-items: stretch;
+      align-content: stretch;
+    }
+    &[ui-flex~='at'] {
+      @extend %col;
+      justify-content: flex-start;
+      align-items: space-around;
+      align-content: space-around;
+    }
+
+    &[ui-flex~='lm'] {
+      @extend %col;
+      justify-content: center;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &[ui-flex~='cm'] {
+      @extend %col;
+      justify-content: center;
+      align-items: center;
+      align-content: center;
+    }
+
+    &[ui-flex~='rm'] {
+      @extend %col;
+      justify-content: center;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &[ui-flex~='xm'] {
+      @extend %col;
+      justify-content: center;
+      align-items: stretch;
+      align-content: stretch;
+    }
+    &[ui-flex~='am'] {
+      @extend %col;
+      justify-content: center;
+      align-items: space-around;
+      align-content: space-around;
+    }
+
+    &[ui-flex~='lb'] {
+      @extend %col;
+      justify-content: flex-end;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &[ui-flex~='cb'] {
+      @extend %col;
+      justify-content: flex-end;
+      align-items: center;
+      align-content: center;
+    }
+
+    &[ui-flex~='rb'] {
+      @extend %col;
+      justify-content: flex-end;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+
+    &[ui-flex~='xb'] {
+      @extend %col;
+      justify-content: flex-end;
+      align-items: stretch;
+      align-content: stretch;
+    }
+    &[ui-flex~='ab'] {
+      @extend %col;
+      justify-content: flex-end;
+      align-items: space-around;
+      align-content: space-around;
+    }
+
+    &[ui-flex~='ly'] {
+      @extend %col;
+      justify-content: space-between;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+    &[ui-flex~='la'] {
+      @extend %col;
+      justify-content: space-around;
+      align-items: flex-start;
+      align-content: flex-start;
+    }
+
+    &[ui-flex~='cy'] {
+      @extend %col;
+      justify-content: space-between;
+      align-items: center;
+      align-content: center;
+    }
+    &[ui-flex~='ca'] {
+      @extend %col;
+      justify-content: space-around;
+      align-items: center;
+      align-content: center;
+    }
+    &[ui-flex~='ry'] {
+      @extend %col;
+      justify-content: space-between;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+    &[ui-flex~='ra'] {
+      @extend %col;
+      justify-content: space-around;
+      align-items: flex-end;
+      align-content: flex-end;
+    }
+    &[ui-flex~='xy'] {
+      @extend %col;
+      justify-content: space-between;
+      align-items: stretch;
+      align-content: space-between;
+    }
+    &[ui-flex~='aa'] {
+      @extend %col;
+      justify-content: space-around;
+      align-items: space-around;
+      align-content: space-around;
+    }
+  }
+}

package/core/line.scss

@@ -0,0 +1,4 @@
+[ui-line] {
+  &[ui-line~='bk-1 '] {
+  }
+}