ant-design-style-sumamry

ant design style summary and enhance

Usage no npm install needed!

<script type="module">
  import antDesignStyleSumamry from 'https://cdn.skypack.dev/ant-design-style-sumamry';
</script>

README

Build

use npm:

npm run start

use yarn:

yarn start

Spacing

Ref Quasar Framework

g-[m|p][a|t|r|b|l|x|y]-[xxs|xs|sm|md|lg|xl|xxl]
    T        D                  S

T - type
  - values: p (padding), m (margin)

D - direction
  - values:
      t (top), r (right), b (bottom), l (left),
      a (all), x (both left & right), y (both top & bottom)

S - size
  - values:
      none: 0rem
      xss:  0.25rem (extra extra small),
      xs:   0.5rem  (extra small),
      sm:   1rem    (small),
      md:   1.5rem  (medium),
      lg:   2rem    (large),
      xl:   2.5rem  (extra large)
      xxl:  3rem    (extra extra large)

example

html { font-size: 16px; }

<!-- margin-left: 16px; -->
<div class="g-ml-sm">content</div>

<!-- padding-top: 32px; -->
<div class="g-pt-lg">content</div>

<!-- { margin-left: 16px; margin-right: 16px; padding-top: 32px; padding-bottom: 32px; } -->
<div class="g-mx-sm g-py-lg">Content</div>

Color

And design color

status color

  • #1890FF #1890FF Primary
  • #13C2C2 #13C2C2 Info
  • #52C418 #52C418 Success
  • #FAAD14 #FAAD14 Warn
  • #F5222C #FAAD14 Danger

Text color

  • #FFFFFF #FFFFFF gray-0
  • #FAFAFA #FAFAFA gray-1
  • #F5F5F5 #F5F5F5 gray-2
  • #E8E8E8 #E8E8E8 gray-3
  • #D9D9D9 #D9D9D9 gray-4
  • #BFBFBF #BFBFBF gray-5
  • #8C8C8C #8C8C8C gray-6
  • #595959 #595959 gray-7
  • #262626 #262626 gray-8
  • #000000 #000000 gray-9

Front color prefix fc-

.fc-primary
.fc-info
.fc-success
.fc-warn
.fc-danger


.fc-gray-0
.
.
.
.fc-gray-9

Force front color prefix force-fc-

.force-fc-primary
{
  color:#1890FF !important;
}

Background color prefix bc-

.bc-primary
.bc-info
.bc-success
.bc-warn
.bc-danger

Width & Height

.g-full {
  width: 100%;
  height: 100%;
}
.g-full-width {
  width: 100%;
}
.g-full-height {
  height: 100%;
} /* The parent element shoud have absolute height*/

Display

.g-dis-[block|inline|inline-block|flex|inline-flex]

.g-dis-block { display:block; }
.g-dis-inline { display:inline; }
.g-dis-inline-block { display:inline-block; }
.g-dis-flex { display:flex; }
.g-dis-inline-flex { display:inline-flex; }

Typography

Alignment

.g-text-[left|center|right|justify]
.g-text-left { text-align:left; }
.g-text-center { text-align:center; }
.g-text-right { text-align:right; }
.g-text-justify { text-align:right; }

case

.g-text-[uppercase|lowercase|capitalize]
.g-text-uppercase { text-transform: uppercase; }
.g-text-lowercase { text-transform: lowercase; }
.g-text-capitalize { text-transform: capitalize; }

Flex space

.g-flex-space-[between|around|envenly]
.g-flex-space-between { justify-content: space-between; }
.g-flex-space-around { justify-content: space-between; }
.g-flex-space-envenly { justify-content: space-between; }

Wrap

.g-no-wrap { white-space: nowrap; }

Border

.g-fw-[bold|border]
.g-fw-bold { font-weight: bold; }
.g-fw-bolder { font-weight: bolder; }

Font Size

Ref: https://ant.design/docs/spec/font

.g-fs-12 ~ .g-fs-56

.g-fs-12 { font-size: 12px; line-height: 20px; }
.
.
.
.g-fs-56 { font-size: 56px; line-height: 76px; }

Ellipsis

.g-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}