pbstyles/styles/less/index.less

Basic styles for quick prototyping

// Do not edit directly, this file was auto-generated.

@amination-transition-transition-property: all;
@amination-transition-transition-timing-function: ease-in-out;
@amination-transition-transition-duration: 150ms;
@color-basic-main: #000000;
@color-basic-light: #78909c;
@color-basic-lighter: #f5f5f5;
@color-basic-lightest: #fafafa;
@color-primary-darker: #2962ff;
@color-primary-main: #2979ff;
@color-primary-light: #bbdefb;
@color-primary-lighter: #e3f2fd;
@color-secondary-darker: #263238;
@color-secondary-main: #37474f;
@color-secondary-light: #cfd8dc;
@color-secondary-lighter: #eceff1;
@color-success-darker: #4caf50;
@color-success-main: #00c853;
@color-success-light: #c8e6c9;
@color-success-lighter: #e8f5e9;
@color-danger-darker: #d50000;
@color-danger-main: #ff5252;
@color-danger-light: #ffcdd2;
@color-danger-lighter: #ffebee;
@color-outline-primary: rgba(41, 121, 255, 0.2);
@color-outline-secondary: rgba(55, 71, 79, 0.2);
@color-outline-success: rgba(0, 200, 83, 0.2);
@color-outline-danger: rgba(255, 23, 68, 0.2);
@color-black: #000000;
@color-white: #ffffff;
@color-transparent: transparent;
@color-gray-50: #fafafa;
@color-gray-100: #f5f5f5;
@color-gray-200: #eeeeee;
@color-gray-300: #e0e0e0;
@color-gray-400: #bdbdbd;
@color-gray-500: #9e9e9e;
@color-gray-600: #757575;
@color-gray-700: #616161;
@color-gray-800: #424242;
@color-gray-900: #212121;
@color-gray-blue-50: #eceff1;
@color-gray-blue-100: #cfd8dc;
@color-gray-blue-200: #b0bec5;
@color-gray-blue-300: #90a4ae;
@color-gray-blue-400: #78909c;
@color-gray-blue-500: #607d8b;
@color-gray-blue-600: #546e7a;
@color-gray-blue-700: #455a64;
@color-gray-blue-800: #37474f;
@color-gray-blue-900: #263238;
@color-blue-50: #e3f2fd;
@color-blue-100: #bbdefb;
@color-blue-200: #90caf9;
@color-blue-300: #64b5f6;
@color-blue-400: #42a5f5;
@color-blue-500: #2196f3;
@color-blue-600: #1e88e5;
@color-blue-700: #1976d2;
@color-blue-800: #1565c0;
@color-blue-900: #0d47a1;
@color-blue-accent-100: #82b1ff;
@color-blue-accent-200: #448aff;
@color-blue-accent-300: #2979ff;
@color-blue-accent-400: #2962ff;
@color-green-50: #e8f5e9;
@color-green-100: #c8e6c9;
@color-green-200: #a5d6a7;
@color-green-300: #81c784;
@color-green-400: #66bb6a;
@color-green-500: #4caf50;
@color-green-600: #43a047;
@color-green-700: #388e3c;
@color-green-800: #2e7d32;
@color-green-900: #1b5e20;
@color-green-accent-100: #b9f6ca;
@color-green-accent-200: #69f0ae;
@color-green-accent-300: #00e676;
@color-green-accent-400: #00c853;
@color-red-50: #ffebee;
@color-red-100: #ffcdd2;
@color-red-200: #ef9a9a;
@color-red-300: #e57373;
@color-red-400: #ef5350;
@color-red-500: #f44336;
@color-red-600: #e53935;
@color-red-700: #d32f2f;
@color-red-800: #c62828;
@color-red-900: #b71c1c;
@color-red-accent-100: #ff8a80;
@color-red-accent-200: #ff5252;
@color-red-accent-300: #ff1744;
@color-red-accent-400: #d50000;
@color-pink-50: #fce4ec;
@color-pink-100: #f8bbd0;
@color-pink-200: #f48fb1;
@color-pink-300: #f06292;
@color-pink-400: #ec407a;
@color-pink-500: #e91e63;
@color-pink-600: #d81b60;
@color-pink-700: #c2185b;
@color-pink-800: #ad1457;
@color-pink-900: #880e4f;
@color-pink-accent-100: #ff80ab;
@color-pink-accent-200: #ff4081;
@color-pink-accent-300: #f50057;
@color-pink-accent-400: #c51162;
@color-yellow-50: #fffde7;
@color-yellow-100: #fff9c4;
@color-yellow-200: #fff59d;
@color-yellow-300: #fff176;
@color-yellow-400: #ffee58;
@color-yellow-500: #ffeb3b;
@color-yellow-600: #fdd835;
@color-yellow-700: #fbc02d;
@color-yellow-800: #f9a825;
@color-yellow-900: #f57f17;
@color-yellow-accent-100: #ffff8d;
@color-yellow-accent-200: #ffff00;
@color-yellow-accent-300: #ffea00;
@color-yellow-accent-400: #ffd600;
@color-orange-50: #fff3e0;
@color-orange-100: #ffe0b2;
@color-orange-200: #ffcc80;
@color-orange-300: #ffb74d;
@color-orange-400: #ffa726;
@color-orange-500: #ff9800;
@color-orange-600: #fb8c00;
@color-orange-700: #f57c00;
@color-orange-800: #ef6c00;
@color-orange-900: #e65100;
@color-orange-accent-100: #ffd180;
@color-orange-accent-200: #ffab40;
@color-orange-accent-300: #ff9100;
@color-orange-accent-400: #ff6d00;
@column-5: 5;
@column-6: 6;
@column-8: 8;
@container-736: 736px;
@container-1152: 1152px;
@container-full: 100%;
@container-aside: 184px;
@font-family-sans: Inter, sans-serif;
@font-decoration-none: none;
@font-decoration-underline: underline;
@font-decoration-strike: line-through;
@font-weight-regular: 400;
@font-weight-medium: 600;
@font-weight-bold: 700;
@font-size-12: 12px;
@font-size-14: 14px;
@font-size-16: 16px;
@font-size-20: 20px;
@font-size-24: 24px;
@font-size-32: 32px;
@font-size-48: 48px;
@font-size-64: 64px;
@font-leading-none: 1;
@font-leading-tight: 1.25;
@font-leading-normal: 1.5;
@font-h64-font-size: 64px;
@font-h64-line-height: 1.25;
@font-h64-font-weight: 700;
@font-h48-font-size: 48px;
@font-h48-line-height: 1.25;
@font-h48-font-weight: 700;
@font-h32-font-size: 32px;
@font-h32-line-height: 1.25;
@font-h32-font-weight: 700;
@font-h24-font-size: 24px;
@font-h24-line-height: 1.25;
@font-h24-font-weight: 700;
@font-h16-font-size: 16px;
@font-h16-line-height: 1.25;
@font-h16-font-weight: 700;
@font-h20-font-size: 20px;
@font-h20-line-height: 1.25;
@font-h20-font-weight: 700;
@font-t32-font-size: 32px;
@font-t32-line-height: 1.5;
@font-t32-font-weight: 400;
@font-t24-font-size: 24px;
@font-t24-line-height: 1.5;
@font-t24-font-weight: 400;
@font-t20-font-size: 20px;
@font-t20-line-height: 1.5;
@font-t20-font-weight: 400;
@font-t16-font-size: 16px;
@font-t16-line-height: 1.5;
@font-t16-font-weight: 400;
@font-t14-font-size: 14px;
@font-t14-line-height: 1.5;
@font-t14-font-weight: 400;
@font-t12-font-size: 12px;
@font-t12-line-height: 1.5;
@font-t12-font-weight: 400;
@font-tm32-font-size: 32px;
@font-tm32-line-height: 1.5;
@font-tm32-font-weight: 600;
@font-tm24-font-size: 24px;
@font-tm24-line-height: 1.5;
@font-tm24-font-weight: 600;
@font-tm20-font-size: 20px;
@font-tm20-line-height: 1.5;
@font-tm20-font-weight: 600;
@font-tm16-font-size: 16px;
@font-tm16-line-height: 1.5;
@font-tm16-font-weight: 600;
@font-tm14-font-size: 14px;
@font-tm14-line-height: 1.5;
@font-tm14-font-weight: 600;
@font-tm12-font-size: 12px;
@font-tm12-line-height: 1.5;
@font-tm12-font-weight: 600;
@opacity-0: 0;
@opacity-5: 0.05;
@opacity-10: 0.1;
@opacity-15: 0.15;
@opacity-20: 0.2;
@opacity-25: 0.25;
@opacity-30: 0.3;
@opacity-35: 0.35;
@opacity-40: 0.4;
@opacity-45: 0.45;
@opacity-50: 0.5;
@opacity-55: 0.55;
@opacity-60: 0.6;
@opacity-65: 0.65;
@opacity-70: 0.7;
@opacity-75: 0.75;
@opacity-80: 0.8;
@opacity-85: 0.85;
@opacity-90: 0.9;
@opacity-95: 0.95;
@opacity-100: 1;
@rounded-0: 0px;
@rounded-4: 4px;
@rounded-6: 6px;
@rounded-8: 8px;
@rounded-12: 12px;
@rounded-16: 16px;
@rounded-24: 24px;
@rounded-32: 32px;
@rounded-999: 999px;
@screen-desktop-min: 769px;
@screen-mobile-max: 768px;
@screen-xl-min: 1441px;
@screen-lg-max: 1440px;
@screen-lg-min: 921px;
@screen-md-max: 920px;
@screen-md-min: 769px;
@screen-sm-max: 768px;
@screen-sm-min: 481px;
@screen-xs-max: 480px;
@shadow-xs:
  0px 2px 4px -2px rgba(24, 39, 75, 0.12),
  0px 4px 4px -2px rgba(24, 39, 75, 0.08);
