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