primary-style/dist/css/primary-style.css

A library for basic style write with scss

html {
  box-sizing: border-box;
  line-height: 1.15;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent; }

*,
*::before,
*::after {
  box-sizing: inherit; }

body {
  background-color: #fff;
  color: #34374c;
  display: flex;
  flex-direction: column;
  font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  height: 100%;
  margin: 0;
  text-align: left; }

/**
  * Usage: Just put font-12 to class property, that means the font size is 1.2rem;
  */
.font-10 {
  font-size: 10px; }

.font-12 {
  font-size: 12px; }

.font-14 {
  font-size: 14px; }

.font-16 {
  font-size: 16px; }

.font-18 {
  font-size: 18px; }

.font-20 {
  font-size: 20px; }

.font-22 {
  font-size: 22px; }

.font-24 {
  font-size: 24px; }

.font-28 {
  font-size: 28px; }

.font-30 {
  font-size: 30px; }

.font-32 {
  font-size: 32px; }

.font-36 {
  font-size: 36px; }

.font-48 {
  font-size: 48px; }

.font-64 {
  font-size: 64px; }

.font-72 {
  font-size: 72px; }

.text-lighter {
  font-weight: lighter; }

.text-normal {
  font-weight: normal; }

.text-bold {
  font-weight: bold; }

.text-bolder {
  font-weight: bolder; }

.padding-1 {
  padding: 1px; }

.pl-1 {
  padding-left: 1px; }

.pr-1 {
  padding-right: 1px; }

.pt-1 {
  padding-top: 1px; }

.pb-1 {
  padding-bottom: 1px; }

.margin-1 {
  margin: 1px; }

.ml-1 {
  margin-left: 1px; }

.mr-1 {
  margin-right: 1px; }

.mt-1 {
  margin-top: 1px; }

.mb-1 {
  margin-bottom: 1px; }

.padding-2 {
  padding: 2px; }

.pl-2 {
  padding-left: 2px; }

.pr-2 {
  padding-right: 2px; }

.pt-2 {
  padding-top: 2px; }

.pb-2 {
  padding-bottom: 2px; }

.margin-2 {
  margin: 2px; }

.ml-2 {
  margin-left: 2px; }

.mr-2 {
  margin-right: 2px; }

.mt-2 {
  margin-top: 2px; }

.mb-2 {
  margin-bottom: 2px; }

.padding-4 {
  padding: 4px; }

.pl-4 {
  padding-left: 4px; }

.pr-4 {
  padding-right: 4px; }

.pt-4 {
  padding-top: 4px; }

.pb-4 {
  padding-bottom: 4px; }

.margin-4 {
  margin: 4px; }

.ml-4 {
  margin-left: 4px; }

.mr-4 {
  margin-right: 4px; }

.mt-4 {
  margin-top: 4px; }

.mb-4 {
  margin-bottom: 4px; }

.padding-5 {
  padding: 5px; }

.pl-5 {
  padding-left: 5px; }

.pr-5 {
  padding-right: 5px; }

.pt-5 {
  padding-top: 5px; }

.pb-5 {
  padding-bottom: 5px; }

.margin-5 {
  margin: 5px; }

.ml-5 {
  margin-left: 5px; }

.mr-5 {
  margin-right: 5px; }

.mt-5 {
  margin-top: 5px; }

.mb-5 {
  margin-bottom: 5px; }

.padding-6 {
  padding: 6px; }

.pl-6 {
  padding-left: 6px; }

.pr-6 {
  padding-right: 6px; }

.pt-6 {
  padding-top: 6px; }

.pb-6 {
  padding-bottom: 6px; }

.margin-6 {
  margin: 6px; }

.ml-6 {
  margin-left: 6px; }

.mr-6 {
  margin-right: 6px; }

.mt-6 {
  margin-top: 6px; }

.mb-6 {
  margin-bottom: 6px; }

.padding-8 {
  padding: 8px; }

.pl-8 {
  padding-left: 8px; }

.pr-8 {
  padding-right: 8px; }

.pt-8 {
  padding-top: 8px; }

.pb-8 {
  padding-bottom: 8px; }

.margin-8 {
  margin: 8px; }

.ml-8 {
  margin-left: 8px; }

.mr-8 {
  margin-right: 8px; }

.mt-8 {
  margin-top: 8px; }

.mb-8 {
  margin-bottom: 8px; }

.padding-10 {
  padding: 10px; }

.pl-10 {
  padding-left: 10px; }

.pr-10 {
  padding-right: 10px; }

.pt-10 {
  padding-top: 10px; }

.pb-10 {
  padding-bottom: 10px; }

.margin-10 {
  margin: 10px; }

.ml-10 {
  margin-left: 10px; }

