1mpacto-react-ui 0.2.0-beta.2 → 0.2.0-beta.21

package/dist/assets/_typography.scss

@@ -3,201 +3,855 @@
   line-height: 72px;
   font-weight: 700;
 }
+@mixin text-payhere-h1() {
+  font-size: 60px;
+  line-height: 72px;
+  font-weight: 700;
+}
 
 .text-payhere-h2 {
   font-size: 48px;
   line-height: 58px;
   font-weight: 700;
 }
+@mixin text-payhere-h2() {
+  font-size: 48px;
+  line-height: 58px;
+  font-weight: 700;
+}
 
 .text-payhere-h3 {
   font-size: 40px;
   line-height: 48px;
   font-weight: 700;
 }
+@mixin text-payhere-h3() {
+  font-size: 40px;
+  line-height: 48px;
+  font-weight: 700;
+}
 
 .text-payhere-h4 {
   font-size: 30px;
   line-height: 38px;
   font-weight: 700;
 }
+@mixin text-payhere-h4() {
+  font-size: 30px;
+  line-height: 38px;
+  font-weight: 700;
+}
 
 .text-payhere-h5 {
   font-size: 28px;
   line-height: 40px;
   font-weight: 600;
 }
+@mixin text-payhere-h5() {
+  font-size: 28px;
+  line-height: 40px;
+  font-weight: 600;
+}
 
 .text-payhere-h6 {
   font-size: 24px;
   line-height: 30px;
   font-weight: 600;
 }
+@mixin text-payhere-h6() {
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 600;
+}
 
 .text-payhere-body-lr {
   font-size: 18px;
   line-height: 26px;
   font-weight: 400;
 }
+@mixin text-payhere-body-lr() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 400;
+}
 
 .text-payhere-body-lm {
   font-size: 18px;
   line-height: 26px;
   font-weight: 500;
 }
+@mixin text-payhere-body-lm() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 500;
+}
 
 .text-payhere-body-ls {
   font-size: 18px;
   line-height: 26px;
   font-weight: 600;
 }
+@mixin text-payhere-body-ls() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 600;
+}
 
 .text-payhere-body-lb {
   font-size: 18px;
   line-height: 26px;
   font-weight: 700;
 }
+@mixin text-payhere-body-lb() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 700;
+}
 
 .text-payhere-body-mr {
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
 }
+@mixin text-payhere-body-mr() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+}
 
 .text-payhere-body-mm {
   font-size: 16px;
   line-height: 24px;
   font-weight: 500;
 }
+@mixin text-payhere-body-mm() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+}
 
 .text-payhere-body-ms {
   font-size: 16px;
   line-height: 24px;
   font-weight: 600;
 }
+@mixin text-payhere-body-ms() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+}
 
 .text-payhere-body-mb {
   font-size: 16px;
   line-height: 24px;
   font-weight: 700;
 }
+@mixin text-payhere-body-mb() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 700;
+}
 
 .text-payhere-label-r {
   font-size: 15px;
   line-height: 26px;
   font-weight: 400;
 }
+@mixin text-payhere-label-r() {
+  font-size: 15px;
+  line-height: 26px;
+  font-weight: 400;
+}
 
 .text-payhere-label-m {
   font-size: 15px;
   line-height: 26px;
   font-weight: 500;
 }
+@mixin text-payhere-label-m() {
+  font-size: 15px;
+  line-height: 26px;
+  font-weight: 500;
+}
+
+.text-payhere-label-sb {
+  font-size: 15px;
+  line-height: 26px;
+  font-weight: 600;
+}
+@mixin text-payhere-label-sb() {
+  font-size: 15px;
+  line-height: 26px;
+  font-weight: 600;
+}
+
+.text-payhere-label-b {
+  font-size: 15px;
+  line-height: 26px;
+  font-weight: 700;
+}
+@mixin text-payhere-label-b() {
+  font-size: 15px;
+  line-height: 26px;
+  font-weight: 700;
+}
 
 .text-payhere-body-sr {
   font-size: 14px;
   line-height: 22px;
   font-weight: 400;
 }
+@mixin text-payhere-body-sr() {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+}
 
 .text-payhere-body-sm {
   font-size: 14px;
   line-height: 22px;
   font-weight: 500;
 }
+@mixin text-payhere-body-sm() {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 500;
+}
+
+.text-payhere-body-smb {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 600;
+}
+@mixin text-payhere-body-smb() {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 600;
+}
+
+.text-payhere-body-sb {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 700;
+}
+@mixin text-payhere-body-sb() {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 700;
+}
 
 .text-payhere-body-esr {
   font-size: 12px;
   line-height: 20px;
   font-weight: 400;
 }
+@mixin text-payhere-body-esr() {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 400;
+}
 
 .text-payhere-body-esm {
   font-size: 12px;
   line-height: 20px;
   font-weight: 500;
 }
+@mixin text-payhere-body-esm() {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 500;
+}
+
+.text-payhere-body-esmb {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 600;
+}
+@mixin text-payhere-body-esmb() {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 600;
+}
+
+.text-payhere-body-esb {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 700;
+}
+@mixin text-payhere-body-esb() {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 700;
+}
+
+.text-laba-title-lb {
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: 700;
+}
+@mixin text-laba-title-lb() {
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: 700;
+}
+
+.text-laba-title-ls {
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: 600;
+}
+@mixin text-laba-title-ls() {
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: 600;
+}
+
+.text-laba-title-lr {
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: 400;
+}
+@mixin text-laba-title-lr() {
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: 400;
+}
+
+.text-laba-title-mb {
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 700;
+}
+@mixin text-laba-title-mb() {
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 700;
+}
+
+.text-laba-title-ms {
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 600;
+}
+@mixin text-laba-title-ms() {
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 600;
+}
+
+.text-laba-title-mr {
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 400;
+}
+@mixin text-laba-title-mr() {
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 400;
+}
 
 .text-laba-h1 {
   font-size: 24px;
   line-height: 30px;
   font-weight: 700;
 }
+@mixin text-laba-h1() {
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 700;
+}
+
+.text-laba-h1-b {
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 700;
+}
+@mixin text-laba-h1-b() {
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 700;
+}
+
+.text-laba-h1-sb {
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 600;
+}
+@mixin text-laba-h1-sb() {
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 600;
+}
+
+.text-laba-h1-r {
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 400;
+}
+@mixin text-laba-h1-r() {
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 400;
+}
 
 .text-laba-h2 {
   font-size: 18px;
   line-height: 26px;
   font-weight: 700;
 }
+@mixin text-laba-h2() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 700;
+}
+
+.text-laba-h2-b {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 700;
+}
+@mixin text-laba-h2-b() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 700;
+}
+
+.text-laba-h2-sb {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 600;
+}
+@mixin text-laba-h2-sb() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 600;
+}
+
+.text-laba-h2-r {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 400;
+}
+@mixin text-laba-h2-r() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 400;
+}
 
 .text-laba-base-rb {
   font-size: 16px;
   line-height: 24px;
   font-weight: 700;
 }
+@mixin text-laba-base-rb() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 700;
+}
 
 .text-laba-base-rs {
   font-size: 16px;
   line-height: 24px;
   font-weight: 600;
 }
+@mixin text-laba-base-rs() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+}
 
 .text-laba-base-rr {
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
 }
+@mixin text-laba-base-rr() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+}
 
 .text-laba-base-sb {
   font-size: 14px;
   line-height: 20px;
   font-weight: 700;
 }
+@mixin text-laba-base-sb() {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 700;
+}
 
 .text-laba-base-ss {
   font-size: 14px;
   line-height: 20px;
   font-weight: 600;
 }
+@mixin text-laba-base-ss() {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+}
 
 .text-laba-base-sr {
   font-size: 14px;
   line-height: 20px;
   font-weight: 400;
 }
+@mixin text-laba-base-sr() {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+}
 
 .text-laba-subtitle-rb {
   font-size: 12px;
   line-height: 16px;
   font-weight: 700;
 }
+@mixin text-laba-subtitle-rb() {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 700;
+}
 
 .text-laba-subtitle-rs {
   font-size: 12px;
   line-height: 16px;
   font-weight: 600;
 }
+@mixin text-laba-subtitle-rs() {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+}
 
 .text-laba-subtitle-rr {
   font-size: 12px;
   line-height: 16px;
   font-weight: 400;
 }
+@mixin text-laba-subtitle-rr() {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+}
 
 .text-laba-subtitle-sb {
   font-size: 10px;
   line-height: 12px;
   font-weight: 700;
 }
+@mixin text-laba-subtitle-sb() {
+  font-size: 10px;
+  line-height: 12px;
+  font-weight: 700;
+}
 
 .text-laba-subtitle-ss {
   font-size: 10px;
   line-height: 12px;
   font-weight: 600;
 }
