Files
djangocms/static/admin/assets/pug/pages/theme/helper-classes.pug
T
2024-12-13 08:31:39 +07:00

596 lines
30 KiB
Plaintext

- var theme_customizer = true;
- var sidebar = true;
- var slick = true;
- var header_slider = true;
- var animate = true;
- var scrollbar = true;
- var height_equal = true;
doctype html
html(lang='en')
include ../../components/header-files
body
include ../../components/loader
include ../../components/taptop
// page-wrapper Start
#pageWrapper.page-wrapper.compact-wrapper
include ../../components/header
// Page Body Start
.page-body-wrapper
include ../../components/sidebar
.page-body
.container-fluid
.page-title
.row
.col-6
h4
| Helper Classes
.col-6
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
svg.stroke-icon
use(href='../assets/svg/icon-sprite.svg#stroke-home')
li.breadcrumb-item Ui Kits
li.breadcrumb-item.active Helper Classes
// Container-fluid starts
.container-fluid
.row
.col-12
.card
.card-header
h4 Borders And Displays
p.f-m-light.mt-1
| Use border utilities to add or remove an element's borders.
.card-body
.row.g-3
.col-xl-4.col-sm-6
.border-wrapper.h-100.border
h6.mb-3 Additive Border
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-light.border
| .border
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-light.border-top
| .border-top
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-light.border-bottom
| .border-bottom
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-light.border-start
| .border-start
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-light.border-end
| .border-end
.col-xl-4.col-sm-6
.border-wrapper.h-100.border
h6.mb-3 Subtractive Border
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-light.border.border-0
| .border-0
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-light.border.border-top-0
| .border-top-0
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-light.border.border-end-0
| .border-end-0
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-light.border.border-bottom-0
| .border-bottom-0
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-light.border.border-start-0
| .border-start-0
.col-xl-4.col-sm-12
.border-wrapper.h-100.border
h6.mb-3 Additive Radius
.d-flex.align-items-center.mb-2.gap-2
.helper-radius.radius-wrapper.rounded
| .rounded
.d-flex.align-items-center.mb-2.gap-2
.helper-radius.radius-wrapper.rounded-top
| .rounded-top
.d-flex.align-items-center.mb-2.gap-2
.helper-radius.radius-wrapper.rounded-end
| .rounded-end
.d-flex.align-items-center.mb-2.gap-2
.helper-radius.radius-wrapper.rounded-bottom
| .rounded-bottom
.d-flex.align-items-center.mb-2.gap-2
.helper-radius.radius-wrapper.rounded-start
| .rounded-start
.d-flex.align-items-center.mb-2.gap-2
.helper-radius.radius-wrapper.rounded-pill
| .rounded-pill
.d-flex.align-items-center.mb-2.gap-2
.helper-radius.radius-wrapper.rounded-circle
| .rounded-circle
.d-flex.align-items-center.mb-2.gap-2
.helper-radius.radius-wrapper.rounded-0
| .rounded-0
.col-12
.card
.card-header
h4 Styles In Borders
p.f-m-light.mt-1
| Use the different styles of borders like:
code border radius/border-color/border-width
| . Use of any components.
.card-body
.row.g-3
.col-xxl-3.col-sm-6
.border-wrapper.h-100.alert-light-light.dark-helper
h6.mb-3 Custom Border-radius Class
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-0.bg-light.border
span .b-r-0
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-1.bg-light.border
span .b-r-1
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-2.bg-light.border
span .b-r-2
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-3.bg-light.border
span .b-r-3
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-4.bg-light.border
span .b-r-4
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-5.bg-light.border
span .b-r-5
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-6.bg-light.border
span .b-r-6
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-7.bg-light.border
span .b-r-7
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-8.bg-light.border
span .b-r-8
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-9.bg-light.border
span .b-r-9
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-10.bg-light.border
span .b-r-10
.col-xxl-3.col-sm-6
.border-wrapper.h-100.alert-light-light.dark-helper
h6.mb-3 Border Color
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-primary.border
span .border-primary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-secondary.border
span .border-secondary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-success.border
span .border-success
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-danger.border
span .border-danger
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-warning.border
span .border-warning
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-info.border
span .border-info
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-dark.border
span .border-dark
.col-xxl-3.col-sm-6
.border-wrapper.h-100.alert-light-light.dark-helper
h6.mb-3 Border-Width
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-1.border
span .border-1
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-2.border
span .border-2
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-3.border
span .border-3
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-4.border
span .border-4
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-5.border
span .border-5
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-6.border
span .border-6
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-7.border
span .border-7
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-8.border
span .border-8
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-9.border
span .border-9
.d-flex.align-items-center.mb-2.gap-2
.helper-box.border-10.border
span .border-10
.col-xxl-3.col-sm-6
.border-wrapper.alert-light-light.h-100.dark-helper
h6.mb-3 Text Colors
.d-flex.align-items-center.mb-2.gap-2
.helper-box.helper-text.border.txt-primary C
span .txt-primary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.helper-text.border.txt-secondary C
span .txt-secondary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.helper-text.border.txt-success C
span .txt-success
.d-flex.align-items-center.mb-2.gap-2
.helper-box.helper-text.border.txt-danger C
span .txt-danger
.d-flex.align-items-center.mb-2.gap-2
.helper-box.helper-text.border.txt-warning C
span .txt-warning
.d-flex.align-items-center.mb-2.gap-2
.helper-box.helper-text.border.txt-info C
span .txt-info
.d-flex.align-items-center.mb-2.gap-2
.helper-box.helper-text.border.txt-dark C
span .txt-dark
.d-flex.align-items-center.mb-2.gap-2
.helper-box.helper-text.border.txt-light.bg-dark C
span .txt-light
.col-12
.card
.card-header
h4 Background Colors
p.f-m-light.mt-1
| Use the
code .bg-*
| and
code .alert-light-*
| colors in cuba theme.Use of any components.
.card-body
.row.g-3
.col-xl-4.col-sm-6
.border-wrapper.h-100.border
h6.mb-3 Dark Background
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-primary
| .bg-primary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-secondary
| .bg-secondary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-success
| .bg-success
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-danger
| .bg-danger
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-warning
| .bg-warning
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-info
| .bg-info
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-dark
| .bg-dark
.d-flex.align-items-center.mb-2.gap-2
.helper-box.bg-light
| .bg-light
.col-xl-4.col-sm-6
.border-wrapper.h-100.border
h6.mb-3 Light Backgrounds
.d-flex.align-items-center.mb-2.gap-2
.helper-box.alert-light-primary
| .alert-light-primary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.alert-light-secondary
| .alert-light-secondary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.alert-light-success
| .alert-light-success
.d-flex.align-items-center.mb-2.gap-2
.helper-box.alert-light-danger
| .alert-light-danger
.d-flex.align-items-center.mb-2.gap-2
.helper-box.alert-light-warning
| .alert-light-warning
.d-flex.align-items-center.mb-2.gap-2
.helper-box.alert-light-info
| .alert-light-info
.d-flex.align-items-center.mb-2.gap-2
.helper-box.alert-light-dark
| .alert-light-dark
.d-flex.align-items-center.mb-2.gap-2
.helper-box.alert-light-light
| .alert-light-light
.col-xl-4.col-sm-12
.border-wrapper.h-100.border
h6.mb-3 Extended Background Colors
.d-flex.align-items-center.mb-2.gap-2
.helper-box.light-card
| .light-card
.d-flex.align-items-center.mb-2.gap-2
.helper-box.light-background.border
| .light-background
.col-12
.card
.card-header
h4 Border Color
p.f-m-light.mt-1
| Use the
code .b-*/.b-t-*/.b-b-*/.b-l-*/.b-r-*
| class for borders.
.card-body
.gradient-border
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-primary.border.fill-wrapper
| .b-primary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-t-primary.border.fill-wrapper
| .b-t-primary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-b-primary.border.fill-wrapper
| .b-b-primary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-l-primary.border.fill-wrapper
| .b-l-primary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-primary.border.fill-wrapper
| .b-r-primary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-secondary.border.fill-wrapper
| .b-secondary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-t-secondary.border.fill-wrapper
| .b-t-secondary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-b-secondary.border.fill-wrapper
| .b-b-secondary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-l-secondary.border.fill-wrapper
| .b-l-secondary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-secondary.border.fill-wrapper
| .b-r-secondary
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-success.border.fill-wrapper
| .b-success
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-t-success.border.fill-wrapper
| .b-t-success
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-b-success.border.fill-wrapper
| .b-b-success
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-l-success.border.fill-wrapper
| .b-l-success
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-success.border.fill-wrapper
| .b-r-success
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-danger.border.fill-wrapper
| .b-danger
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-t-danger.border.fill-wrapper
| .b-t-danger
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-b-danger.border.fill-wrapper
| .b-b-danger
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-l-danger.border.fill-wrapper
| .b-l-danger
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-danger.border.fill-wrapper
| .b-r-danger
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-warning.border.fill-wrapper
| .b-warning
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-t-warning.border.fill-wrapper
| .b-t-warning
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-b-warning.border.fill-wrapper
| .b-b-warning
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-l-warning.border.fill-wrapper
| .b-l-warning
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-warning.border.fill-wrapper
| .b-r-warning
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-info.border.fill-wrapper
| .b-info
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-t-info.border.fill-wrapper
| .b-t-info
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-b-info.border.fill-wrapper
| .b-b-info
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-l-info.border.fill-wrapper
| .b-l-info
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-info.border.fill-wrapper
| .b-r-info
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-dark.border.fill-wrapper
| .b-dark
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-t-dark.border.fill-wrapper
| .b-t-dark
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-b-dark.border.fill-wrapper
| .b-b-dark
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-l-dark.border.fill-wrapper
| .b-l-dark
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-dark.border.fill-wrapper
| .b-r-dark
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-light.border.fill-wrapper
| .b-light
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-t-light.border.fill-wrapper
| .b-t-light
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-b-light.border.fill-wrapper
| .b-b-light
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-l-light.border.fill-wrapper
| .b-l-light
.d-flex.align-items-center.mb-2.gap-2
.helper-box.b-r-light.border.fill-wrapper
| .b-r-light
.col-xl-6
.card.height-equal
.card-header
h4 Images Sizes
p.f-m-light.mt-1
| Use the width and height of images class like:
code .img-*
| and
code .img-h-*
| .
.card-body
.gradient-border.gap-3
img.img-10.img-h-10(src="../assets/images/blog/comment.jpg", alt="img-size-10")
img.img-20.img-h-20(src="../assets/images/blog/comment.jpg", alt="img-size-20")
img.img-30.img-h-30(src="../assets/images/blog/comment.jpg", alt="img-size-30")
img.img-40.img-h-40(src="../assets/images/blog/comment.jpg", alt="img-size-40")
img.img-50.img-h-50(src="../assets/images/blog/comment.jpg", alt="img-size-50")
img.img-60.img-h-60(src="../assets/images/blog/comment.jpg", alt="img-size-60")
img.img-70.img-h-70(src="../assets/images/blog/comment.jpg", alt="img-size-70")
img.img-80.img-h-80(src="../assets/images/blog/comment.jpg", alt="img-size-80")
img.img-90.img-h-90(src="../assets/images/blog/comment.jpg", alt="img-size-90")
img.img-100.img-h-100(src="../assets/images/blog/comment.jpg", alt="img-size-100")
.col-xl-6
.card.height-equal
.card-header
h4 Font-Style
p.f-m-light.mt-1
| Use the font-style like:
code .f-s-* [normal/italic/oblique/initial/inherit]
| .
.card-body
p.f-s-normal
| This is a .f-s-normal font-style
p.f-s-italic
| This is a .f-s-italic font-style
p.f-s-oblique
| This is a .f-s-oblique font-style
p.f-s-initial
| This is a .f-s-initial font-style
p.f-s-inherit
| This is a .f-s-inherit font-style
.col-xl-6
.card.height-equal
.card-header
h4 Font Weight
p.f-m-light.mt-1
| Use the font-weight classes like:
code .f-w-* [100/300/400/600/700/900]
.card-body
.d-flex.align-items-center.mb-2.gap-2
.f-w-100
| You can set light font weight heading .f-w-100
.d-flex.align-items-center.mb-2.gap-2
.f-w-300
| You can set light font weight heading .f-w-300
.d-flex.align-items-center.mb-2.gap-2
.f-w-400
| You can set light font weight heading .f-w-400
.d-flex.align-items-center.mb-2.gap-2
.f-w-600
| You can set bolder font weight heading .f-w-600
.d-flex.align-items-center.mb-2.gap-2
.f-w-700
| You can set bold font weight heading .f-w-700
.d-flex.align-items-center.mb-2.gap-2
.f-w-900
| You can set bold font weight heading .f-w-900
.col-xl-6
.card.height-equal
.card-header
h4 Text Colors
p.f-m-light.mt-1
| Use the text color for
code .font-*
| class.
.card-body
.d-flex.align-items-center.mb-2.gap-2
.font-primary
| This is a font-primary text used class as .font-primary
.d-flex.align-items-center.mb-2.gap-2
.font-secondary
| This is a font-secondary text used class as .font-secondary
.d-flex.align-items-center.mb-2.gap-2
.font-success
| This is a font-success text used class as .font-success
.d-flex.align-items-center.mb-2.gap-2
.font-danger
| This is a font-danger text used class as .font-danger
.d-flex.align-items-center.mb-2.gap-2
.font-warning
| This is a font-warning text used class as .font-warning
.d-flex.align-items-center.mb-2.gap-2
.font-info
| This is a font-info text used class as .font-info
.d-flex.align-items-center.mb-2.gap-2
.font-dark
| This is a font-dark text used class as .font-dark
.col-12
.card
.card-header
h4 Font Sizes
p.f-m-light.mt-1
| Use the font-size for
code .f-* [14/16/18/20/22/24/26/28/30/32/34/36/38/40]
| .
.card-body
.gradient-border
.font-wrapper.border
.f-14
| Font-size .f-14
.font-wrapper.border
.f-16
| Font-size .f-16
.font-wrapper.border
.f-18
| Font-size .f-18
.font-wrapper.border
.f-20
| Font-size .f-20
.font-wrapper.border
.f-22
| Font-size .f-22
.font-wrapper.border
.f-24
| Font-size .f-24
.font-wrapper.border
.f-26
| Font-size .f-26
.font-wrapper.border
.f-28
| Font-size .f-28
.font-wrapper.border
.f-30
| Font-size .f-30
.font-wrapper.border
.f-32
| Font-size .f-32
.font-wrapper.border
.f-34
| Font-size .f-34
.font-wrapper.border
.f-36
| Font-size .f-36
.font-wrapper.border
.f-38
| Font-size .f-38
.font-wrapper.border
.f-40
| Font-size .f-40
// Container-fluid Ends
include ../../components/footer
include ../../components/footer-files