@shadow-sm:
  0px 4px 6px -4px rgba(24, 39, 75, 0.12),
  0px 8px 8px -4px rgba(24, 39, 75, 0.08);
@shadow-md:
  0px 6px 8px -6px rgba(24, 39, 75, 0.12),
  0px 8px 16px -6px rgba(24, 39, 75, 0.08);
@shadow-lg:
  0px 6px 12px -6px rgba(24, 39, 75, 0.12),
  0px 8px 24px -4px rgba(24, 39, 75, 0.08);
@shadow-xl:
  0px 6px 14px -6px rgba(24, 39, 75, 0.12),
  0px 10px 32px -4px rgba(24, 39, 75, 0.1);
@shadow-xxl:
  0px 8px 18px -6px rgba(24, 39, 75, 0.12),
  0px 12px 42px -4px rgba(24, 39, 75, 0.12);
@shadow-xxxl:
  0px 8px 22px -6px rgba(24, 39, 75, 0.12),
  0px 14px 64px -4px rgba(24, 39, 75, 0.12);
@shadow-xxxxl:
  0px 8px 28px -6px rgba(24, 39, 75, 0.12),
  0px 18px 88px -4px rgba(24, 39, 75, 0.14);
@size-0: 0px;
@size-1: 1px;
@size-2: 2px;
@size-4: 4px;
@size-6: 6px;
@size-8: 8px;
@size-10: 10px;
@size-12: 12px;
@size-14: 14px;
@size-16: 16px;
@size-18: 18px;
@size-20: 20px;
@size-22: 22px;
@size-24: 24px;
@size-26: 26px;
@size-28: 28px;
@size-30: 30px;
@size-32: 32px;
@size-36: 36px;
@size-40: 40px;
@size-48: 48px;
@size-56: 56px;
@size-64: 64px;
@size-72: 72px;
@size-80: 80px;
@size-88: 88px;
@size-96: 96px;
@size-104: 104px;
@size-112: 112px;
@size-120: 120px;
@size-128: 128px;
@size-136: 136px;
@size-144: 144px;
@size-152: 152px;
@size-160: 160px;
@size-180: 180px;
@size-200: 200px;
@size-220: 220px;
@size-240: 240px;
@size-260: 260px;
@size-280: 280px;
@size-300: 300px;
@size-320: 320px;
@size-360: 360px;
@size-400: 400px;
@stroke-0: 0px;
@stroke-1: 1px;
@stroke-2: 2px;
@stroke-4: 4px;