.mr-10 {
  margin-right: 10px; }

.mt-10 {
  margin-top: 10px; }

.mb-10 {
  margin-bottom: 10px; }

.padding-12 {
  padding: 12px; }

.pl-12 {
  padding-left: 12px; }

.pr-12 {
  padding-right: 12px; }

.pt-12 {
  padding-top: 12px; }

.pb-12 {
  padding-bottom: 12px; }

.margin-12 {
  margin: 12px; }

.ml-12 {
  margin-left: 12px; }

.mr-12 {
  margin-right: 12px; }

.mt-12 {
  margin-top: 12px; }

.mb-12 {
  margin-bottom: 12px; }

.padding-15 {
  padding: 15px; }

.pl-15 {
  padding-left: 15px; }

.pr-15 {
  padding-right: 15px; }

.pt-15 {
  padding-top: 15px; }

.pb-15 {
  padding-bottom: 15px; }

.margin-15 {
  margin: 15px; }

.ml-15 {
  margin-left: 15px; }

.mr-15 {
  margin-right: 15px; }

.mt-15 {
  margin-top: 15px; }

.mb-15 {
  margin-bottom: 15px; }

.padding-16 {
  padding: 16px; }

.pl-16 {
  padding-left: 16px; }

.pr-16 {
  padding-right: 16px; }

.pt-16 {
  padding-top: 16px; }

.pb-16 {
  padding-bottom: 16px; }

.margin-16 {
  margin: 16px; }

.ml-16 {
  margin-left: 16px; }

.mr-16 {
  margin-right: 16px; }

.mt-16 {
  margin-top: 16px; }

.mb-16 {
  margin-bottom: 16px; }

.padding-18 {
  padding: 18px; }

.pl-18 {
  padding-left: 18px; }

.pr-18 {
  padding-right: 18px; }

.pt-18 {
  padding-top: 18px; }

.pb-18 {
  padding-bottom: 18px; }

.margin-18 {
  margin: 18px; }

.ml-18 {
  margin-left: 18px; }

.mr-18 {
  margin-right: 18px; }

.mt-18 {
  margin-top: 18px; }

.mb-18 {
  margin-bottom: 18px; }

.padding-20 {
  padding: 20px; }

.pl-20 {
  padding-left: 20px; }

.pr-20 {
  padding-right: 20px; }

.pt-20 {
  padding-top: 20px; }

.pb-20 {
  padding-bottom: 20px; }

.margin-20 {
  margin: 20px; }

.ml-20 {
  margin-left: 20px; }

.mr-20 {
  margin-right: 20px; }

.mt-20 {
  margin-top: 20px; }

.mb-20 {
  margin-bottom: 20px; }

.padding-22 {
  padding: 22px; }

.pl-22 {
  padding-left: 22px; }

.pr-22 {
  padding-right: 22px; }

.pt-22 {
  padding-top: 22px; }

.pb-22 {
  padding-bottom: 22px; }

.margin-22 {
  margin: 22px; }

.ml-22 {
  margin-left: 22px; }

.mr-22 {
  margin-right: 22px; }

.mt-22 {
  margin-top: 22px; }

.mb-22 {
  margin-bottom: 22px; }

.padding-24 {
  padding: 24px; }

.pl-24 {
  padding-left: 24px; }

.pr-24 {
  padding-right: 24px; }

.pt-24 {
  padding-top: 24px; }

.pb-24 {
  padding-bottom: 24px; }

.margin-24 {
  margin: 24px; }

.ml-24 {
  margin-left: 24px; }

.mr-24 {
  margin-right: 24px; }

.mt-24 {
  margin-top: 24px; }

.mb-24 {
  margin-bottom: 24px; }

.padding-26 {
  padding: 26px; }

.pl-26 {
  padding-left: 26px; }

.pr-26 {
  padding-right: 26px; }

.pt-26 {
  padding-top: 26px; }

.pb-26 {
  padding-bottom: 26px; }

.margin-26 {
  margin: 26px; }

.ml-26 {
  margin-left: 26px; }

.mr-26 {
  margin-right: 26px; }

.mt-26 {
  margin-top: 26px; }

.mb-26 {
  margin-bottom: 26px; }

.padding-28 {
  padding: 28px; }

.pl-28 {
  padding-left: 28px; }

.pr-28 {
  padding-right: 28px; }

.pt-28 {
  padding-top: 28px; }

.pb-28 {
  padding-bottom: 28px; }

.margin-28 {
  margin: 28px; }

.ml-28 {
  margin-left: 28px; }

.mr-28 {
  margin-right: 28px; }

.mt-28 {
  margin-top: 28px; }

.mb-28 {
  margin-bottom: 28px; }

.padding-32 {
  padding: 32px; }

