transferz-fe-component-library v1.42.2
FE components library
Components included
- Button
- Icon
- Typography
Variable values
Colors
These colors define the theme, and are used in all generated classes related to CSS properties that use color values.
BLACK & GREY
- $black: #000000;
- $grey-3: #a1a1a1;
- $grey-2: #e0e0e0;
- $grey-1: rgba(230, 230, 230);
ASPHALT
- $asphalt-7: #7e8a96;
- $asphalt-6: #38414a;
- $asphalt-5: #5e6d7c;
- $asphalt-4: #afb6be;
- $asphalt-3: #dfe2e5;
- $asphalt-2: #eff0f2;
- $asphalt-1: #f7f8f8;
ATLANTIS
- $atlantis-5: #88b537;
- $atlantis-4: #97c93d;
- $atlantis-3: #cbe49e;
- $atlantis-2: #eaf4d8;
- $atlantis-1: #f5faec;
BLUE
- $blue-5: #0083a8;
- $blue-4: #0092bb;
- $blue-3: #80c9dd;
- $blue-2: #cce9f1;
- $blue-1: #e6f4f8;
RED
- $red-5: #d45b43;
- $red-4: #ec654a;
- $red-3: #f6b2a5;
- $red-2: #fbe0db;
- $red-1: #fdf0ed;
YELLOW
- $yellow-5: #e6bb30;
- $yellow-4: #ffd035;
- $yellow-3: #ffe89a;
- $yellow-2: #fff6d7;
- $yellow-1: #fffaeb;
Generated classes
Color related classes
For every color variable listed above, there are few classes generated, each for a specific CSS rule that's related to a color value.
.color-#{$color-name}, .#{$color-name} {
color: $color;
}
.bg-color-#{$color-name}, .bg-#{$color-name} {
background-color: $color;
}
.border-color-#{$color-name}, .border-#{$color-name} {
border-color: $color;
}
Display variant classes
For CSS display
rule there are some generated classes described below.
Available variables are: 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'none'
;
.display-#{$value}, .d-#{$value} {
display: $value;
}
Flexbox related classes
There are some variables that define available combinations for generated classes described below.
Available options for flex-direction
are 'row', 'row-reverse', 'column', 'column-reverse'
;
.flex-direction-#{$direction}, .flex-#{$direction} {
flex-direction: $direction;
}
Available options for justify-content
are 'flex-start', 'flex-end', 'center', 'space-between', 'space-evenly', 'space-between'
;
.justify-content-#{$value}, .justify-#{$value} {
justify-content: $value;
}
Available options for align-items
and align-self
are 'flex-start', 'flex-end', 'center', 'stretch'
;
.align-items-#{$value}, .align-#{$value} {
align-items: $value;
}
.align-self-#{$value}, .self-#{$value} {
align-self: $value;
}
Position variant classes
For CSS position
rule there are some generated classes described below.
Available variables are: 'static', 'relative', 'absolute', 'fixed'
;
.position-#{$value}, .p-#{$value} {
position: $value;
}
Position top, right, bottom & left variant classes
For CSS position
rule there are some generated classes described below.
Available values are: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
;
.top-#{$size}-perc,
.top-#{$size} {
top: #{$size}%;
}
.right-#{$size}-perc,
.right-#{$size} {
right: #{$size}%;
}
.bottom-#{$size}-perc,
.bottom-#{$size} {
bottom: #{$size}%;
}
.left-#{$size}-perc,
.left-#{$size} {
left: #{$size}%;
}
Center element
For centering elements there are some generated classes described below.
CENTER ABSOLUTE HORIZONTALY
.center-a-h {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
CENTER ABSOLUTE VERTICALLY
.center-a-v {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
CENTER ABSOLUTE BOTH
.center-a-b {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Grid system classes
Grid system contains generated classes that help in development of the layout, affecting the position, size and inter-relations of components in the flexbox grid.
Grid is based on the system of 12 columns, which represent the full width/height, that is 100% of available space.
Available variables are: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
;
.width-#{$size}, .w-#{$size} {
width: calc(100% / 12 * #{$size});
}
.max-width-#{$size}, .max-w-#{$size} {
max-width: calc(100% / 12 * #{$size});
}
.min-width-#{$size}, .min-w-#{$size} {
min-width: calc(100% / 12 * #{$size});
}
.height-#{$size}, .h-#{$size} {
height: calc(100% / 12 * #{$size});
}
.max-height-#{$size}, .max-h-#{$size} {
max-height: calc(100% / 12 * #{$size});
}
.min-height-#{$size}, .min-h-#{$size} {
min-height: calc(100% / 12 * #{$size});
}
.grow-#{$size}, .flex-grow-#{$size} {
flex-grow: $size;
}
.shrink-#{$size}, .flex-shrink-#{$size} {
flex-shrink: $size;
}
.basis-#{$size}, .flex-basis-#{$size} {
flex-basis: $size;
}
Margin & padding classes
For CSS margin
and padding
rules, with all their variants, there are some generated classes described below.
Available variables are from 0 - 100.
.padding-#{$size}, .p-#{$size} {
padding: #{$size}px;
}
.padding-vertical-#{$size}, .p-v-#{$size} {
padding: #{$size}px 0;
}
.padding-horizontal-#{$size}, .p-h-#{$size} {
padding: 0 #{$size}px;
}
.padding-left-#{$size}, .p-l-#{$size} {
padding-left: #{$size}px;
}
.padding-right-#{$size}, .p-r-#{$size} {
padding-right: #{$size}px;
}
.padding-top-#{$size}, .p-t-#{$size} {
padding-top: #{$size}px;
}
.padding-bottom-#{$size}, .p-b-#{$size} {
padding-bottom: #{$size}px;
}
.margin-#{$size}, .m-#{$size} {
margin: #{$size}px;
}
.margin-vertical-#{$size}, .m-v-#{$size} {
margin: #{$size}px 0;
}
.margin-horizontal-#{$size}, .m-h-#{$size} {
margin: 0 #{$size}px;
}
.margin-left-#{$size}, .m-l-#{$size} {
margin-left: #{$size}px;
}
.margin-right-#{$size}, .m-r-#{$size} {
margin-right: #{$size}px;
}
.margin-top-#{$size}, .m-t-#{$size} {
margin-top: #{$size}px;
}
.margin-bottom-#{$size}, .m-b-#{$size} {
padding-bottom: #{$size}px;
}
Opacity value classes
For CSS opacity
rule there are some generated classes described below.
Available variables are: 0, 0-2, 0-4, 0-5, 0-6, 0-8, 0-9, 0-95, 1
;
.opacity-#{$name} {
opacity: $value;
}
Z-index value classes
For CSS z-index
rule there are some generated classes described below.
Available values are: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 99, 999
;
.z-index-#{$value}, .z-#{$value} {
opacity: $value;
}
Border radius value classes
For CSS border-radius
rule there are some generated classes described below.
Available values are: 5, 8, 10, 12, 15, 16, 20, 24, 25, 28, 30, 35
;
.border-radius-#{$size},
.b-r-#{$size} {
border-radius: #{$size}px;
}
.border-radius-50-perc,
.b-r-50-perc {
border-radius: 50%;
}
Commit Message Format
<type>: <summary>
│ │
│ └─⫸ Summary in present tense. Not capitalized. No period at the end.
│
│
└─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|test
The <type>
and <summary>
fields are mandatory.
Type
Must be one of the following:
- build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
- ci: Changes to our CI configuration files and scripts (example scopes: Circle, BrowserStack, SauceLabs)
- docs: Documentation only changes
- feat: A new feature
- fix: A bug fix
- perf: A code change that improves performance
- refactor: A code change that neither fixes a bug nor adds a feature
- test: Adding missing tests or correcting existing tests
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago