back to main Purchase

Miscellaneous

src/scss/_core/utils/_misc_cursor.scss

src/scss/_core/utils/_misc_flex.scss

src/scss/_core/utils/_misc_grid.scss

src/scss/_core/utils/_misc_line_height.scss

src/scss/_core/utils/_misc_table.scss

src/scss/_core/utils/_misc_text_and_link.scss

src/scss/_core/utils/_misc_various.scss

src/scss/_core/utils/_misc_zindex.scss

Misc

Class Description Quick Example
Text & Links
.link-muted .text-gray-* .article-format

.text-gray-[100|200|300|400|500|600|700|800|900]

.article-format dedicated class/wrapper for blogs/articles where content is pushed from database/editor. Will add some slightly spacings for a better content look because most html editors will not format the content adding bootstrap dedicated classes. Used by blog, as example.

.link-muted

.text-gray-100

.text-gray-200

.text-gray-300

.text-gray-400

.text-gray-500

.text-gray-600

.text-gray-700

.text-gray-800

.text-gray-900

Pulse animation
.animate-pulse .animate-pulse-primary .animate-pulse-danger .animate-pulse-warning .animate-pulse-success

Useful to emphasizing alerts.







Z-Index
.z-index-n1 .z-index-*

.z-index-n1 = z-index: -1 !important; (negative)
.z-index-[0|1|2|3|4|5|6|7|8|9|10|99|100|1000|9999]

Line Height
.line-height-* .z-index-*

.line-height-[0|1|inherit]

Bordered Grid
.row-grid .ul-grid
Col 1
Col 2
Col 3
Bordered Grid : Separator
.row.col-border .row.col-border-sm .row.col-border-md .row.col-border-lg
Col 1
Col 2
Col 3
Grid : 5 Columns
.col-5th .col-sm-5th .col-md-5th .col-lg-5th .col-xl-5th
Col 1
Col 2
Col 3
Col 4
Col 5
Cursor
.cursor-pointer .cursor-text .cursor-move

Curosrs

.cursor-pointer
.cursor-text
.cursor-move
Arrows
.arrow.arrow-top .arrow.arrow-bottom .arrow.arrow-left .arrow.arrow-right
.arrow.arrow-start .arrow.arrow-end
.arrow-center .arrow-lg

Note: Arrows are not part of Smarty utility. Are part of Components (src/scss/_core/components/), but added here because is more conveninent.

.position-relative is required to parent container.

Arrows color is changed using .border-* utility classes to match any .bg-*

Additionally, can be slightly positioned using .mt-* if margin top is needed.

Example:
<i class="arrow arrow-lg arrow-top arrow-center border-light"></i>

.arrow-left and .arrow-end are used for both: RTL & LTR. See RTL section to understand.

default, all arrows
.arrow-lg, all arrows
.arrow .arrow-start .border-primary-soft
.arrow .arrow-lg .arrow-bottom .border-warning-soft
.arrow .arrow-lg .arrow-top .border-pink

Grid

Class Description
.grid-notebook

SCSS: _core/utils/_misc_grid.scss
A single CSS class, dynamic adjusted according to $font-size-base variable (body font-size)
Can be added to an editable div, textarea (including using .medium-editor). 

                        
                          <!-- data-btn-*="false" = medium editor disabled headings -->
                          <textarea style="max-width:600px;min-height:50vh;" class="medium-editor grid-notebook shadow-primary-xs rounded border mx-auto w-100"
                            data-btn-h1="false" 
                            data-btn-h5="false" 
                            data-btn-h6="false">
                            Lorem Ipsum
                          </textarea>