1.3.0 • Published 5 years ago
@dynamicic/styles v1.3.0
Dynamic Stylesheet
Re-usable scss blocks for overall project layouts and styling in our projects.
Table of Contents:
- Positioning + Display/Position + Flex Grid + Text Align/Floats/Vertical Align + Margins + Padding
Styles + Cards/Forms + Buttons + SideNav + Help Text + Help Icon + Form Section Title + Material Dialog
Positioning
Display/Position
| Class | CSS Property |
|---|---|
.dyn-block | display: block; |
.dyn-inline-block | display: inline-block; |
.dyn-flex | display: flex; |
.dyn-relative | position: relative; |
.dyn-absolute | position: absolute; |
.dyn-fixed | position: fixed; |
Flex Grid (.dyn-flex required)
| Class | CSS Property |
|---|---|
.dyn-flex-start | justify-content: flex-start; |
.dyn-flex-end | justify-content: flex-end; |
.dyn-space-between | justify-content: space-between; |
.dyn-space-around | justify-content: space-around; |
.dyn-space-evenly | justify-content: space-evenly; |
Text Align/Floats/Vertical Align
| Class | CSS Property |
|---|---|
.dyn-text-center | text-algin: center; |
.dyn-text-left | text-align: left; |
.dyn-text-right | text-align: right; |
.dyn-pull-left | float: left; |
.dyn-pull-right | float: right; |
.dyn-vertical-top | vertical-align: top; |
.dyn-vertical-middle | vertical-align: middle; |
Text Align/Floats/Vertical Align
| Class | CSS Property |
|---|---|
.dyn-text-center | text-algin: center; |
.dyn-text-left | text-align: left; |
.dyn-text-right | text-align: right; |
.dyn-pull-left | float: left; |
.dyn-pull-right | float: right; |
.dyn-vertical-top | vertical-align: top; |
.dyn-vertical-middle | vertical-align: middle; |
Margins
Possible Values: 0, 5, 10, 15, 20, 25, 30, 50, 75, 100
| Class | CSS Property |
|---|---|
.dyn-m-0 | margin: 0; |
.dyn-m-t-0 | margin-top: 0; |
.dyn-m-b-0 | margin-bottom: 0; |
.dyn-m-l-0 | margin-left: 0; |
.dyn-m-r-0 | margin-right: 0; |
Padding
Possible Values: 0, 5, 10, 15, 20, 25, 30, 50, 75, 100
| Class | CSS Property |
|---|---|
.dyn-p-0 | padding: 0; |
.dyn-p-t-0 | padding-top: 0; |
.dyn-p-b-0 | padding-bottom: 0; |
.dyn-p-l-0 | padding-left: 0; |
.dyn-p-r-0 | padding-right: 0; |
Styles
Cards
.dyn-card ex.
<div class="dyn-card"></div>.dyn-form-card ex.
<div class="dyn-form-card">-- <div class="dyn-form-card-title">---- <div class="dyn-form-card-sub-title">---- </div>-- </div></div>
Buttons
- Rounded Button ( .dyn-rounded-btn / .dyn-rounded-btn.active)
+
<span class="dyn-rounded-btn"></span> - Text Button ( .dyn-text-btn )
+
<button mat-raised-button class="dyn-text-btn"></button> - Button no Shadow ( .dyn-no-shadow )
+
<button mat-raised-button class="dyn-no-shadow"></button> - Button with Animated Mat-Icon ( .dyn-hover-animated-icon )
+
<button mat-raised-button class="dyn-hover-animated-icon"></button>
Side Nav
- .dyn-sidenav
> `<div class="dyn-sidenav">` `--<ul>` `----<li class="active"></li>` `----<li></li>` `--</ul>` `</div>`
Help Text
- .dyn-help-text
Help Icon
- .dyn-button-help-icon
<mat-icon class="dyn-button-help-icon">help</mat-icon>
Form Section Title
- .dyn-form-section-title
Material Dialogs
- .dyn-dialog-p-0 = No Padding