Standardowe zmienne CSS w Style Books w Liferay

Spis nazw standardowych zmiennych CSS pochodzących ze Style Book’ów w Liferay.

Color System

Brand Colors

Brand Color 1: --brand-color-1
Brand Color 2: --brand-color-2
Brand Color 3: --brand-color-3
Brand Color 4: --brand-color-4

Grays

White: --white
Gray 100: --gray-100
Gray 200: --gray-200
Gray 300: --gray-300
Gray 400: --gray-400
Gray 500: --gray-500
Gray 600: --gray-600
Gray 700: --gray-700
Gray 800: --gray-800
Gray 900: --gray-900
Black: --black

Theme Colors

Primary: --primary
Secondary: --secondary
Success: --success
Info: --info
Warning: --warning
Danger: --danger
Grey Dark: --grey-dark
Dark: --dark
Light: --light
Lighter: --lighter

Spacing

Spacing

Spacer 0: --spacer-0
Spacer 1: --spacer-1
Spacer 2: --spacer-2
Spacer 3: --spacer-3
Spacer 4: --spacer-4
Spacer 5: --spacer-5
Spacer 6: --spacer-6
Spacer 7: --spacer-7
Spacer 8: --spacer-8
Spacer 9: --spacer-9
Spacer 10: --spacer-10

General

Body

Body Background: --body-bg
Body Color: --body-color

Borders

Border Radius: --border-radius
Border Radius Small: --border-radius-sm
Border Radius Large: --border-radius-lg
Border Radius Circle: --border-radius-circle
Rounded Pill: --rounded-pill

Box Shadows

Box Shadow: --box-shadow
Box Shadow Small: --box-shadow-sm
Box Shadow Large: --box-shadow-lg

Aspect Ratios

Aspect Ratio 1/1: --aspect-ratio
Aspect Ratio 4/3: --aspect-ratio-4-to-3
Aspect Ratio 8/3: --aspect-ratio-8-to-3
Aspect Ratio 16/9: --aspect-ratio-16-to-9

Tansitions

Transition Collapse: --transition-collapse
Transition Fade: --transition-fade

Layout

Container Max Widths

Small: --container-max-sm
Medium: --container-max-md
Large: --container-max-lg
Extra Large: --container-max-xl

Typography

Font Family

Font Family Sans Serif: --font-family-sans-serif
Font Family Monospace: -- font-family-monospace
Font Family Base: --font-family-base

Font Size

Font Size Base: --font-size-base
Font Size Small: --font-size-sm
Font Size Large: --font-size-lg

Font Weight

Font Weight Lighter: --font-weight-lighter
Font Weight Light: --font-weight-light
Font Weight Normal: --font-weight-normal
Font Weight Semi Bold: --font-weight-semi-bold
Font Weight Bold: --font-weight-bold
Font Weight Bolder: --font-weight-bolder

Headings

Heading 1 Font Size: --h1-font-size
Heading 2 Font Size: --h2-font-size
Heading 3 Font Size: --h3-font-size
Heading 4 Font Size: --h4-font-size
Heading 5 Font Size: --h5-font-size
Heading 6 Font Size: --h6-font-size

Displays

Display 1 Size: --display1-size
Display 2 Size: --display2-size
Display 3 Size: --display3-size
Display 4 Size: --display4-size
Display 1 Weight: --display1-weight
Display 2 Weight: --display2-weight
Display 3 Weight: --display3-weight
Display 4 Weight: --display4-weight
Display Line Height: --display-line-height

Other

Lead Font Size: --lead-font-size
Lead Font Weight: --lead-font-weight
Text Muted: --text-muted
Blockquote Small Color: --blockquote-small-color
Blockquote Small Font Size: --blockquote-small-font-size
Separation Border Color: --hr-border-color
Separation Border Width: --hr-border-width
Separation Border Margin Y: --hr-border-margin-y

Buttons

Button Primary

Background Color: --btn-primary-background-color
Border Color: --btn-primary-border-color
Color: --btn-primary-color
Hover Background Color: --btn-primary-background-color
Hover Border Color: --btn-primary-hover-border-color
Hover Color: --btn-primary-hover-color

Button Outline Primary

Border Color: --btn-outline-primary-border-color
Color: --btn-outline-primary-color
Hover Background Color: --btn-outline-primary-hover-background-color
Hover Border Color: --btn-outline-primary-hover-border-color
Hover Color: --btn-outline-primary-hover-color

Button Secondary

Background Color: --btn-secondary-background-color
Border Color: --btn-secondary-border-color
Color: --btn-secondary-color
Hover Background Color: --btn-secondary-hover-background-color
Hover Border Color: --btn-secondary-hover-border-color
Hover Color: --btn-secondary-hover-color

Button Outline Secondary

Border Color: --btn-outline-secondary-border-color
Color: --btn-outline-secondary-color
Hover Background Color: --btn-outline-secondary-hover-background-color
Hover Border Color: --btn-outline-secondary-hover-border-color
Hover Color: --btn-outline-secondary-hover-color

Button Link

Color: --btn-link-color
Hover Color: --btn-link-hover-color