uix-kit
Version:
A free web kits for fast web design and development, compatible with Bootstrap v5.
2,192 lines (2,055 loc) • 604 kB
CSS
/*!
*
* DO NOT OVERRIDE THIS FILE.
* Generated with "npm run build"
*
* ## Project Name : Uix Kit
* ## Project Description : A free web kits for fast web design and development, compatible with Bootstrap v5.
* ## Project URL : https://uiux.cc
* ## Version : 5.4.3
* ## Based on : Uix Kit (https://github.com/xizon/uix-kit)
* ## Last Update : April 30, 2025
* ## Created by : UIUX Lab (https://uiux.cc) (uiuxlab@gmail.com)
* ## Released under the MIT license.
*
*/
@charset "UTF-8";
/**
TABLE OF CONTENTS
---------------------------
1.Basic
2.Brand
3.Bullet List
4.Entry
5.Footer
6.Header Area
7.Helper Classes
8.Basic Layout Styles
9.Loader
10.Mobile Menu
11.Navigation
12.Navs
13.Onepage Menu
14.Pagination
15.Ratios
16.Sidebar
17.Social Media Icons
18.Spacing
19.Tags
20.Typography
21.Video
22.Custom Core Scripts & Stylesheets
23.Accordion Background Images
24.Accordion
25.Advanced Slider (Basic)
26.Advanced Slider (Special Effects)
27.Ajax Page Loader (Loading A Page via Ajax Into Div)
28.Back to Top
29.Circle Layout
30.Dropdown Menu
31.Dropdown Menu 2 (Multi-level drop-down navigation)
32.Cascading DropDown List
33.Floating Side Element
34.Form Progress
35.Form
36.Form ( Layout )-
37.Form ( Material Design Theme )
38.Form ( 3rd Party Plugin )
39.Gallery
40.Hybrid Content Slider
41.Image Shapes
42.Infinite Scrolling Element
43.Lava-Lamp Style Menu
44.Cutom Light Box
45.Bulleted List
46.List of Posts
47.List of Split Posts
48.Full Width Column to Edge
49.Login Templates
50.Modal Dialog
51.Multiple Items Carousel
52.Parallax
53.Periodical Scroll
54.Pricing
55.Progress Bar
56.Progress Line
57.Show More Less
58.Sticky Elements
59.SVG Map
60.SVG Mask Slider
61.Swiper
62.3D Background
63.3D Carousel
64.3D Explosive Particle Slider
65.3D Liquid Scrollspy Slider
66.Table
67.Tabs
68.Team Focus
69.Text effect
70.Timeline
71.Toast
72.Vertical Menu
73.WordPress Core ( Do not use prefix "uix-" )
74.WordPress Blocks ( Do not use prefix "uix-" )
75.3rd Party Plugins
76.Badges
77.Blended Grid Layout
78.Breadcrumbs
79.Button
80.Cards
81.Badges
82.Coach Mark
83.Content Placeholder Animated
84.Dividing Line
85.Dotted Line
86.Equal-width Columns
87.Features
88.Footer Templates
89.Gallery Grid Layout
90.Heading
91.Image Animation
92.Brands List
93.Maintain Aspect Ratio List
94.Side by Side List
95.Side by Side List With Photo
96.Mouse Animation Scroll
97.Overlay
98.Ribbon
99.Separator of Rule With Text
100.Shape Animation
101.Comments ( Synchronize to WordPress's class name )
102.Editing Component
103.Striking
104.Team Fullwidth (Style using the Side by Side List With Photo module)
105.Team Gird
106.Testimonials Carousel
107.ToolTip
108.Wave Background
*/
/******/
/******/
/* must be placed in the first place */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
/******/
/******/
/* base */
/* ======================================================
<!-- Basic -->
/* ====================================================== */
::placeholder {
color: var(--uix-placeholder-text-color);
}
::selection,
::-moz-selection,
::-webkit-selection {
background: #1f1f1f;
color: #fff;
}
/* Avoid default scrollbar smooth effect */
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: inherit;
}
}
html,
body {
width: 100%;
height: 100%;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size: 16px; /* Required, global font size */
}
*,
*::before,
*::after {
box-sizing: border-box;
}
*,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
a {
margin: 0;
padding: 0;
}
body {
font-size: 1rem;
font-weight: 400;
line-height: 1.7142857143;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Helvetica Neue", Helvetica, "Microsoft YaHei", STXihei, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
color: var(--uix-primary-text-color);
background-color: var(--uix-primary-bg-color);
}
body.is-mobile {
padding-top: 0;
}
p,
pre,
table,
blockquote {
margin-bottom: 1.421875rem;
}
select {
max-width: 100%;
}
.wp-block-quote,
blockquote {
background: #fff;
border: 1px solid #F8F8F8 !important;
border-left: 5px solid var(--uix-highlight-color1) !important;
padding: 0 1.75rem 1.25rem !important;
margin-top: 1.421875rem !important;
line-height: 2;
font-size: 1rem;
}
.wp-block-quote::before,
blockquote::before {
color: var(--uix-highlight-color1);
content: open-quote;
font-size: 5.25rem;
line-height: 0.1;
margin-right: 0.21875rem;
vertical-align: -2.055rem;
font-family: sans-serif;
content: "“";
/*Unicode for Left Double Quote*/
}
strong {
font-weight: 600;
}
hr {
margin: 1.421875rem 0;
border-color: var(--uix-dividing-line-color);
background-color: var(--uix-dividing-line-color);
}
hr.black {
border-color: rgba(255, 255, 255, 0.1);
}
a img {
border: none;
}
img {
max-width: 100%;
}
iframe {
border: none !important;
}
code {
color: #c7254e;
background-color: #f9f2f4;
border-radius: 3px;
display: inline-block;
margin: 0 0.2rem;
padding: 0 0.4rem;
white-space: nowrap;
font-family: "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}
pre {
background: #fff;
white-space: pre;
word-wrap: break-word;
overflow: auto;
padding: 0;
margin: 1rem 0;
}
pre.uix-precode {
white-space: normal;
border: 1px solid #d9d9d9;
border-radius: 2px;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
pre.uix-precode label {
font-family: sans-serif;
font-weight: normal;
font-size: 0.8125rem;
position: absolute;
left: -5px;
top: 1rem;
text-align: center;
width: 60px;
user-select: none;
pointer-events: none;
color: #ddd;
}
pre.uix-precode code {
font-family: "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
display: block;
margin: 0 0 0 3rem;
padding: 1rem;
border-left: 1px solid #d9d9d9;
overflow-x: auto;
font-size: 0.8125rem;
line-height: 1.125rem;
color: #444;
background: #fff;
white-space: pre;
}
pre.uix-precode.uix-precode--nolebel label {
display: none;
}
pre.uix-precode.uix-precode--nolebel code {
margin: 0;
border: none;
}
figure {
position: relative;
}
figure figcaption {
position: absolute;
bottom: 0;
width: 100%;
max-height: 100%;
overflow: auto;
padding: 1.5rem 1rem 1rem;
color: #fff;
text-align: center;
font-size: 0.875rem;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent);
}
kbd {
--base-size-12: 0.75rem;
--base-size-16: 1rem;
--text-caption-size: 0.75rem;
--text-caption-lineHeight: calc(16/12);
--borderWidth-thin: max(1px, 0.0625rem);
--color-fg-subtle: #6e7781;
--borderRadius-small: 3px;
--borderRadius-medium: 6px;
--borderRadius-large: 12px;
--borderRadius-full: 100vh;
display: inline-grid;
width: auto;
height: var(--base-size-16, 16px);
padding: 0;
font-size: var(--text-caption-size, 12px);
line-height: var(--text-caption-lineHeight, 1.3333333333);
color: inherit;
vertical-align: baseline;
background: transparent;
border: var(--borderWidth-thin, 1px) solid var(--color-fg-subtle);
border-radius: var(--borderRadius-small, 3px);
box-shadow: none;
align-items: center;
justify-content: center;
}
/* ======================================================
<!-- Brand -->
/* ====================================================== */
.uix-brand {
float: left;
font-size: 1.3125rem;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
max-width: 95%;
overflow: hidden;
text-overflow: ellipsis;
}
.uix-brand img {
max-height: 50px;
margin-top: 0.75rem;
}
.uix-brand .uix-brand__description {
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
width: 90%;
line-height: 1.2;
font-weight: 100;
font-size: 0.75rem;
}
.uix-brand--mobile {
display: none;
}
@media all and (max-width: 768px) {
.uix-brand--mobile {
display: block;
text-align: center;
}
.uix-brand--mobile img {
max-width: 90%;
max-height: 100px;
margin: 20px auto;
}
.uix-brand img {
margin-bottom: 0.75rem;
}
}
/* ======================================================
<!-- Bullet List -->
/* ====================================================== */
/*
* 1. Normal List Styling
* 2. Normal Numbers Ordered List
* 3. Custom Circle Icons Ordered List
* 4. Big Numbers Ordered List
* 5. Step Timeline By Numbers
*/
ul,
ol {
list-style: none;
margin-bottom: 1.421875rem;
}
ul > li,
ol > li {
margin-bottom: 0;
transition: all 0.3s ease;
}
.uix-list::after {
content: "";
clear: both;
display: block;
}
/*
---------------------------
1. Normal List Styling
---------------------------
*/
ol.uix-list--normal,
ul.uix-list--normal,
.uix-list--normal ul,
.uix-list--normal ol {
display: block;
margin: 1.421875rem;
padding-left: 0.875rem;
}
ol.uix-list--normal ul,
ol.uix-list--normal ol,
ul.uix-list--normal ul,
ul.uix-list--normal ol,
.uix-list--normal ul ul,
.uix-list--normal ul ol,
.uix-list--normal ol ul,
.uix-list--normal ol ol {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
ul.uix-list--normal,
.uix-list--normal ul {
list-style-type: disc;
}
ol.uix-list--normal,
.uix-list--normal ol {
list-style-type: decimal;
}
/*-- Noemal List Effect by Default --*/
/* Compatible with Uix Shortcodes (WordPress Plugin) and Block Button Link */
.uix-list--normal a:not(.uix-sc-btn):not(.wp-block-button__link):not(.uix-btn) {
color: var(--uix-highlight-color1);
}
.uix-list--normal a:not(.uix-sc-btn):not(.wp-block-button__link):not(.uix-btn):hover {
color: var(--uix-highlight-color2);
text-decoration: underline;
}
.uix-list--normal a:not(.uix-sc-btn):not(.wp-block-button__link):not(.uix-btn):hover img {
text-decoration: none;
}
/*
---------------------------
2. Normal Numbers Ordered List
---------------------------
*/
ol.uix-list--numbered,
.uix-list--numbered ol {
list-style: none;
margin-left: 1rem;
counter-reset: line;
}
ol.uix-list--numbered > li,
.uix-list--numbered ol > li {
position: relative;
margin-bottom: 0.5rem;
margin-left: 0.5rem;
}
ol.uix-list--numbered > li::before,
.uix-list--numbered ol > li::before {
position: absolute;
left: -2.25em;
display: inline-block;
width: 22px;
height: 22px;
margin-right: 0.5em;
background-color: var(--uix-highlight-color1);
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 22px;
counter-increment: line;
content: "0" counter(line);
font-size: 0.75rem;
}
.uix-list--numbered.uix-list--numbered-1-digit > li::before {
content: counter(line);
}
/*
---------------------------
3. Custom Circle Icons Ordered List
---------------------------
*/
ol.uix-list--circle,
ul.uix-list--circle,
.uix-list--circle ol,
.uix-list--circle ul {
list-style: none;
margin-left: 1rem;
counter-reset: line;
}
ol.uix-list--circle > li,
ul.uix-list--circle > li,
.uix-list--circle ol > li,
.uix-list--circle ul > li {
position: relative;
margin-bottom: 0.5rem;
color: var(--uix-primary-text-color);
margin-left: 1rem;
}
ol.uix-list--circle > li::before,
ul.uix-list--circle > li::before,
.uix-list--circle ol > li::before,
.uix-list--circle ul > li::before {
position: absolute;
left: -1.5em;
top: 50%;
transform: translateY(-50%);
display: inline-block;
width: 10px;
height: 10px;
background-color: var(--uix-highlight-color1);
color: #fff;
border-radius: 50%;
text-align: center;
counter-increment: line;
content: "";
}
/*
---------------------------
4. Big Numbers Ordered List
---------------------------
*/
ol.uix-list--numbered-large,
.uix-list--numbered-large ol {
counter-reset: item;
/*removes original number*/
list-style-type: none;
/*remove if full width*/
text-align: justify;
}
ol.uix-list--numbered-large li,
.uix-list--numbered-large ol li {
display: block;
padding-left: 2.5rem;
position: relative;
min-height: 3.5rem;
/*generic alignment*/
text-indent: 0;
list-style-position: outside;
margin-left: 1.2rem;
list-style-type: number;
}
ol.uix-list--numbered-large li::before,
.uix-list--numbered-large ol li::before {
content: "0" counter(item) ".";
counter-increment: item;
position: absolute;
margin-left: -3.5rem;
font-size: 3rem;
color: var(--uix-sub-text-color);
line-height: 1;
}
.uix-list--numbered-large.uix-list--numbered-1-digit li::before {
content: counter(item) ".";
}
ol.uix-list--numbered-large.uix-list--numbered-bg li,
.uix-list--numbered-large.uix-list--numbered-bg ol li {
background: rgb(228, 225, 225);
min-height: 70px;
border-radius: 50px;
margin-bottom: 1rem;
margin-left: 0;
padding-left: 4.5rem;
}
ol.uix-list--numbered-large.uix-list--numbered-bg li p,
.uix-list--numbered-large.uix-list--numbered-bg ol li p {
padding-top: 1.5rem;
padding-right: 2rem;
line-height: 1.3;
}
ol.uix-list--numbered-large.uix-list--numbered-bg li::before,
.uix-list--numbered-large.uix-list--numbered-bg ol li::before {
background: var(--uix-highlight-color1);
border-radius: 50%;
width: 50px;
height: 50px;
line-height: 50px;
content: "0" counter(item);
font-size: 1.5rem;
color: #fff;
text-align: center;
top: 50%;
transform: translateY(-50%);
margin-left: -4rem;
}
.uix-list--numbered-large.uix-list--numbered-bg.uix-list--numbered-1-digit li::before {
content: counter(item);
}
/*
---------------------------
5. Step Timeline By Numbers
---------------------------
*/
.uix-list--numbered-step {
counter-reset: step;
list-style-type: none;
margin-left: 1rem;
}
.uix-list--numbered-step li {
position: relative;
padding: 0 0 1.5rem 3.75rem;
min-height: 75px;
border-left: 2px solid #333;
}
.uix-list--numbered-step li::before {
counter-increment: step;
content: counters(step, ".") " ";
position: absolute;
left: -26px;
top: 0;
height: 50px;
width: 50px;
font-size: 1rem;
font-weight: 700;
line-height: 48px;
text-align: center;
color: #fff;
background-color: var(--uix-highlight-color1);
border: 2px solid #333;
border-radius: 50%;
z-index: 2;
}
.uix-list--numbered-step li:last-child {
border-left: none;
}
.uix-list--numbered-step li:last-child::before {
content: "✓";
}
@media all and (max-width: 768px) {
.uix-list--numbered-step li {
padding-left: 2.5rem;
}
}
/* ======================================================
<!-- Entry -->
/* ====================================================== */
/*
* 1. Spacing
* 2. Share
* 3. Title
* 4. Main Content
* 5. Meta Info
*/
/*
---------------------------
1. Spacing
---------------------------
*/
.uix-entry__box {
padding: 2.84375rem 0 1.75rem;
/*-- WordPress Style --*/
}
.uix-entry__box.uix-entry__box--top {
padding: 2.84375rem 0 0;
}
.uix-entry__box.uix-entry__box--mark a {
color: var(--uix-highlight-color1);
}
.uix-entry__box.uix-entry__box--mark a:hover {
color: var(--uix-highlight-color2);
}
.uix-entry__box .post-navigation {
width: 100%;
}
.uix-entry__box .nav-previous,
.uix-entry__box .nav-next {
display: inline-block;
width: 50%;
}
/*
---------------------------
2. Share
---------------------------
*/
.uix-entry__box__share .uix-btn {
margin: 0 0.5rem 1rem;
}
/*
---------------------------
3. Title
---------------------------
*/
.uix-entry__box__title {
padding-bottom: 1.75rem;
}
@media all and (max-width: 768px) {
.uix-entry__box__title {
padding-bottom: 0.4375rem;
}
}
/*
---------------------------
4. Main Content
---------------------------
*/
.uix-entry__content {
word-wrap: break-word;
/* Align wide and full classes */
/* (Using WordPress default class name ) */
}
.uix-entry__content pre:not(.uix-precode) {
background: #fff;
border: 1px solid #d9d9d9;
border-left: 5px solid var(--uix-highlight-color1);
padding: 0.3em 0.7em;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.uix-entry__content img {
height: auto !important;
}
.uix-entry__content ul li img {
height: inherit !important; /* Used for Gallery grid */
}
.uix-entry__content iframe {
max-width: 100% !important;
}
.uix-entry__content img.alignfull,
.uix-entry__content img.alignwide,
.uix-entry__content .alignfull img,
.uix-entry__content .alignwide img {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
max-width: 100vw;
width: 100vw !important;
}
@media only screen and (min-width: 950px) {
.uix-entry__content img.alignwide,
.uix-entry__content .alignwide img {
max-width: inherit;
}
}
/*
---------------------------
5. Meta Info
---------------------------
*/
ul.uix-entry__meta {
width: 500px;
display: block;
color: #999;
font-style: italic;
font-size: 0.75rem;
line-height: 1.3333333333;
}
ul.uix-entry__meta li {
display: inline-block;
/*require*/
margin-bottom: 0.62890625rem;
}
ul.uix-entry__meta li::before {
content: "/";
display: inline-block;
margin-right: 0.4375rem;
}
ul.uix-entry__meta li a {
color: #999;
}
ul.uix-entry__meta.uix-entry__meta--centered {
margin: 0 auto;
}
ul.uix-entry__meta.uix-entry__meta--wrap li {
display: block;
}
ul.uix-entry__meta.uix-entry__meta--wrap li::before {
display: none;
}
ul.uix-entry__meta.uix-entry__meta--wrap li strong {
padding-right: 0.4375rem;
font-size: 0.875rem;
color: #C9C9C9;
display: inline-block;
width: 130px;
vertical-align: top;
}
ul.uix-entry__meta.uix-entry__meta--wrap li span {
display: inline-block;
width: calc(100% - 130px - 0.875rem);
}
ul.uix-entry__meta.uix-entry__meta--wrap li a {
color: var(--uix-highlight-color1);
}
ul.uix-entry__meta.uix-entry__meta--wrap li a:hover {
color: var(--uix-highlight-color2);
}
ul.uix-entry__meta:not(.uix-entry__meta--wrap) li:first-child::before {
display: none;
}
/* ======================================================
<!-- Footer -->
/* ====================================================== */
.uix-footer__container {
font-size: 0.75rem;
padding: 3rem 0;
}
/* ul li ul li -> all on one line */
.uix-footer__menu,
.uix-footer__menu ul,
.uix-footer__menu li {
display: inline;
position: relative;
}
.uix-footer__menu li a {
padding: 0 0.4375rem;
border-right: 1px solid #E1E1E1;
}
.uix-footer__menu li:last-child a {
border: none;
}
@media all and (max-width: 768px) {
.uix-footer__container .uix-f-l,
.uix-footer__container .uix-f-r {
float: none !important;
}
}
/* ======================================================
<!-- Header Area -->
/* ====================================================== */
/*
* 1. Default
* 2. Theme - White
*/
/*
---------------------------
1. Default
---------------------------
*/
/* Don't use "margin" or "padding" to set up ".uix-header__container" */
.uix-header__container {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 90000;
border-bottom: 2.15px solid rgba(255, 255, 255, 0.2);
box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.08);
background-color: var(--uix-highlight-color1);
background-image: linear-gradient(to right, var(--uix-btn-gradient-color1) 0%, var(--uix-btn-gradient-color2) 20%, var(--uix-btn-gradient-color3) 100%);
/*
---------------------------
2. Overlay Header
---------------------------
*/
}
.uix-header__container.uix-header__container--overlay {
background: rgba(255, 255, 255, 0.15);
background: linear-gradient(to right, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 100%);
backdrop-filter: blur(2px);
}
.uix-header__container.uix-header__container--overlay.is-fixed {
background-color: var(--uix-highlight-color1);
background-image: linear-gradient(to right, var(--uix-btn-gradient-color1) 0%, var(--uix-btn-gradient-color2) 20%, var(--uix-btn-gradient-color3) 100%);
}
/* Show Toolbar when viewing site with WordPress */
.admin-bar .uix-header__container {
top: 32px;
}
/* Admin bar becomes taller on smaller devices with WordPress */
@media all and (max-width: 782px) {
.admin-bar .uix-header__container {
top: 0;
}
}
/* Don't use "margin" or "padding" to set up ".uix-header" */
.uix-header {
/* Floating layer protection for IE */
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
.uix-header .uix-menu__right-box {
float: right;
}
/* Header Placeholder, to prevent floating elements from affecting layout */
.uix-header__placeholder {
height: 75px;
background: none;
display: block;
visibility: hidden;
width: 100%;
}
@media all and (max-width: 768px) {
.uix-header__container {
position: relative;
}
.uix-header__container.uix-header__container--overlay {
background-color: var(--uix-highlight-color1);
background-image: linear-gradient(to right, var(--uix-btn-gradient-color1) 0%, var(--uix-btn-gradient-color2) 20%, var(--uix-btn-gradient-color3) 100%);
position: relative;
}
/* Header Placeholder, to prevent floating elements from affecting layout */
.uix-header__placeholder {
height: 0;
}
}
/* ======================================================
<!-- Helper Classes -->
/* ====================================================== */
/*
* 1. Content Block
* 2. Elements after a floating element will flow around it.
* 3. Shadow Effect
* 4. Smooth Transition Effect
* 5. Element Floating
* 6. Element Alignment
* 7. Truncate String with Ellipsis
* 8. Vertically or Horizontally Aligned Blocks
* 9. Specifies Whether To Clip Content
* 10. Specifies a Default Height
* 11. Hidden The Element on Mobile or Desktop Device
* 12. Tip Bubble
* 13. Image Hover Overlay Effects
* 14. Position
* 15. Element Hidden Style
* 16. Border Radius
* 17. Align Wide and Full Classes For Elements
* 18. HTML Disclosure Summary element
*/
/*
---------------------------
1. Content Block
---------------------------
*/
.uix-relative {
position: relative;
}
.uix-relative--inline {
display: inline-block;
position: relative;
/* Prevent content overflow */
max-width: 100%;
/* Behave like most inline-block elements */
vertical-align: middle;
/*
* Force hardware acceleration without creating a new stacking context
* to fix 1px glitch when combined with overlays and transitions in Webkit
*/
-webkit-backface-visibility: hidden;
}
/* Clip child elements */
.uix-relative--inline-clip {
overflow: hidden;
}
/*----*/
.uix-display-none {
display: none !important;
}
.uix-display-inline {
display: inline !important;
}
.uix-display-inline-block {
display: inline-block !important;
}
.uix-display-block {
display: block !important;
}
.uix-display-flex {
display: flex !important;
}
.uix-display-inline-flex {
display: inline-flex !important;
}
/* The breakpoint is the same as bootstrap 5 */
/*
--breakpoint-xs:0;
--breakpoint-sm:576px;
--breakpoint-md:768px;
--breakpoint-lg:992px;
--breakpoint-xl:1200px;
--breakpoint-xxl:1400px;
*/
@media all and (max-width: 576px) {
.uix-display-none--sm {
display: none !important;
}
.uix-display-inline--sm {
display: inline !important;
}
.uix-display-inline-block--sm {
display: inline-block !important;
}
.uix-display-block--sm {
display: block !important;
}
.uix-display-flex--sm {
display: flex !important;
}
.uix-display-inline-flex--sm {
display: inline-flex !important;
}
}
@media all and (max-width: 768px) {
.uix-display-none--md {
display: none !important;
}
.uix-display-inline--md {
display: inline !important;
}
.uix-display-inline-block--md {
display: inline-block !important;
}
.uix-display-block--md {
display: block !important;
}
.uix-display-flex--md {
display: flex !important;
}
.uix-display-inline-flex--md {
display: inline-flex !important;
}
}
@media all and (max-width: 992px) {
.uix-display-none--lg {
display: none !important;
}
.uix-display-inline--lg {
display: inline !important;
}
.uix-display-inline-block--lg {
display: inline-block !important;
}
.uix-display-block--lg {
display: block !important;
}
.uix-display-flex--lg {
display: flex !important;
}
.uix-display-inline-flex--lg {
display: inline-flex !important;
}
}
@media all and (max-width: 1200px) {
.uix-display-none--xl {
display: none !important;
}
.uix-display-inline--xl {
display: inline !important;
}
.uix-display-inline-block--xl {
display: inline-block !important;
}
.uix-display-block--xl {
display: block !important;
}
.uix-display-flex--xl {
display: flex !important;
}
.uix-display-inline-flex--xl {
display: inline-flex !important;
}
}
@media all and (max-width: 1400px) {
.uix-display-none--xxl {
display: none !important;
}
.uix-display-inline--xxl {
display: inline !important;
}
.uix-display-inline-block--xxl {
display: inline-block !important;
}
.uix-display-block--xxl {
display: block !important;
}
.uix-display-flex--xxl {
display: flex !important;
}
.uix-display-inline-flex--xxl {
display: inline-flex !important;
}
}
/*
---------------------------
2. Elements after a floating element will flow around it.
Use the "uix-clearfix" hack to fix the problem
---------------------------
*/
.uix-clearfix::before {
display: table;
content: "";
line-height: 0;
}
.uix-clearfix::after {
display: table;
content: "";
line-height: 0;
clear: both;
}
/*
---------------------------
3. Shadow Effect
---------------------------
*/
.uix-outer-shadow--regular {
box-shadow: rgba(0, 0, 0, 0.07) 0px 5px 15px 0px, rgba(50, 50, 93, 0.1) 0px 15px 35px 0px;
}
.uix-outer-shadow--thick {
box-shadow: rgba(0, 0, 0, 0.18) 0 19px 38px, rgba(0, 0, 0, 0.08) 0 15px 12px;
}
.uix-outer-shadow--light {
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
}
.uix-outer-shadow--highlight {
box-shadow: rgba(0, 0, 0, 0.07) 0px 5px 15px 0px, rgba(var(--uix-highlight-color1), 0.2) 0px 15px 35px 0px;
}
.uix-none-shadow {
box-shadow: none !important;
text-shadow: none !important;
}
/*
---------------------------
4. Smooth Transition Effect
---------------------------
*/
.uix-trans {
transition: all 0.3s ease;
}
.uix-trans img,
.uix-trans a,
.uix-trans i,
.uix-trans li,
.uix-trans span {
transition: all 0.3s ease;
}
/*
---------------------------
5. Element Floating
---------------------------
*/
.uix-f-l {
float: left;
}
.uix-f-r {
float: right;
}
/*
---------------------------
6. Element Alignment
---------------------------
*/
.uix-t-r {
text-align: right;
}
.uix-t-l {
text-align: left;
}
.uix-t-c {
text-align: center;
}
/* The breakpoint is the same as bootstrap 5 */
/*
--breakpoint-xs:0;
--breakpoint-sm:576px;
--breakpoint-md:768px;
--breakpoint-lg:992px;
--breakpoint-xl:1200px;
--breakpoint-xxl:1400px;
*/
@media all and (max-width: 576px) {
.uix-t-r--sm {
text-align: right;
}
.uix-t-l--sm {
text-align: left;
}
.uix-t-c--sm {
text-align: center;
}
}
@media all and (max-width: 768px) {
.uix-t-r--md {
text-align: right;
}
.uix-t-l--md {
text-align: left;
}
.uix-t-c--md {
text-align: center;
}
}
@media all and (max-width: 992px) {
.uix-t-r--lg {
text-align: right;
}
.uix-t-l--lg {
text-align: left;
}
.uix-t-c--lg {
text-align: center;
}
}
@media all and (max-width: 1200px) {
.uix-t-r--xl {
text-align: right;
}
.uix-t-l--xl {
text-align: left;
}
.uix-t-c--xl {
text-align: center;
}
}
@media all and (max-width: 1400px) {
.uix-t-r--xxl {
text-align: right;
}
.uix-t-l--xxl {
text-align: left;
}
.uix-t-c--xxl {
text-align: center;
}
}
/*
---------------------------
7. Truncate String with Ellipsis
---------------------------
*/
.uix-t-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
}
/*
---------------------------
8. Vertically or Horizontally Aligned Blocks
---------------------------
*/
/*-- Using transform property --*/
.uix-v-align--absolute,
.uix-v-align--relative {
position: absolute;
z-index: 6;
width: 100%;
/* Vertical Center */
top: 50%;
transform: translateY(-50%);
/* Vertical Bottom */
/* Vertical Top */
}
.uix-v-align--absolute.uix-v-align--absolute--b,
.uix-v-align--relative.uix-v-align--absolute--b {
top: auto;
bottom: 0;
transform: translateY(0);
}
.uix-v-align--absolute.uix-v-align--absolute--t,
.uix-v-align--relative.uix-v-align--absolute--t {
top: 0;
transform: translateY(0);
}
.uix-v-align--relative {
position: relative;
}
@media all and (max-width: 768px) {
.uix-v-align--relative {
top: 0;
transform: none;
}
}
/*-- Using table --*/
.uix-v-align--table {
display: table;
width: 100%;
height: 100%;
/* Vertical Bottom */
/* Vertical Top */
}
.uix-v-align--table > div {
display: table-cell;
vertical-align: middle;
}
.uix-v-align--table.uix-v-align--table--b > div {
vertical-align: bottom;
}
.uix-v-align--table.uix-v-align--table--t > div {
vertical-align: top;
}
/*
---------------------------
9. Specifies Whether To Clip Content
---------------------------
*/
.uix-hidden-scrollbar-x {
overflow-x: hidden;
}
.uix-hidden-scrollbar {
overflow: hidden;
}
/*
---------------------------
10. Specifies a Default Height
---------------------------
*/
.uix-height--10 {
height: 10vh !important;
}
.uix-height--20 {
height: 20vh !important;
}
.uix-height--30 {
height: 30vh !important;
}
.uix-height--40 {
height: 40vh !important;
}
.uix-height--50 {
height: 50vh !important;
}
.uix-height--60 {
height: 60vh !important;
}
.uix-height--70 {
height: 70vh !important;
}
.uix-height--80 {
height: 80vh !important;
}
.uix-height--90 {
height: 90vh !important;
}
.uix-height--100 {
height: 100vh !important;
}
@media all and (max-width: 768px) {
.uix-height--100:not(.is-mobile-still),
.uix-height--90:not(.is-mobile-still),
.uix-height--80:not(.is-mobile-still),
.uix-height--70:not(.is-mobile-still),
.uix-height--60:not(.is-mobile-still),
.uix-height--50:not(.is-mobile-still),
.uix-height--40:not(.is-mobile-still),
.uix-height--30:not(.is-mobile-still),
.uix-height--20:not(.is-mobile-still),
.uix-height--10:not(.is-mobile-still) {
height: auto !important;
}
}
/*
---------------------------
11. Hidden The Element on Mobile or Desktop Device
---------------------------
*/
@media all and (max-width: 768px) {
.uix-hide-mobile {
display: none !important;
}
}
@media all and (min-width: 769px) {
.uix-hide-pc {
display: none !important;
}
}
/*
---------------------------
12. Tip Bubble
---------------------------
*/
.uix-bubble {
font-weight: 100;
text-transform: uppercase;
font-weight: 700;
line-height: 1.2;
background: var(--uix-highlight-color1);
border-radius: 10px;
padding: 0.1rem 0.3rem !important;
margin-left: 0.5rem;
font-size: 0.625rem;
vertical-align: middle;
color: #fff !important;
position: absolute;
right: 2.3rem;
top: 0.5rem;
transform: scale(0.7);
}
@media all and (max-width: 768px) {
.uix-bubble {
right: 1rem;
top: 0.7rem;
}
}
/*
---------------------------
13. Image Hover Overlay Effects
---------------------------
*/
img.uix-filter-hover--color,
.uix-filter-hover--color img {
transition: filter 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
will-change: filter;
}
img.uix-filter-hover--color:hover,
.uix-filter-hover--color img:hover {
filter: brightness(120%) hue-rotate(45deg);
}
/*
---------------------------
14. Position
---------------------------
*/
/*--- Directions --- */
[class*=uix-dir--top],
[class*=uix-dir--bottom],
[class*=uix-dir--left],
[class*=uix-dir--right],
[class*=uix-dir--center] {
position: absolute !important;
}
/* Don't use `width: 100%` because it is wrong if the parent has padding. */
.uix-dir--top {
top: 0 !important;
bottom: auto !important;
left: 0 !important;
right: 0 !important;
}
.uix-dir--bottom {
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
}
.uix-dir--left {
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: auto !important;
}
.uix-dir--right {
top: 0 !important;
bottom: 0 !important;
left: auto !important;
right: 0 !important;
}
.uix-dir--top-left {
top: 0 !important;
bottom: auto !important;
left: 0 !important;
right: auto !important;
}
.uix-dir--top-right {
top: 0 !important;
bottom: auto !important;
left: auto !important;
right: 0 !important;
}
.uix-dir--bottom-left {
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: auto !important;
}
.uix-dir--bottom-right {
top: auto !important;
bottom: 0 !important;
left: auto !important;
right: 0 !important;
}
/*
---------------------------
15. Element Hidden Style
---------------------------
*/
.uix-el--transparent {
opacity: 0;
}
.uix-el--scale {
transform: scale(0);
}
.uix-el--skew {
transform: skew(0deg, -5deg);
}
/*
---------------------------
16. Border Radius
---------------------------
*/
.uix-border--rounded {
border-radius: 4px;
}
.uix-border--rounded.uix-border--rounded-img > img {
border-radius: 4px;
}
.uix-border--rounded.uix-border--rounded-only-img {
border-radius: 0;
}
.uix-border--rounded.uix-border--rounded-only-img > img {
border-radius: 4px;
}
.uix-border--circle {
border-radius: 50%;
}
.uix-border--circle.uix-border--circle-img > img {
border-radius: 50%;
}
.uix-border--circle.uix-border--circle-only-img {
border-radius: 0;
}
.uix-border--circle.uix-border--circle-only-img > img {
border-radius: 50%;
}
/*
---------------------------
17. Align Wide and Full Classes For Elements
---------------------------
*/
img.uix-alignfull,
.uix-alignfull img {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
max-width: 100vw;
width: 100vw !important;
height: auto;
}
/*
---------------------------
18. HTML Disclosure Summary element
---------------------------
*/
details.uix-details-reset:not([open]) > *:not(summary) {
display: none !important;
}
details.uix-details-reset > summary {
cursor: pointer;
list-style: none;
}
details.uix-details-reset > summary::before {
display: none;
}
details.uix-details-reset > summary::-webkit-details-marker {
display: none;
}
/* ======================================================
<!-- Basic Layout Styles -->
/* ====================================================== */
/*
* 1. Bootstrap 5.x - Do not use prefix "uix-"
* 2. Material Container
* 3. Main Wrapper
* 4. Uix Grid (Core Grid)
* 5. Align Wide and Full Classes For Elements
*/
/*
---------------------------
1. Bootstrap 5.x
---------------------------
*/
/* New XL container for Bootstrap 5.x */
.container {
width: auto;
max-width: 1140px;
}
@media all and (min-width: 1430px) {
.container {
max-width: 1278px;
}
}
/*
---------------------------
2. Material Container
---------------------------
*/
.uix-container__bg {
position: relative;
z-index: 2;
overflow: hidden;
}
.uix-container__bg .row {
margin-left: 0;
margin-right: 0;
}
.uix-container__bg.uix-container__bg--no-gutters {
padding-left: 0;
padding-right: 0;
}
.uix-container__bg.uix-container__bg--white {
background: #fff;
}
.uix-container__bg.uix-container__bg--shadow {
box-shadow: rgba(0, 0, 0, 0.07) 0px 5px 15px 0px, rgba(50, 50, 93, 0.1) 0px 15px 35px 0px;
}
.uix-container__bg.uix-container__bg--rounded-large {
border-radius: 15px;
}
.uix-container__bg.uix-container__bg--rounded-medium {
border-radius: 7px;
}
.uix-container__bg.uix-container__bg--rounded-small {
border-radius: 2px;
}
.uix-container__bg.uix-container__bg--totop-large {
margin-top: -15rem;
}
.uix-container__bg.uix-container__bg--totop-medium {
margin-top: -10rem;
}
.uix-container__bg.uix-container__bg--totop-small {
margin-top: -5rem;
}
@media all and (max-width: 768px) {
.uix-container__bg.uix-container__bg--totop-large {
margin-top: -7rem;
}
.uix-container__bg.uix-container__bg--totop-medium {
margin-top: -4rem;
}
.uix-container__bg.uix-container__bg--totop-small {
margin-top: -2rem;
}
}
/*
---------------------------
3. Main Wrapper
---------------------------
*/
/* Note: Do not use the "transform" property, otherwise it may affect the internal elements */
.uix-wrapper {
min-height: 100%;
width: 100%;
overflow: hidden;
}
/* Show Toolbar when viewing site with WordPress */
.admin-bar .uix-wrapper {
margin-top: 32px;
}
/* Admin bar becomes taller on smaller devices with WordPress */
@media all and (max-width: 782px) {
.admin-bar .uix-wrapper {
margin-top: 46px;
}
}
/*
---------------------------
4. Uix Grid
---------------------------
*/
[class*=uix-core-grid__col-] {
box-sizing: border-box;
float: left;
position: relative;
}
.uix-core-grid__inline {
float: none;
display: inline-block;
}
.uix-core-grid__col-1 {
width: 8.3333333333%;
}
.uix-core-grid__col-2 {
width: 16.6666666667%;
}
.uix-core-grid__col-3 {
width: 25%;
}
.uix-core-grid__col-4 {
width: 33.3333333333%;
}
.uix-core-grid__col-5 {
width: 41.6666666667%;
}
.uix-core-grid__col-6 {
width: 50%;
}
.uix-core-grid__col-7 {
width: 58.3333333333%;
}
.uix-core-grid__col-8 {
width: 66.6666666667%;
}
.uix-core-grid__col-9 {
width: 75%;
}
.uix-core-grid__col-10 {
width: 83.3333333333%;
}
.uix-core-grid__col-11 {
width: 91.6666666667%;
}
.uix-core-grid__col-12 {
width: 100%;
}
@media all and (max-width: 768px) {
.uix-core-grid__mobile-half {
width: 50%;
}
.uix-core-grid__mobile-stack {
width: 100%;
}
}
.uix-core-grid {
width: 100%;
}
.uix-core-grid .uix-core-grid__row {
width: calc(100% + 15px);
/* Auto width, for automatic widths such as 5 columns */
}
.uix-core-grid .uix-core-grid__row::after {
/* Or @extend .uix-clearfix */
content: "";
display: table;
clear: both;
}
.uix-core-grid .uix-core-grid__row [class*=uix-core-grid__col-] > div {
word-wrap: break-word;
position: relative;
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--no-gutters {
width: 100%;
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--no-gutters [class*=uix-core-grid__col-] {
padding-right: 0 !important;
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--auto-width {
display: flex;
flex-wrap: wrap;
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--auto-width .uix-core-grid__col {
flex: 1;
padding-right: 15px;
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--auto-width.uix-core-grid__row--no-gutters .uix-core-grid__col {
padding-right: 0;
}
.uix-core-grid [class*=uix-core-grid__col-] {
padding-right: 15px;
}
.uix-core-grid__row .uix-core-grid [class*=uix-core-grid__col-]:last-of-type {
padding-right: 0;
}
.uix-core-grid__row .uix-core-grid [class*=uix-core-grid__col-]:last-of-type [class*=uix-core-grid__col-] > div {
width: calc(100% - 15px);
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--loop .uix-core-grid__col-6:nth-child(2n+1),
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--loop .uix-core-grid__col-4:nth-child(3n+1),
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--loop .uix-core-grid__col-3:nth-child(4n+1),
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--loop .uix-core-grid__col-2:nth-child(6n+1) {
clear: both;
}
@media all and (max-width: 768px) {
.uix-core-grid .uix-core-grid__row {
/* Auto width, for automatic widths such as 5 columns */
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--auto-width {
display: block;
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--auto-width.uix-core-grid__row--no-gutters .uix-core-grid__col {
padding-right: 15px;
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--no-break {
/* Auto width, for automatic widths such as 5 columns */
}
.uix-core-grid .uix-core-grid__row.uix-core-grid__row--no-break.uix-core-grid__row--auto-width {
display: flex;
}
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--no-break).uix-core-grid__row--no-gutters {
width: calc(100% + 15px);
}
.uix-core-grid .uix-core-grid__row:not(.uix-core-grid__row--no-break) [class*=uix-core-grid__col-] {
float: none;
width: calc(100% - 15px);
padding-left: 0;
padding-right: 0;
}
}
/* The breakpoint is the same as bootstrap 5 */
/*
--breakpoint-xs:0;
--breakpoint-sm:576px;
--breakpoint-md:768px;
--breakpoint-lg:992px;
--breakpoint-xl:1200px;
--breakpoint-xxl:1400px;
*/
@media all and (max-width: 576px) {
.uix-core-grid .uix-core-grid__col-3--sm,
.uix-core-grid .uix-core-grid__col-4--sm,
.uix-core-grid .uix-core-grid__col-6--sm {
float: left !important;
padding-right: 15px !important;
}
.uix-core-grid .uix-core-grid__col-3--sm {
width: 25% !important;
}
.uix-core-grid .uix-core-grid__col-4--sm {
width: 33.3333333333% !important;
}
.uix-core-grid .uix-core-grid__col-6--sm {
width: 50% !important;
}
.uix-core-grid .uix-core-grid__row--no-gutters .uix-core-grid__col-3--sm {
width: calc(25% - 3.75px) !important;
}
.uix-core-grid .uix-core-grid__row--no-gutters .uix-core-grid__col-4--sm {
width: calc(33.3333333333% - 5px) !important;
}
.uix-core-grid .uix-core-grid__row--no-gutters .uix-core-grid__col-6--sm {
width: calc(50% - 7.5px) !important;
}
.uix-core-grid .uix-core-grid__row--loop .uix-core-grid__col-3--sm:nth-child(4n+1),
.uix-core-grid .uix-core-grid__row--loop .uix-core-grid__col-4--sm:nth-child(3n+1),
.uix-core-grid .uix-core-grid__row--loop .uix-core-grid__col-6--sm:nth-child(2n+1) {
clear: both;
}
}
@media all and (max-width: 768px) {
.uix-core-grid .uix-core-grid__col-3--md,
.uix-core-grid .uix-core-grid__col-4--md,
.uix-core-grid .uix-core-grid__col-6--md {
float: left !important;
padding-right: 15px !important;
}
.uix-core-grid .uix-core-grid__col-3--md {
width: 25% !important;
}
.uix-core-grid .uix-core-grid__col-4--md {
width: 33.3333333333% !important;
}
.uix-core-grid .uix-core-grid__col-6--md {
width: 50% !important;
}
.uix-core-grid .uix-core-grid__row--no-gutters .uix-core-grid__col-3--md {
width: calc(25% - 3.75px) !important;
}
.uix-core-grid .uix-core-grid__row--no-gutters .uix-core-grid__col-4--md {
width: calc(33.3333333333% - 5px) !important;
}
.uix-core-grid .uix-core-grid__row--no-gutters .uix-core-grid__col-6--md {
width: calc(50% - 7.5px) !important;
}
.uix-core-grid .uix-core-grid__row--loop .uix-core-grid__col-3--md:nth-child(4n+1),
.uix-core-grid .uix-core-grid__row--loop .uix-core-grid__col-4--md:nth-child(3n+1),
.uix-core-grid .uix-core-grid__row--loop .uix-core-grid__col-6--md:nth-child(2n+1) {
clear: both;
}
}
@media all and (max-width: 992px) {
.uix-core-grid .uix-core-grid__col-3--lg,
.uix-core-grid .uix-core-grid__col-4--lg,
.uix-core-grid .uix-core-grid__col-6--lg {
float: left !important;
padding-right: 15px !important;
}
.uix-core-grid .uix-core-grid__col-3--lg {
width: 25% !important;
}
.uix-core-grid .uix-core-grid__col-4--lg {
width: 33.3333333333% !important;
}
.uix-core-grid .uix-core-grid__col-6--lg {
width: 50% !important;
}
.uix-core-grid .uix-core-grid__row--no-gutters .uix-core-grid__col-3--lg {
width: calc(25% - 3.75px) !important;
}
.uix-core-grid .uix-core-grid__row--no-gutters .uix-core-grid__col-4--lg {
width: calc(33.3333333333% - 5px) !important;
}
.uix-core-grid .uix-core-grid__row--no-gutters .uix-core-grid__col-6--lg {
width: calc(50% - 7.5px) !important;
}
.uix-core-grid .uix-core-grid__row--loop .uix-core-grid__col-3--lg:nth-child(4n+1),
.uix-core-grid .uix-core-grid__row--loop .uix-core-grid__col-4--lg:nth-child(3n+1),
.uix-core-grid .uix-core-grid__row--loop .uix-core-grid__col-6--lg:nth-child(2n+1) {
clear: both;
}
}
@media all and (max-width: 1200px) {
.uix-core-grid .uix-core-grid__col-3--xl,
.uix-core-grid .uix-core-grid__col-4--xl,
.uix-core-grid .uix-core-grid__col-6--xl {
float: left !important;
padding-right: 15px !important;
}
.uix-core-grid .uix-core-grid__col-3--xl {
width: 25% !important;
}
.uix-core-grid .uix-core-grid__col-4--xl {
width: 33.3333333333% !important;
}
.uix-core-grid .uix-core-grid__col-6--xl {
width: 50% !important;
}
.uix-core-grid .uix-core-grid__row--no-gutters .uix-core-grid__col-3--xl {
width: calc(25% - 3.75px) !important;
}
.uix-core-grid .uix-core-grid__row--no-gutters .uix-core-grid__col-4--xl {
width: calc(33.3333333333% - 5px) !important;
}
.uix-core-grid .uix-core-grid__row--no-gutters .uix-core-grid__col-6--xl {
width: calc(50% - 7.5px) !important;
}
.uix-core-grid .uix-core-grid__row--loop .uix-core-grid__col-3--xl:nth-child(4n+1),
.uix-core-grid .uix-core-grid__row--loop .uix-core-grid__col-4--xl:nth-child(3n+1),
.uix-core-grid .uix-core-grid__row--loop .uix-core-grid__col-6--xl:nth-child(2n+1) {
clear: both;
}
}
@media all and (max-width: 1400px) {
.uix-core-grid .uix-core-grid__col-3--xxl,
.uix-core-grid .uix-core-grid__col-4--xxl,
.uix-core-grid .uix-core-grid__col-6--xxl {
float: left !important;
padding-right: 15px !important;
}
.uix-core-grid .uix-core-grid__col-3--xxl {
width: 25% !important;
}
.uix-core-grid .uix-core-grid__col-4--xxl {
width: 33.3333333333% !important;
}
.uix-core-grid .uix-core-grid__col-6--xxl {
width: 50% !important;
}
.uix-core-grid .uix-core-grid__row--no-gutters .uix-core-grid__col-3--xxl {
width: calc(25% - 3.75px) !important;
}
.uix-core-grid .uix-core-grid__row--no-gutters .uix-core-grid__col-4--xxl {
width: calc(33.3333333333% - 5px) !important;
}
.uix-core-grid .uix-core-grid__row--no-gutters .uix-core-grid__col-6--xxl {
width: calc(50% - 7.5px) !important;
}
.uix-core-grid .uix-core-grid__row--loop .uix-core-grid__col-3--xxl:nth-child(4n+1),
.uix-core-grid .uix-core-grid__row--loop .uix-core-grid__col-4--xxl:nth-child(3n+1),
.uix-core-grid .uix-core-grid__row--loop .uix-core-grid__col-6--xxl:nth-child(2n+1) {
clear: both;
}
}
/* ======================================================
<!-- Loader -->
/* ====================================================== */
.uix-loader-progress {
text-align: center;
font-size: 0.75rem;
transform: translate(10px, -10px);
}
.uix-loader-progress__line {
top: 0;
left: 0;
width: 0;
height: 4px;
position: fixed;
background-color: #fff;
-webkit-touch-callout: none;
user-select: none;
pointer-events: none;
z-index: 99999;
box-shadow: 0 1px 5px 0 rgba(255, 255, 255, 0.3);
}
.uix-loader,
.uix-loader-progress {
bottom: 0;
left: 0;
width: 65px;
height: 65px;
position: fixed;
background-color: transparent;
-webkit-touch-callout: none;
user-select: none;
pointer-events: none;
/* Likely future */
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
}
.uix-loader svg,
.uix-loader-progress svg {
width: 65px;
height: 65px;
}
.uix-loader svg path,
.uix-loader-progress svg path {
fill: var(--uix-highlight-color1);
}
.uix-loader span,
.uix-loader-progress span {
font-family: Arial, sans-serif;
position: fixed;
z-index: 100000;
bottom: 10px;
left: 10px;
}
.uix-loader .uix-loader__spinner,
.uix-loader-progress .uix-loader__spinner {
animation: uix-cssAnim--rotate 0.5s linear infinite;
}
.uix-loader .uix-loader__spinner path,
.uix-loader-progress .uix-loader__spinner path {
stroke-dasharray: 1, 150;
/* 1%, 101% circumference */
stroke-dashoffset: 0;
stroke: var(--uix-highlight-color1);
stroke-linecap: round;
animation: uix-cssAnim--dash 1.5s ease-in-out infinite;
}
@keyframes uix-cssAnim--rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes uix-cssAnim--dash {
0% {
stroke-dasharray: 1, 150;
/* 1%, 101% circumference */
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
/* 70%, 101% circumference */
stroke-dashoffset: -35;
/* 25% circumference */
}
100% {
stroke-dasharray: 90, 150;
/* 70%, 101% circumference */
stroke-dashoffset: -124;
/* -99% circumference */
}
}
/* ======================================================
<!-- Mob