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