+@mixin text-laba-subtitle-ss() {
+  font-size: 10px;
+  line-height: 12px;
+  font-weight: 600;
+}
 
 .text-laba-subtitle-sr {
   font-size: 10px;
   line-height: 12px;
   font-weight: 400;
+}
+@mixin text-laba-subtitle-sr() {
+  font-size: 10px;
+  line-height: 12px;
+  font-weight: 400;
+}
+
+.text-bill-h1 {
+  font-size: 60px;
+  line-height: 72px;
+  font-weight: 700;
+}
+@mixin text-bill-h1() {
+  font-size: 60px;
+  line-height: 72px;
+  font-weight: 700;
+}
+
+.text-bill-h2 {
+  font-size: 48px;
+  line-height: 58px;
+  font-weight: 700;
+}
+@mixin text-bill-h2() {
+  font-size: 48px;
+  line-height: 58px;
+  font-weight: 700;
+}
+
+.text-bill-h3 {
+  font-size: 40px;
+  line-height: 58px;
+  font-weight: 700;
+}
+@mixin text-bill-h3() {
+  font-size: 40px;
+  line-height: 58px;
+  font-weight: 700;
+}
+
+.text-bill-h4 {
+  font-size: 30px;
+  line-height: 38px;
+  font-weight: 700;
+}
+@mixin text-bill-h4() {
+  font-size: 30px;
+  line-height: 38px;
+  font-weight: 700;
+}
+
+.text-bill-h5 {
+  font-size: 28px;
+  line-height: 40px;
+  font-weight: 600;
+}
+@mixin text-bill-h5() {
+  font-size: 28px;
+  line-height: 40px;
+  font-weight: 600;
+}
+
+.text-bill-h6 {
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 600;
+}
+@mixin text-bill-h6() {
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 600;
+}
+
+.text-bill-body-lr {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 400;
+}
+@mixin text-bill-body-lr() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 400;
+}
+
+.text-bill-body-lm {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 500;
+}
+@mixin text-bill-body-lm() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 500;
+}
+
+.text-bill-body-lsm {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 600;
+}
+@mixin text-bill-body-lsm() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 600;
+}
+
+.text-bill-body-blb {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 700;
+}
+@mixin text-bill-body-blb() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 700;
+}
+
+.text-bill-body-mr {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+}
+@mixin text-bill-body-mr() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+}
+
+.text-bill-body-mm {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+}
+@mixin text-bill-body-mm() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+}
+
+.text-bill-body-msm {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+}
+@mixin text-bill-body-msm() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+}
+
+.text-bill-body-mb {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 700;
+}
+@mixin text-bill-body-mb() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 700;
+}
+
+.text-bill-label-r {
+  font-size: 15px;
+  line-height: 26px;
+  font-weight: 400;
+}
+@mixin text-bill-label-r() {
+  font-size: 15px;
+  line-height: 26px;
+  font-weight: 400;
+}
+
+.text-bill-label-m {
+  font-size: 15px;
+  line-height: 26px;
+  font-weight: 500;
+}
+@mixin text-bill-label-m() {
+  font-size: 15px;
+  line-height: 26px;
+  font-weight: 500;
+}
+
+.text-bill-label-sm {
+  font-size: 15px;
+  line-height: 26px;
+  font-weight: 600;
+}
+@mixin text-bill-label-sm() {
+  font-size: 15px;
+  line-height: 26px;
+  font-weight: 600;
+}
+
+.text-bill-label-b {
+  font-size: 15px;
+  line-height: 26px;
+  font-weight: 700;
+}
+@mixin text-bill-label-b() {
+  font-size: 15px;
+  line-height: 26px;
+  font-weight: 700;
+}
+
+.text-bill-body-sr {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+}
+@mixin text-bill-body-sr() {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+}
+
+.text-bill-body-sm {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 500;
+}
+@mixin text-bill-body-sm() {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 500;
+}
+
+.text-bill-body-ssm {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 600;
+}
+@mixin text-bill-body-ssm() {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 600;
+}
+
+.text-bill-body-sb {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 700;
+}
+@mixin text-bill-body-sb() {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 700;
+}
+
+.text-bill-body-esr {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 400;
+}
+@mixin text-bill-body-esr() {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 400;
+}
+
+.text-bill-body-ems {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 500;
+}
+@mixin text-bill-body-ems() {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 500;
+}
+
+.text-bill-body-essm {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 600;
+}
+@mixin text-bill-body-essm() {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 600;
+}
+
+.text-bill-body-esb {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 700;
+}
+@mixin text-bill-body-esb() {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 700;
 }