.transition() {
  transition-property: @amination-transition-transition-property;
  transition-timing-function: @amination-transition-transition-timing-function;
  transition-duration: @amination-transition-transition-duration;
}
.h64() {
  font-size: @font-h64-font-size;
  line-height: @font-h64-line-height;
  font-weight: @font-h64-font-weight;
}
.h48() {
  font-size: @font-h48-font-size;
  line-height: @font-h48-line-height;
  font-weight: @font-h48-font-weight;
}
.h32() {
  font-size: @font-h32-font-size;
  line-height: @font-h32-line-height;
  font-weight: @font-h32-font-weight;
}
.h24() {
  font-size: @font-h24-font-size;
  line-height: @font-h24-line-height;
  font-weight: @font-h24-font-weight;
}
.h16() {
  font-size: @font-h16-font-size;
  line-height: @font-h16-line-height;
  font-weight: @font-h16-font-weight;
}
.h20() {
  font-size: @font-h20-font-size;
  line-height: @font-h20-line-height;
  font-weight: @font-h20-font-weight;
}
.t32() {
  font-size: @font-t32-font-size;
  line-height: @font-t32-line-height;
  font-weight: @font-t32-font-weight;
}
.t24() {
  font-size: @font-t24-font-size;
  line-height: @font-t24-line-height;
  font-weight: @font-t24-font-weight;
}
.t20() {
  font-size: @font-t20-font-size;
  line-height: @font-t20-line-height;
  font-weight: @font-t20-font-weight;
}
.t16() {
  font-size: @font-t16-font-size;
  line-height: @font-t16-line-height;
  font-weight: @font-t16-font-weight;
}
.t14() {
  font-size: @font-t14-font-size;
  line-height: @font-t14-line-height;
  font-weight: @font-t14-font-weight;
}
.t12() {
  font-size: @font-t12-font-size;
  line-height: @font-t12-line-height;
  font-weight: @font-t12-font-weight;
}
.tm32() {
  font-size: @font-tm32-font-size;
  line-height: @font-tm32-line-height;
  font-weight: @font-tm32-font-weight;
}
.tm24() {
  font-size: @font-tm24-font-size;
  line-height: @font-tm24-line-height;
  font-weight: @font-tm24-font-weight;
}
.tm20() {
  font-size: @font-tm20-font-size;
  line-height: @font-tm20-line-height;
  font-weight: @font-tm20-font-weight;
}
.tm16() {
  font-size: @font-tm16-font-size;
  line-height: @font-tm16-line-height;
  font-weight: @font-tm16-font-weight;
}
.tm14() {
  font-size: @font-tm14-font-size;
  line-height: @font-tm14-line-height;
  font-weight: @font-tm14-font-weight;
}
.tm12() {
  font-size: @font-tm12-font-size;
  line-height: @font-tm12-line-height;
  font-weight: @font-tm12-font-weight;
}
.desktop(@content) {
  @media all and (min-width: @screen-desktop-min) {
    @content;
  }
}
.mobile(@content) {
  @media all and (max-width: @screen-mobile-max) {
    @content;
  }
}
.xl(@content) {
  @media all and (min-width: @screen-xl-min) {
    @content;
  }
}
.lg(@content) {
  @media all and (max-width: @screen-lg-max) and (min-width: @screen-lg-min) {
    @content;
  }
}
.md(@content) {
  @media all and (max-width: @screen-md-max) and (min-width: @screen-md-min) {
    @content;
  }
}
.sm(@content) {
  @media all and (max-width: @screen-sm-max) and (min-width: @screen-sm-min) {
    @content;
  }
}
.xs(@content) {
  @media all and (max-width: @screen-xs-max) {
    @content;
  }
}