.pl-32 {
  padding-left: 32px; }

.pr-32 {
  padding-right: 32px; }

.pt-32 {
  padding-top: 32px; }

.pb-32 {
  padding-bottom: 32px; }

.margin-32 {
  margin: 32px; }

.ml-32 {
  margin-left: 32px; }

.mr-32 {
  margin-right: 32px; }

.mt-32 {
  margin-top: 32px; }

.mb-32 {
  margin-bottom: 32px; }

.padding-48 {
  padding: 48px; }

.pl-48 {
  padding-left: 48px; }

.pr-48 {
  padding-right: 48px; }

.pt-48 {
  padding-top: 48px; }

.pb-48 {
  padding-bottom: 48px; }

.margin-48 {
  margin: 48px; }

.ml-48 {
  margin-left: 48px; }

.mr-48 {
  margin-right: 48px; }

.mt-48 {
  margin-top: 48px; }

.mb-48 {
  margin-bottom: 48px; }

.padding-64 {
  padding: 64px; }

.pl-64 {
  padding-left: 64px; }

.pr-64 {
  padding-right: 64px; }

.pt-64 {
  padding-top: 64px; }

.pb-64 {
  padding-bottom: 64px; }

.margin-64 {
  margin: 64px; }

.ml-64 {
  margin-left: 64px; }

.mr-64 {
  margin-right: 64px; }

.mt-64 {
  margin-top: 64px; }

.mb-64 {
  margin-bottom: 64px; }

.padding-72 {
  padding: 72px; }

.pl-72 {
  padding-left: 72px; }

.pr-72 {
  padding-right: 72px; }

.pt-72 {
  padding-top: 72px; }

.pb-72 {
  padding-bottom: 72px; }

.margin-72 {
  margin: 72px; }

.ml-72 {
  margin-left: 72px; }

.mr-72 {
  margin-right: 72px; }

.mt-72 {
  margin-top: 72px; }

.mb-72 {
  margin-bottom: 72px; }

.padding-100 {
  padding: 100px; }

.pl-100 {
  padding-left: 100px; }

.pr-100 {
  padding-right: 100px; }

.pt-100 {
  padding-top: 100px; }

.pb-100 {
  padding-bottom: 100px; }

.margin-100 {
  margin: 100px; }

.ml-100 {
  margin-left: 100px; }

.mr-100 {
  margin-right: 100px; }

.mt-100 {
  margin-top: 100px; }

.mb-100 {
  margin-bottom: 100px; }

.padding-120 {
  padding: 120px; }

.pl-120 {
  padding-left: 120px; }

.pr-120 {
  padding-right: 120px; }

.pt-120 {
  padding-top: 120px; }

.pb-120 {
  padding-bottom: 120px; }

.margin-120 {
  margin: 120px; }

.ml-120 {
  margin-left: 120px; }

.mr-120 {
  margin-right: 120px; }

.mt-120 {
  margin-top: 120px; }

.mb-120 {
  margin-bottom: 120px; }

.no-pl {
  padding-left: 0; }

.no-ml {
  margin-left: 0; }

.no-pr {
  padding-right: 0; }

.no-mr {
  margin-right: 0; }

.no-pt {
  padding-top: 0; }

.no-mt {
  margin-top: 0; }

.no-pb {
  padding-bottom: 0; }

.no-mb {
  margin-bottom: 0; }

.no-padding {
  padding: 0; }

.no-margin {
  margin: 0; }

.relative {
  position: relative; }

.absolute {
  position: absolute; }

.overflow-x-hidden {
  overflow-x: hidden; }

.overflow-y-hidden {
  overflow-y: hidden; }

.no-decoration {
  text-decoration: none; }

.flex {
  display: flex; }

.inline-flex {
  display: inline-flex; }

.block {
  display: block; }

.inline-block {
  display: inline-block; }

.flex-center {
  align-items: center;
  justify-content: center; }

.flex-v-start {
  align-items: flex-start; }

.flex-h-start {
  justify-content: flex-start; }

.flex-v-center {
  align-items: center; }

.flex-h-center {
  justify-content: center; }

.flex-v-end {
  align-items: flex-end; }

.flex-h-end {
  justify-content: flex-end; }

.flex-v-between {
  align-items: space-between; }

.flex-h-between {
  justify-content: space-between; }

.flex-v-around {
  align-items: space-around; }

.flex-h-around {
  justify-content: space-around; }

.flex-v-initial {
  align-items: initial; }

.flex-h-initial {
  justify-content: initial; }

.flex-v-inherit {
  align-items: inherit; }

.flex-h-inherit {
  justify-content: inherit; }

.flex-1 {
  flex: 1; }

.full-width {
  width: 100%; }

.full-height {
  height: 100%; }