diff options
Diffstat (limited to 'css3/framework/helpers.css')
-rw-r--r-- | css3/framework/helpers.css | 127 |
1 files changed, 127 insertions, 0 deletions
diff --git a/css3/framework/helpers.css b/css3/framework/helpers.css new file mode 100644 index 00000000..47c14126 --- /dev/null +++ b/css3/framework/helpers.css @@ -0,0 +1,127 @@ +/* bootstrap 4 inspired css helpers */ + +.d-none { display: none !important; } +.d-block { display: block !important; } +.d-inline { display: block !important; } +.d-flex { display: flex !important; } + +.single-line { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } +.text-left { text-align: left; } +.text-right { text-align: right; } +.tabular-nums { font-variant-numeric: tabular-nums; } + +.pull-right { float: right; } + +.flex-expand { flex: 1; } +.jc-start { justify-content: flex-start; } +.jc-end { justify-content: flex-end; } +.jc-center { justify-content: center; } +.jc-between { justify-content: space-between; } +.align-items-center { align-items: center; } + +.img--fit { + width: 100%; + height: auto; +} + +.img--rounded { + border-radius: 4px; +} + +.elevation-1 { + box-shadow: 0 15px 35px rgba(50, 50, 93, 0.18), 0 5px 15px rgba(0, 0, 0, 0.18), 0 1px 5px 0 rgba(0,0,0,0.1); +} + +.svg-icon { + display: inline-block; + font-size: inherit; + height: 1em; + overflow: visible; + vertical-align: -.125em; +} + +.semi-muted { color: #3f3f3f; } +.muted { color: #6b6b6b; } + +.opacity-muted { opacity: 0.6; } + +.semi-bold { font-weight: 500; } +.bold { font-weight: bold; } + +.fs-body { font-size: 1rem; } +.fs-medium { font-size: 0.875rem; } + +.mx-0 { margin-left: 0 !important; margin-right: 0 !important; } +.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } +.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } +.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; } +.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } +.mx-5 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; } + +.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } +.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } +.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } +.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } +.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } +.my-5 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } + +.mb-0 { margin-bottom: 0 !important; } +.mb-1 { margin-bottom: 0.25rem !important; } +.mb-2 { margin-bottom: 0.5rem !important; } +.mb-3 { margin-bottom: 1rem !important; } +.mb-4 { margin-bottom: 1.5rem !important; } +.mb-5 { margin-bottom: 2.5rem !important; } + +.mt-0 { margin-top: 0 !important; } +.mt-1 { margin-top: 0.25rem !important; } +.mt-2 { margin-top: 0.5rem !important; } +.mt-3 { margin-top: 1rem !important; } +.mt-4 { margin-top: 1.5rem !important; } +.mt-5 { margin-top: 2.5rem !important; } + +.ml-0 { margin-left: 0 !important; } +.ml-1 { margin-left: 0.25rem !important; } +.ml-2 { margin-left: 0.5rem !important; } +.ml-3 { margin-left: 1rem !important; } +.ml-4 { margin-left: 1.5rem !important; } +.ml-5 { margin-left: 2.5rem !important; } + +.mr-0 { margin-right: 0 !important; } +.mr-1 { margin-right: 0.25rem !important; } +.mr-2 { margin-right: 0.5rem !important; } +.mr-3 { margin-right: 1rem !important; } +.mr-4 { margin-right: 1.5rem !important; } +.mr-5 { margin-right: 2.5rem !important; } + +@media (min-width: 576px) { + .d-sm-block { display: block !important; } + .d-sm-inline { display: inline !important; } + .d-sm-flex { display: flex !important; } + .d-sm-none { display: none !important; } + .text-sm-right { text-align: right; } +} +@media (min-width: 768px) { + .d-md-block { display: block !important; } + .d-md-inline { display: inline !important; } + .d-md-flex { display: flex !important; } + .d-md-none { display: none !important; } + .single-line-md { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } +} +@media (min-width: 992px) { + .d-lg-block { display: block !important; } + .d-lg-inline { display: inline !important; } + .d-lg-flex { display: flex !important; } + .d-lg-none { display: none !important; } +} +@media (min-width: 1200px) { + .d-xl-block { display: block !important; } + .d-xl-inline { display: inline !important; } + .d-xl-flex { display: flex !important; } + .d-xl-none { display: none !important; } +} +@media (min-width: 1360px) { + .d-xxl-block { display: block !important; } + .d-xxl-inline { display: inline !important; } + .d-xxl-flex { display: flex !important; } + .d-xxl-none { display: none !important; } +} |