mirror of
https://git.hmsn.ink/kospo/svcm/dmz.git
synced 2026-03-20 08:23:47 +09:00
first
This commit is contained in:
290
src/scss/abstracts/_mixins.scss
Normal file
290
src/scss/abstracts/_mixins.scss
Normal file
@@ -0,0 +1,290 @@
|
||||
/*! mixins.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
@mixin vuero-card() {
|
||||
&.has-margin-bottom {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
&.is-flat {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.is-raised {
|
||||
box-shadow: var(--light-box-shadow);
|
||||
}
|
||||
|
||||
&.is-primary {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: var(--primary--color-invert);
|
||||
|
||||
.title,
|
||||
.subtitle,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p {
|
||||
color: var(--smoke-white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-secondary {
|
||||
background: var(--secondary) !important;
|
||||
border-color: var(--secondary) !important;
|
||||
|
||||
.title,
|
||||
.subtitle,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p {
|
||||
color: var(--smoke-white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-info {
|
||||
background: var(--info) !important;
|
||||
border-color: var(--info) !important;
|
||||
|
||||
.title,
|
||||
.subtitle,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p {
|
||||
color: var(--smoke-white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-success {
|
||||
background: var(--success) !important;
|
||||
border-color: var(--success) !important;
|
||||
|
||||
.title,
|
||||
.subtitle,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p {
|
||||
color: var(--smoke-white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-warning {
|
||||
background: var(--warning) !important;
|
||||
border-color: var(--warning) !important;
|
||||
|
||||
.title,
|
||||
.subtitle,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p {
|
||||
color: var(--smoke-white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-danger {
|
||||
background: var(--danger) !important;
|
||||
border-color: var(--danger) !important;
|
||||
|
||||
.title,
|
||||
.subtitle,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p {
|
||||
color: var(--smoke-white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.card-inner {
|
||||
padding-top: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin vuero-card--dark() {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
|
||||
.v-avatar {
|
||||
img {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-stack {
|
||||
.v-avatar {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
|
||||
|
||||
.avatar {
|
||||
&.is-more {
|
||||
.inner {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin vuero-card--advanced() {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
background-color: var(--white);
|
||||
border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
.card-head,
|
||||
.card-foot {
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.card-head {
|
||||
border-bottom: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
|
||||
}
|
||||
|
||||
.card-foot {
|
||||
border-top: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin vuero-v-card() {
|
||||
box-shadow: none;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
|
||||
|
||||
.card-header {
|
||||
box-shadow: none;
|
||||
|
||||
.card-header-title {
|
||||
font-family: var(--font-alt);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.card-image {
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
a {
|
||||
font-family: var(--font);
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin vuero-v-card--dark() {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
|
||||
.card-header {
|
||||
.card-header-title {
|
||||
color: var(--dark-dark-text);
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
|
||||
a {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
}
|
||||
}
|
||||
|
||||
.v-avatar {
|
||||
.badge {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin vuero-r-card() {
|
||||
@include vuero-card;
|
||||
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background-color: var(--white);
|
||||
border-radius: 10px;
|
||||
border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
|
||||
@mixin vuero-s-card() {
|
||||
@include vuero-card;
|
||||
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background-color: var(--white);
|
||||
border-radius: var(--radius-large);
|
||||
border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
|
||||
@mixin vuero-l-card() {
|
||||
@include vuero-card;
|
||||
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background-color: var(--white);
|
||||
border-radius: 16px;
|
||||
border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
32
src/scss/abstracts/_variables.scss
Normal file
32
src/scss/abstracts/_variables.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
/*! _variables.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
Theses variables are used to map bulma variables to our css variables
|
||||
Some colors are not here because they are overriden with bulma-css-var package.
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
2. Global colors
|
||||
========================================================================== */
|
||||
|
||||
$body-color: var(--body-color);
|
||||
$border: var(--border);
|
||||
|
||||
/* ==========================================================================
|
||||
4. Fonts
|
||||
========================================================================== */
|
||||
|
||||
$font: var(--font);
|
||||
$font-alt: var(--font-alt);
|
||||
$font-monospace: var(--font-monospace);
|
||||
|
||||
/* ==========================================================================
|
||||
5. Layout
|
||||
========================================================================== */
|
||||
|
||||
$fullhd-enabled: false;
|
||||
$body-size: var(--font-size);
|
||||
$radius-small: var(--radius-small);
|
||||
$radius: var(--radius);
|
||||
$radius-large: var(--radius-large);
|
||||
$radius-rounded: var(--radius-rounded);
|
||||
2
src/scss/abstracts/all.scss
Normal file
2
src/scss/abstracts/all.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@import './mixins';
|
||||
@import './variables';
|
||||
172
src/scss/bulma-generated/bulma-colors.ts
Normal file
172
src/scss/bulma-generated/bulma-colors.ts
Normal file
@@ -0,0 +1,172 @@
|
||||
|
||||
export type ColorFn =
|
||||
| 'rgba'
|
||||
| 'adjusthue'
|
||||
| 'saturate'
|
||||
| 'desaturate'
|
||||
| 'lighten'
|
||||
| 'darken'
|
||||
| 'color-invert'
|
||||
| 'dark-color'
|
||||
| 'light-color'
|
||||
|
||||
export interface ColorFnCall {
|
||||
fn: ColorFn
|
||||
fnArg: string | null
|
||||
composeArg: ColorFnCall | null
|
||||
}
|
||||
|
||||
export interface ColorCallSet {
|
||||
[color: string]: {
|
||||
calls: ColorFnCall[],
|
||||
}
|
||||
}
|
||||
export const bulmaCssVariablesDefs: ColorCallSet = {
|
||||
"danger": {
|
||||
"calls": [
|
||||
{
|
||||
"fn": "color-invert",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
},
|
||||
{
|
||||
"fn": "dark-color",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
},
|
||||
{
|
||||
"fn": "light-color",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"dark": {
|
||||
"calls": [
|
||||
{
|
||||
"fn": "lighten",
|
||||
"fnArg": "800",
|
||||
"composeArg": null
|
||||
},
|
||||
{
|
||||
"fn": "color-invert",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
},
|
||||
{
|
||||
"fn": "dark-color",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
},
|
||||
{
|
||||
"fn": "light-color",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"info": {
|
||||
"calls": [
|
||||
{
|
||||
"fn": "color-invert",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
},
|
||||
{
|
||||
"fn": "dark-color",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
},
|
||||
{
|
||||
"fn": "light-color",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"link": {
|
||||
"calls": [
|
||||
{
|
||||
"fn": "color-invert",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
},
|
||||
{
|
||||
"fn": "dark-color",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
},
|
||||
{
|
||||
"fn": "light-color",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"primary": {
|
||||
"calls": [
|
||||
{
|
||||
"fn": "color-invert",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
},
|
||||
{
|
||||
"fn": "dark-color",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
},
|
||||
{
|
||||
"fn": "light-color",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"success": {
|
||||
"calls": [
|
||||
{
|
||||
"fn": "color-invert",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
},
|
||||
{
|
||||
"fn": "dark-color",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
},
|
||||
{
|
||||
"fn": "light-color",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"warning": {
|
||||
"calls": [
|
||||
{
|
||||
"fn": "color-invert",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
},
|
||||
{
|
||||
"fn": "dark-color",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
},
|
||||
{
|
||||
"fn": "light-color",
|
||||
"fnArg": null,
|
||||
"composeArg": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"white": {
|
||||
"calls": [
|
||||
{
|
||||
"fn": "lighten",
|
||||
"fnArg": "800",
|
||||
"composeArg": null
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
3753
src/scss/bulma-generated/generated-fallback.css
Normal file
3753
src/scss/bulma-generated/generated-fallback.css
Normal file
File diff suppressed because it is too large
Load Diff
57
src/scss/bulma-generated/generated-vars.sass
Normal file
57
src/scss/bulma-generated/generated-vars.sass
Normal file
@@ -0,0 +1,57 @@
|
||||
|
||||
// sass variables
|
||||
$danger: var(--danger)
|
||||
$dark: var(--dark)
|
||||
$info: var(--info)
|
||||
$link: var(--link)
|
||||
$primary: var(--primary)
|
||||
$success: var(--success)
|
||||
$warning: var(--warning)
|
||||
$white: var(--white)
|
||||
|
||||
|
||||
// declared base css variables
|
||||
#{":root"}
|
||||
--danger: rgb(255, 255, 255)
|
||||
--dark: rgb(255, 255, 255)
|
||||
--info: rgb(255, 255, 255)
|
||||
--link: rgb(255, 255, 255)
|
||||
--primary: rgb(255, 255, 255)
|
||||
--success: rgb(255, 255, 255)
|
||||
--warning: rgb(255, 255, 255)
|
||||
--white: rgb(255, 255, 255)
|
||||
|
||||
|
||||
// derived, generated css variables
|
||||
#{":root"}
|
||||
--danger--color-invert: rgba(0, 0, 0, 0.7)
|
||||
--danger--dark-color: rgb(74, 74, 74)
|
||||
--danger--light-color: rgb(255, 255, 255)
|
||||
|
||||
--dark--800--lighten: rgb(255, 255, 255)
|
||||
--dark--color-invert: rgba(0, 0, 0, 0.7)
|
||||
--dark--dark-color: rgb(74, 74, 74)
|
||||
--dark--light-color: rgb(255, 255, 255)
|
||||
|
||||
--info--color-invert: rgba(0, 0, 0, 0.7)
|
||||
--info--dark-color: rgb(74, 74, 74)
|
||||
--info--light-color: rgb(255, 255, 255)
|
||||
|
||||
--link--color-invert: rgba(0, 0, 0, 0.7)
|
||||
--link--dark-color: rgb(74, 74, 74)
|
||||
--link--light-color: rgb(255, 255, 255)
|
||||
|
||||
--primary--color-invert: rgba(0, 0, 0, 0.7)
|
||||
--primary--dark-color: rgb(74, 74, 74)
|
||||
--primary--light-color: rgb(255, 255, 255)
|
||||
|
||||
--success--color-invert: rgba(0, 0, 0, 0.7)
|
||||
--success--dark-color: rgb(74, 74, 74)
|
||||
--success--light-color: rgb(255, 255, 255)
|
||||
|
||||
--warning--color-invert: rgba(0, 0, 0, 0.7)
|
||||
--warning--dark-color: rgb(74, 74, 74)
|
||||
--warning--light-color: rgb(255, 255, 255)
|
||||
|
||||
--white--800--lighten: rgb(255, 255, 255)
|
||||
|
||||
116
src/scss/components/_cards.scss
Normal file
116
src/scss/components/_cards.scss
Normal file
@@ -0,0 +1,116 @@
|
||||
/*! _cards.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Simple Cards
|
||||
2. Simple Cards Dark mode
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Simple Cards
|
||||
========================================================================== */
|
||||
|
||||
.r-card {
|
||||
@include vuero-r-card;
|
||||
}
|
||||
|
||||
.s-card {
|
||||
@include vuero-s-card;
|
||||
}
|
||||
|
||||
.l-card {
|
||||
@include vuero-l-card;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Simple Cards Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.r-card,
|
||||
.s-card,
|
||||
.l-card {
|
||||
@include vuero-card--dark;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. Advanced Cards
|
||||
========================================================================== */
|
||||
|
||||
.l-card-advanced {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.r-card-advanced {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.s-card-advanced {
|
||||
border-radius: var(--radius-large);
|
||||
}
|
||||
|
||||
.r-card-advanced,
|
||||
.s-card-advanced,
|
||||
.l-card-advanced {
|
||||
@include vuero-card--advanced;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
4. Advanced Cards Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.r-card-advanced,
|
||||
.s-card-advanced,
|
||||
.l-card-advanced {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
|
||||
.card-head,
|
||||
.card-foot {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
}
|
||||
|
||||
.v-avatar {
|
||||
img {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-stack {
|
||||
.v-avatar {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
|
||||
|
||||
.avatar {
|
||||
&.is-more {
|
||||
.inner {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
5. Bulma Cards
|
||||
========================================================================== */
|
||||
|
||||
.card {
|
||||
&.v-card {
|
||||
@include vuero-v-card;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
6. Bulma Cards Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.card {
|
||||
&.v-card {
|
||||
@include vuero-v-card--dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
261
src/scss/components/_charts.scss
Normal file
261
src/scss/components/_charts.scss
Normal file
@@ -0,0 +1,261 @@
|
||||
/*! _charts.scss | Vuero | Css Ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Apex Charts
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Apex Charts
|
||||
========================================================================== */
|
||||
|
||||
.apexcharts-title-text {
|
||||
font-family: var(--font-alt) !important;
|
||||
font-size: 1rem !important;
|
||||
font-weight: 600 !important;
|
||||
color: var(--dark-text);
|
||||
}
|
||||
|
||||
.apexcharts-legend {
|
||||
.apexcharts-legend-text {
|
||||
font-family: var(--font) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-xaxis,
|
||||
.apexcharts-yaxis {
|
||||
.apexcharts-xaxis-texts-g,
|
||||
.apexcharts-yaxis-texts-g {
|
||||
.apexcharts-text {
|
||||
font-family: var(--font) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-datalabels-group {
|
||||
.apexcharts-text {
|
||||
font-family: var(--font) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] {
|
||||
.apexcharts-legend-text {
|
||||
padding-right: 4px !important;
|
||||
}
|
||||
|
||||
.apexcharts-title-text,
|
||||
.apexcharts-subtitle-text {
|
||||
transform: translateX(calc(100% - 20px));
|
||||
}
|
||||
|
||||
div[class*='apexchartssparkline'] {
|
||||
.apexcharts-title-text,
|
||||
.apexcharts-subtitle-text {
|
||||
transform: translateX(calc(100% - 40px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-dark {
|
||||
.apexcharts-ycrosshairs {
|
||||
stroke: color-mix(in oklab, var(--dark-sidebar), white 12%) !important;
|
||||
}
|
||||
|
||||
.apexcharts-title-text {
|
||||
fill: var(--dark-dark-text) !important;
|
||||
}
|
||||
|
||||
.apexcharts-subtitle-text {
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
.apexcharts-yaxis {
|
||||
.apexcharts-yaxis-texts-g {
|
||||
.apexcharts-text,
|
||||
.apexcharts-yaxis-label {
|
||||
fill: var(--dark-dark-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-svg {
|
||||
line {
|
||||
color: color-mix(in oklab, var(--dark-sidebar), white 12%) !important;
|
||||
stroke: color-mix(in oklab, var(--dark-sidebar), white 12%) !important;
|
||||
}
|
||||
|
||||
.apexcharts-inner,
|
||||
.apexcharts-graphical {
|
||||
.apexcharts-xaxis {
|
||||
.apexcharts-xaxis-texts-g {
|
||||
.apexcharts-text,
|
||||
.apexcharts-xaxis-label {
|
||||
fill: var(--dark-dark-text);
|
||||
}
|
||||
}
|
||||
|
||||
line {
|
||||
color: color-mix(in oklab, var(--dark-sidebar), white 12%) !important;
|
||||
stroke: color-mix(in oklab, var(--dark-sidebar), white 12%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-grid {
|
||||
.apexcharts-gridlines-horizontal {
|
||||
.apexcharts-gridline {
|
||||
color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
stroke: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-gridlines-vertical {
|
||||
.apexcharts-gridline {
|
||||
color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
stroke: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-series-markers,
|
||||
.apexcharts-series-bubble {
|
||||
.apexcharts-marker {
|
||||
color: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
stroke: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-pie-area,
|
||||
.apexcharts-pie-slice-0 {
|
||||
color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
stroke: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
}
|
||||
|
||||
.apexcharts-radialbar-area {
|
||||
// color: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
}
|
||||
|
||||
.apexcharts-datalabels-group {
|
||||
.apexcharts-text,
|
||||
.apexcharts-datalabel-value {
|
||||
fill: var(--dark-dark-text);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-legend {
|
||||
.apexcharts-legend-series {
|
||||
.apexcharts-legend-text {
|
||||
color: var(--dark-dark-text) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-yaxis,
|
||||
.apexcharts-xaxis-inversed {
|
||||
line {
|
||||
color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
stroke: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-radialbar-track,
|
||||
.apexcharts-track {
|
||||
.apexcharts-radialbar-area {
|
||||
color: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
stroke: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-radar-series,
|
||||
.apexcharts-plot-series {
|
||||
> polygon,
|
||||
> line {
|
||||
fill: none !important;
|
||||
color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
stroke: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-text,
|
||||
.apexcharts-yaxis-title-text {
|
||||
fill: var(--dark-dark-text);
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.apexcharts-data-labels text {
|
||||
fill: #fafafa;
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.apexcharts-bar-area {
|
||||
color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
}
|
||||
|
||||
.apexcharts-slices {
|
||||
.apexcharts-pie-label {
|
||||
fill: #fafafa !important;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-tooltip {
|
||||
box-shadow: 2px 2px 6px -4px var(--dark-sidebar) !important;
|
||||
|
||||
&.apexcharts-theme-light {
|
||||
border: 1px solid color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
color: var(--dark-dark-text) !important;
|
||||
|
||||
.apexcharts-tooltip-title {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
border-bottom: 1px solid color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
color: var(--dark-dark-text);
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-text-value,
|
||||
.apexcharts-tooltip-text-z-value,
|
||||
.apexcharts-tooltip-series-group,
|
||||
.apexcharts-tooltip-marker {
|
||||
color: var(--dark-dark-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: var(--font);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-text {
|
||||
color: var(--dark-dark-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip {
|
||||
border: 1px solid color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
color: var(--dark-dark-text) !important;
|
||||
|
||||
&.apexcharts-xaxistooltip-bottom::after {
|
||||
border-bottom-color: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
}
|
||||
|
||||
&.apexcharts-xaxistooltip-bottom::before {
|
||||
border-bottom-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
}
|
||||
|
||||
&.apexcharts-xaxistooltip-top::after {
|
||||
border-top-color: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
}
|
||||
|
||||
&.apexcharts-xaxistooltip-top::before {
|
||||
border-top-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: var(--font);
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
159
src/scss/components/_ckeditor.scss
Normal file
159
src/scss/components/_ckeditor.scss
Normal file
@@ -0,0 +1,159 @@
|
||||
/*! ckeditor.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
.ck-editor {
|
||||
/* Overrides the border radius setting in the theme. */
|
||||
--ck-border-radius: var(--radius-large);
|
||||
|
||||
/* Overrides the default font size in the theme. */
|
||||
--ck-font-size-base: 14px;
|
||||
|
||||
/* Helper variables to avoid duplication in the colors. */
|
||||
--ck-custom-background: hsl(270deg 1% 29%);
|
||||
--ck-custom-foreground: hsl(255deg 3% 18%);
|
||||
--ck-custom-border: hsl(300deg 1% 22%);
|
||||
--ck-custom-white: hsl(0deg 0% 100%);
|
||||
--ck-color-base-active: var(--primary);
|
||||
--ck-color-base-active-focus: color-mix(in oklab, var(--primary), black 10%);
|
||||
--ck-color-base-focus: color-mix(in oklab, var(--primary), black 10%);
|
||||
--ck-color-button-on-color: var(--primary);
|
||||
--ck-color-focus-border: var(--primary);
|
||||
--ck-focus-ring: 1px solid var(--ck-color-focus-border);
|
||||
|
||||
/* -- Overrides generic colors. ------------------------------------------------------------- */
|
||||
|
||||
--ck-color-base-foreground: var(--ck-custom-background);
|
||||
--ck-color-text: hsl(0deg 0% 98%);
|
||||
--ck-color-shadow-drop: hsl(0deg 0% 0% / 20%);
|
||||
--ck-color-shadow-inner: hsl(0deg 0% 0% / 10%);
|
||||
|
||||
/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
|
||||
|
||||
--ck-color-button-default-background: var(--ck-custom-background);
|
||||
--ck-color-button-default-hover-background: hsl(270deg 1% 22%);
|
||||
--ck-color-button-default-active-background: hsl(270deg 2% 20%);
|
||||
--ck-color-button-default-active-shadow: hsl(270deg 2% 23%);
|
||||
--ck-color-button-default-disabled-background: var(--ck-custom-background);
|
||||
--ck-color-button-on-background: var(--ck-custom-foreground);
|
||||
--ck-color-button-on-hover-background: hsl(255deg 4% 16%);
|
||||
--ck-color-button-on-active-background: hsl(255deg 4% 14%);
|
||||
--ck-color-button-on-active-shadow: hsl(240deg 3% 19%);
|
||||
--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
|
||||
--ck-color-button-action-background: hsl(168deg 76% 42%);
|
||||
--ck-color-button-action-hover-background: hsl(168deg 76% 38%);
|
||||
--ck-color-button-action-active-background: hsl(168deg 76% 36%);
|
||||
--ck-color-button-action-active-shadow: hsl(168deg 75% 34%);
|
||||
--ck-color-button-action-disabled-background: hsl(168deg 76% 42%);
|
||||
--ck-color-button-action-text: var(--ck-custom-white);
|
||||
--ck-color-button-save: hsl(120deg 100% 46%);
|
||||
--ck-color-button-cancel: hsl(15deg 100% 56%);
|
||||
|
||||
/* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
|
||||
|
||||
--ck-color-dropdown-panel-background: var(--ck-custom-background);
|
||||
--ck-color-dropdown-panel-border: var(--ck-custom-foreground);
|
||||
|
||||
/* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */
|
||||
|
||||
--ck-color-split-button-hover-background: var(
|
||||
--ck-color-button-default-hover-background
|
||||
);
|
||||
--ck-color-split-button-hover-border: var(--ck-custom-foreground);
|
||||
|
||||
/* -- Overrides the default .ck-input class colors. ----------------------------------------- */
|
||||
|
||||
--ck-color-input-background: var(--ck-custom-background);
|
||||
--ck-color-input-border: hsl(257deg 3% 43%);
|
||||
--ck-color-input-text: hsl(0deg 0% 98%);
|
||||
--ck-color-input-disabled-background: hsl(255deg 4% 21%);
|
||||
--ck-color-input-disabled-border: hsl(250deg 3% 38%);
|
||||
--ck-color-input-disabled-text: hsl(0deg 0% 78%);
|
||||
|
||||
/* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */
|
||||
|
||||
--ck-color-labeled-field-label-background: var(--ck-custom-background);
|
||||
|
||||
/* -- Overrides the default .ck-list class colors. ------------------------------------------ */
|
||||
|
||||
--ck-color-list-background: var(--ck-custom-background);
|
||||
--ck-color-list-button-hover-background: var(--ck-color-base-foreground);
|
||||
--ck-color-list-button-on-background: var(--ck-color-base-active);
|
||||
--ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
|
||||
--ck-color-list-button-on-text: var(--ck-color-base-background);
|
||||
|
||||
/* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
|
||||
|
||||
--ck-color-panel-background: var(--ck-custom-background);
|
||||
--ck-color-panel-border: var(--ck-custom-border);
|
||||
|
||||
/* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
|
||||
|
||||
--ck-color-toolbar-background: var(--ck-custom-background);
|
||||
--ck-color-toolbar-border: var(--ck-custom-border);
|
||||
|
||||
/* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
|
||||
|
||||
--ck-color-tooltip-background: hsl(252deg 7% 14%);
|
||||
--ck-color-tooltip-text: hsl(0deg 0% 93%);
|
||||
|
||||
/* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
|
||||
|
||||
--ck-color-image-caption-background: hsl(0deg 0% 97%);
|
||||
--ck-color-image-caption-text: hsl(0deg 0% 20%);
|
||||
|
||||
/* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
|
||||
|
||||
--ck-color-widget-blurred-border: hsl(0deg 0% 87%);
|
||||
--ck-color-widget-hover-border: hsl(43deg 100% 68%);
|
||||
--ck-color-widget-editable-focus-background: var(--ck-custom-white);
|
||||
|
||||
/* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
|
||||
|
||||
--ck-color-link-default: hsl(190deg 100% 75%);
|
||||
}
|
||||
|
||||
.ck-editor {
|
||||
font-family: var(--font);
|
||||
|
||||
.ck-labeled-field-view__input-wrapper {
|
||||
box-shadow: none !important;
|
||||
|
||||
.ck-input {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ck-insert-table-dropdown-grid-box {
|
||||
&.ck-on {
|
||||
background: var(--primary) !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ck-editor__main {
|
||||
.ck-content {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-dark {
|
||||
.ck-editor {
|
||||
.ck-editor__main {
|
||||
.ck-editor__editable {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%) !important;
|
||||
}
|
||||
|
||||
.ck-content {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
&.ck-editor__nested-editable {
|
||||
background: var(--dark-sidebar);
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
172
src/scss/components/_color-picker.scss
Normal file
172
src/scss/components/_color-picker.scss
Normal file
@@ -0,0 +1,172 @@
|
||||
/*! color-picker.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
.vacp-color-picker {
|
||||
--vacp-focus-color: hsl(
|
||||
var(--primary-h) var(--primary-s) var(--primary-l) / 60%
|
||||
) !important;
|
||||
--range-slider-focus: hsl(
|
||||
var(--primary-grey-h) var(--primary-grey-s) var(--primary-grey-l) / 60%
|
||||
) !important;
|
||||
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
max-width: 100% !important;
|
||||
|
||||
&.hide-alpha {
|
||||
.vacp-range-input-label--alpha,
|
||||
[id*='rgb-a'],
|
||||
[id*='hwb-a'],
|
||||
[id*='hsl-a'] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide-copy {
|
||||
.vacp-copy-button {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vacp-format-switch-button {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.vacp-color-inputs {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.vacp-color-input {
|
||||
border-radius: var(--radius);
|
||||
border-color: #ccc !important;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary) !important;
|
||||
box-shadow: 0 0 0 2px var(--vacp-focus-color);
|
||||
}
|
||||
}
|
||||
|
||||
.vacp-color-space-thumb {
|
||||
box-shadow: 0 0 0 2px #0002;
|
||||
}
|
||||
|
||||
.vacp-range-input {
|
||||
border-color: #ccc !important;
|
||||
// border-radius: var(--radius);
|
||||
|
||||
&:focus::-moz-range-track {
|
||||
border: 1px solid var(--primary-grey);
|
||||
box-shadow: 0 0 0 2px var(--range-slider-focus);
|
||||
}
|
||||
|
||||
&:focus::-webkit-slider-runnable-track {
|
||||
border: 1px solid var(--primary-grey);
|
||||
box-shadow: 0 0 0 2px var(--range-slider-focus);
|
||||
}
|
||||
|
||||
&:focus::-ms-track {
|
||||
border: 1px solid var(--primary-grey);
|
||||
box-shadow: 0 0 0 2px var(--range-slider-focus);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: var(--vacp-slider-track-height);
|
||||
height: var(--vacp-slider-track-height);
|
||||
margin-top: calc(-1 * (var(--vacp-spacing) / 2));
|
||||
border: 3px solid #fff;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
box-shadow: 0 0 0 2px #0002;
|
||||
transform: rotate(calc(var(--transform-direction) * 0));
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
width: var(--vacp-slider-track-height);
|
||||
height: var(--vacp-slider-track-height);
|
||||
margin-top: calc(-1 * (var(--vacp-spacing) / 2));
|
||||
border: 3px solid #fff;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
box-shadow: 0 0 0 var(--vacp-border-width) #0002;
|
||||
transform: rotate(calc(var(--transform-direction) * 0));
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
// -webkit-appearance: slider-horizontal;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
width: var(--vacp-slider-thumb-size);
|
||||
height: var(--vacp-slider-thumb-size);
|
||||
margin-top: 0;
|
||||
border: 3px solid #fff;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
box-shadow: 0 0 0 2px #0002;
|
||||
transform: rotate(calc(var(--transform-direction) * 0));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-dark {
|
||||
.vacp-color-picker {
|
||||
--range-slider-focus: hsl(
|
||||
var(--primary-grey-h) var(--primary-grey-s) var(--primary-grey-l) + 10 / 100%
|
||||
) !important;
|
||||
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%);
|
||||
|
||||
.vacp-color-input {
|
||||
background-color: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%) !important;
|
||||
color: var(--dark-dark-text);
|
||||
}
|
||||
|
||||
.vacp-format-switch-button {
|
||||
background-color: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%) !important;
|
||||
color: var(--dark-dark-text);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--dark-sidebar) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vacp-range-input--alpha {
|
||||
--vacp-tiled-background-image: linear-gradient(
|
||||
45deg,
|
||||
color-mix(in oklab, var(--dark-sidebar), white 8%) 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
color-mix(in oklab, var(--dark-sidebar), white 8%) 75%,
|
||||
color-mix(in oklab, var(--dark-sidebar), white 8%)
|
||||
),
|
||||
linear-gradient(
|
||||
45deg,
|
||||
color-mix(in oklab, var(--dark-sidebar), white 8%) 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
color-mix(in oklab, var(--dark-sidebar), white 8%) 75%,
|
||||
color-mix(in oklab, var(--dark-sidebar), white 8%)
|
||||
);
|
||||
|
||||
background-color: var(--dark-sidebar);
|
||||
background-image: var(--vacp-tiled-background-image);
|
||||
}
|
||||
|
||||
.vacp-range-input {
|
||||
border-color: #ccc !important;
|
||||
border-radius: var(--radius);
|
||||
|
||||
&:focus::-moz-range-track {
|
||||
border: 1px solid var(--range-slider-focus);
|
||||
}
|
||||
|
||||
&:focus::-webkit-slider-runnable-track {
|
||||
border: 1px solid var(--range-slider-focus);
|
||||
}
|
||||
|
||||
&:focus::-ms-track {
|
||||
border: 1px solid var(--range-slider-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
120
src/scss/components/_content.scss
Normal file
120
src/scss/components/_content.scss
Normal file
@@ -0,0 +1,120 @@
|
||||
/*! _content.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Content
|
||||
2. Content Dark mode
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Content
|
||||
========================================================================== */
|
||||
|
||||
.content {
|
||||
ol,
|
||||
ul {
|
||||
color: var(--light-text);
|
||||
font-family: var(--font);
|
||||
|
||||
&.is-light {
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: var(--background-grey);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: var(--light-text);
|
||||
|
||||
&.is-primary {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
&.is-success {
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
&.is-info {
|
||||
border-color: var(--info);
|
||||
}
|
||||
|
||||
&.is-warning {
|
||||
border-color: var(--warning);
|
||||
}
|
||||
|
||||
&.is-danger {
|
||||
border-color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
th {
|
||||
color: var(--dark-text);
|
||||
font-family: var(--font-alt);
|
||||
}
|
||||
|
||||
td {
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Content Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.content {
|
||||
ol,
|
||||
ul {
|
||||
&:not(.is-light) {
|
||||
color: var(--dark-dark-text);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: color-mix(in oklab, var(--dark-sidebar), white 10%);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%);
|
||||
|
||||
&:not(.is-primary, .is-success, .is-info, .is-warning, .is-danger) {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
}
|
||||
|
||||
&.is-primary {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
th {
|
||||
color: var(--dark-dark-text);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 14%);
|
||||
}
|
||||
|
||||
td {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 14%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-divider,
|
||||
.is-divider-vertical {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 14%);
|
||||
|
||||
&::before {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 14%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
244
src/scss/components/_credit-card.scss
Normal file
244
src/scss/components/_credit-card.scss
Normal file
@@ -0,0 +1,244 @@
|
||||
/*! credit-card.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
.card-container {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
padding: 20px 0;
|
||||
perspective: 1000px;
|
||||
|
||||
&.preload * {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.creditcard {
|
||||
width: 100%;
|
||||
max-width: 260px;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.6s;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
|
||||
&.flipped {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.front,
|
||||
.back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-width: 260px;
|
||||
backface-visibility: hidden;
|
||||
color: #47525d;
|
||||
}
|
||||
|
||||
.back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
svg#cardfront,
|
||||
svg#cardback {
|
||||
width: 100%;
|
||||
box-shadow: var(--light-box-shadow);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
#cardfront {
|
||||
.st2 {
|
||||
fill: var(--white);
|
||||
}
|
||||
|
||||
.st3 {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.st4 {
|
||||
font-size: 54.7817px;
|
||||
}
|
||||
|
||||
.st5 {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.st6 {
|
||||
font-size: 33.1112px;
|
||||
}
|
||||
|
||||
.st7 {
|
||||
opacity: 0.6;
|
||||
fill: var(--white);
|
||||
}
|
||||
|
||||
.st8 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.st9 {
|
||||
font-size: 36.5498px;
|
||||
}
|
||||
|
||||
.st10 {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.st11 {
|
||||
font-size: 16.1716px;
|
||||
}
|
||||
|
||||
.st12 {
|
||||
fill: #4c4c4c;
|
||||
}
|
||||
}
|
||||
|
||||
#cardback {
|
||||
.st0 {
|
||||
fill: none;
|
||||
color: #0f0f0f;
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
|
||||
.st2 {
|
||||
fill: #111;
|
||||
}
|
||||
|
||||
.st3 {
|
||||
fill: #f2f2f2;
|
||||
}
|
||||
|
||||
.st4 {
|
||||
fill: #d8d2db;
|
||||
}
|
||||
|
||||
.st5 {
|
||||
fill: #c4c4c4;
|
||||
}
|
||||
|
||||
.st6 {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.st7 {
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
.st8 {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.st9 {
|
||||
fill: var(--white);
|
||||
}
|
||||
|
||||
.st10 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.st11 {
|
||||
fill: #eaeaea;
|
||||
}
|
||||
|
||||
.st12 {
|
||||
font-family: 'Rock Salt', cursive;
|
||||
}
|
||||
|
||||
.st13 {
|
||||
font-size: 37.769px;
|
||||
}
|
||||
}
|
||||
|
||||
#svgname {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#ccsingle {
|
||||
position: absolute;
|
||||
inset-inline-end: 15px;
|
||||
top: 20px;
|
||||
|
||||
.iconify {
|
||||
width: 100px;
|
||||
max-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightcolor,
|
||||
.darkcolor {
|
||||
transition: fill 0.5s;
|
||||
}
|
||||
|
||||
.lightblue {
|
||||
fill: #03a9f4;
|
||||
}
|
||||
|
||||
.lightbluedark {
|
||||
fill: #0288d1;
|
||||
}
|
||||
|
||||
.red {
|
||||
fill: #ef5350;
|
||||
}
|
||||
|
||||
.reddark {
|
||||
fill: #d32f2f;
|
||||
}
|
||||
|
||||
.purple {
|
||||
fill: #ab47bc;
|
||||
}
|
||||
|
||||
.purpledark {
|
||||
fill: #7b1fa2;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
fill: #26c6da;
|
||||
}
|
||||
|
||||
.cyandark {
|
||||
fill: #0097a7;
|
||||
}
|
||||
|
||||
.green {
|
||||
fill: #66bb6a;
|
||||
}
|
||||
|
||||
.greendark {
|
||||
fill: #388e3c;
|
||||
}
|
||||
|
||||
.lime {
|
||||
fill: #d4e157;
|
||||
}
|
||||
|
||||
.limedark {
|
||||
fill: #afb42b;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
fill: #ffeb3b;
|
||||
}
|
||||
|
||||
.yellowdark {
|
||||
fill: #f9a825;
|
||||
}
|
||||
|
||||
.orange {
|
||||
fill: #ff9800;
|
||||
}
|
||||
|
||||
.orangedark {
|
||||
fill: #ef6c00;
|
||||
}
|
||||
|
||||
.grey {
|
||||
fill: #bdbdbd;
|
||||
}
|
||||
|
||||
.greydark {
|
||||
fill: #616161;
|
||||
}
|
||||
}
|
||||
}
|
||||
262
src/scss/components/_datepicker.scss
Normal file
262
src/scss/components/_datepicker.scss
Normal file
@@ -0,0 +1,262 @@
|
||||
/*! _datepicker.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
0. V-Calendar
|
||||
1. V-Calendar Dark mode
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
0. V-Calendar
|
||||
========================================================================== */
|
||||
|
||||
.vc-pane-container {
|
||||
border-radius: 0.65 (rem);
|
||||
|
||||
.vc-pane-layout {
|
||||
border-radius: 0.65 (rem);
|
||||
font-family: var(--font);
|
||||
|
||||
.vc-pane {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.vc-header {
|
||||
margin-top: 0;
|
||||
|
||||
.vc-title {
|
||||
position: relative;
|
||||
top: -4px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-weeks {
|
||||
margin-top: 0.75rem;
|
||||
|
||||
.vc-weekday {
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc-arrow {
|
||||
background: transparent;
|
||||
border-radius: var(--radius-rounded);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
.iconify {
|
||||
position: relative;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-day-content {
|
||||
font-size: 0.9rem !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-popover-content-wrapper {
|
||||
.vc-nav-popover-container {
|
||||
background: var(--dark);
|
||||
|
||||
.vc-nav-container {
|
||||
padding: 0.75rem;
|
||||
|
||||
.vc-nav-header {
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
.vc-nav-title,
|
||||
.vc-nav-arrow {
|
||||
background-color: transparent !important;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-nav-title {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.vc-nav-arrow {
|
||||
position: relative;
|
||||
top: 0.25rem;
|
||||
border-radius: var(--radius-rounded);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
min-width: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--white);
|
||||
|
||||
.iconify {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
stroke: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc-nav-items {
|
||||
.vc-nav-item {
|
||||
color: var(--white);
|
||||
background: var(--dark);
|
||||
font-family: var(--font);
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
&.is-active {
|
||||
background: var(--primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc-time-picker {
|
||||
.vc-time-header {
|
||||
.vc-time-weekday,
|
||||
.vc-time-year {
|
||||
color: var(--dark-text);
|
||||
}
|
||||
}
|
||||
|
||||
.vc-time-select-group {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.vc-base-select {
|
||||
select {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
1. V-Calendar Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
--vc-border: color-mix(in oklab, var(--dark-sidebar), white 8%) !important;
|
||||
|
||||
.vc-popover-content {
|
||||
background: var(--dark-sidebar) !important;
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 8%) !important;
|
||||
}
|
||||
|
||||
.vc-container {
|
||||
background: var(--dark-sidebar) !important;
|
||||
}
|
||||
|
||||
.vc-pane-container {
|
||||
.vc-pane-layout {
|
||||
.vc-header {
|
||||
.vc-title {
|
||||
color: var(--dark-dark-text) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc-day-content {
|
||||
color: var(--dark-dark-text);
|
||||
}
|
||||
|
||||
.vc-arrow {
|
||||
&:hover {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 4%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc-popover-content-wrapper {
|
||||
.vc-highlight-base-start,
|
||||
.vc-highlight-base-middle,
|
||||
.vc-highlight-base-end {
|
||||
background-color: color-mix(in oklab, var(--primary), white 1%) !important;
|
||||
}
|
||||
|
||||
.vc-nav-popover-container {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), black 4%) !important;
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 4%) !important;
|
||||
|
||||
.vc-nav-container {
|
||||
.vc-nav-header {
|
||||
.vc-nav-title,
|
||||
.vc-nav-arrow {
|
||||
&:hover {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc-nav-items {
|
||||
.vc-nav-item {
|
||||
color: var(--white);
|
||||
background: color-mix(in oklab, var(--dark-sidebar), black 4%) !important;
|
||||
|
||||
&:not(.is-active):hover {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%) !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: var(--primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc-time-picker {
|
||||
.vc-time-header {
|
||||
.vc-time-weekday,
|
||||
.vc-time-year {
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
|
||||
.vc-time-select-group {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.vc-base-select {
|
||||
select {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
color: var(--dark-dark-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-am-pm {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), black 4%) !important;
|
||||
|
||||
> button {
|
||||
color: var(--white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.vc-attached {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
61
src/scss/components/_divider.scss
Normal file
61
src/scss/components/_divider.scss
Normal file
@@ -0,0 +1,61 @@
|
||||
/*! divider.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
$divider-background-color: $grey-lighter !default;
|
||||
$divider-thickness: 0.1rem !default;
|
||||
$divider-font-size: $size-7 !default;
|
||||
$divider-color: $grey-light !default;
|
||||
|
||||
.is-divider,
|
||||
.is-divider-vertical {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-top: $divider-thickness solid $divider-background-color;
|
||||
height: $divider-thickness;
|
||||
margin: 2rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-divider[data-content]::after,
|
||||
.is-divider-vertical[data-content]::after {
|
||||
background: var(--white);
|
||||
color: $divider-color;
|
||||
content: attr(data-content);
|
||||
display: inline-block;
|
||||
font-size: $divider-font-size;
|
||||
padding: 0.4rem 0.8rem;
|
||||
transform: translateY(-1.1rem);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-divider-vertical {
|
||||
@include tablet {
|
||||
display: block;
|
||||
flex: none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 2rem;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
border-top: none;
|
||||
min-height: 2rem;
|
||||
|
||||
&::before {
|
||||
border-inline-start: $divider-thickness solid $divider-background-color;
|
||||
bottom: 1rem;
|
||||
content: '';
|
||||
display: block;
|
||||
inset-inline-start: 50%;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
transform: translateX(calc(var(--transform-direction) * -50%));
|
||||
}
|
||||
|
||||
&[data-content]::after {
|
||||
position: absolute;
|
||||
inset-inline-start: 50%;
|
||||
top: 50%;
|
||||
padding: 0.1rem;
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
161
src/scss/components/_forms-checkboxes.scss
Normal file
161
src/scss/components/_forms-checkboxes.scss
Normal file
@@ -0,0 +1,161 @@
|
||||
/*! _checkboxes.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Checkbox List
|
||||
2. H Toggle
|
||||
3. H Toggle Dark mode
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Checkbox list
|
||||
========================================================================== */
|
||||
|
||||
.checkboxes-list {
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
|
||||
.animated-checkbox {
|
||||
.checkmark-wrap {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
margin-inline-start: 1rem;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
line-height: 1.4;
|
||||
|
||||
&:first-child {
|
||||
font-family: var(--font-alt);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: var(--dark-text);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
font-family: var(--font);
|
||||
font-size: 0.9rem;
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. H Toggle
|
||||
========================================================================== */
|
||||
|
||||
.h-toggle {
|
||||
margin: 0 auto;
|
||||
width: 76px;
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
user-select: none;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:checked ~ .toggler {
|
||||
background: color-mix(in oklab, var(--placeholder), white 10%);
|
||||
border-color: color-mix(in oklab, var(--placeholder), white 10%);
|
||||
|
||||
.active,
|
||||
.inactive {
|
||||
transform: translateX(calc(var(--transform-direction) * 80%))
|
||||
rotate(calc(var(--transform-direction) * 360deg));
|
||||
}
|
||||
|
||||
.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.inactive {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggler {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 16px;
|
||||
width: 50px;
|
||||
border: 1.6px solid var(--placeholder);
|
||||
border-radius: 100px;
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
.active,
|
||||
.inactive {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
inset-inline-start: -10px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: var(--radius-rounded);
|
||||
background: var(--white);
|
||||
border: 1.6px solid transparent;
|
||||
box-shadow: var(--light-box-shadow);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: translateX(calc(var(--transform-direction) * 0))
|
||||
rotate(calc(var(--transform-direction) * 0));
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.iconify {
|
||||
// color: var(--white);
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.inactive {
|
||||
background: var(--white);
|
||||
border-color: var(--success);
|
||||
color: var(--success);
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--white);
|
||||
border-color: var(--light-text);
|
||||
color: var(--light-text);
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. H Toggle Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.h-toggle {
|
||||
input {
|
||||
&:checked ~ .toggler {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
}
|
||||
}
|
||||
|
||||
.toggler {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 25%) !important;
|
||||
|
||||
.active,
|
||||
.inactive {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
952
src/scss/components/_forms-general.scss
Normal file
952
src/scss/components/_forms-general.scss
Normal file
@@ -0,0 +1,952 @@
|
||||
/*! _forms-general.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. labels
|
||||
2. Inputs and textareas
|
||||
3. Inputs and textareas dark-mode
|
||||
4. Radio List
|
||||
5. Fieldset | Field | Controls
|
||||
6. Fieldset | Field | Controls Dark mode
|
||||
7. File inputs
|
||||
8. File inputs Dark mode
|
||||
9. Filepond
|
||||
10. Filepond Dark mode
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Labels
|
||||
========================================================================== */
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--dark-text);
|
||||
|
||||
&.is-smaller {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.is-narrow {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted-grey);
|
||||
}
|
||||
|
||||
label[for] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Inputs and textareas
|
||||
========================================================================== */
|
||||
|
||||
.input,
|
||||
.input:focus,
|
||||
.textarea,
|
||||
.textarea:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.input {
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
&:focus-visible {
|
||||
outline-offset: var(--accessibility-focus-outline-offset);
|
||||
outline-width: var(--accessibility-focus-outline-width);
|
||||
outline-style: var(--accessibility-focus-outline-style);
|
||||
outline-color: var(--accessibility-focus-outline-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: color-mix(in oklab, var(--fade-grey), black 4%);
|
||||
box-shadow: var(--light-box-shadow);
|
||||
|
||||
&.is-primary-focus {
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
&.is-success-focus {
|
||||
border-color: var(--success) !important;
|
||||
}
|
||||
|
||||
&.is-info-focus {
|
||||
border-color: var(--info) !important;
|
||||
}
|
||||
|
||||
&.is-warning-focus {
|
||||
border-color: var(--warning) !important;
|
||||
}
|
||||
|
||||
&.is-danger-focus {
|
||||
border-color: var(--danger) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-input {
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea {
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
&:focus {
|
||||
border-color: color-mix(in oklab, var(--fade-grey), black 4%);
|
||||
box-shadow: var(--light-box-shadow);
|
||||
|
||||
&.is-primary-focus {
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
&.is-success-focus {
|
||||
border-color: var(--success) !important;
|
||||
}
|
||||
|
||||
&.is-info-focus {
|
||||
border-color: var(--info) !important;
|
||||
}
|
||||
|
||||
&.is-warning-focus {
|
||||
border-color: var(--warning) !important;
|
||||
}
|
||||
|
||||
&.is-danger-focus {
|
||||
border-color: var(--danger) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline-offset: var(--accessibility-focus-outline-offset);
|
||||
outline-width: var(--accessibility-focus-outline-width);
|
||||
outline-style: var(--accessibility-focus-outline-style);
|
||||
outline-color: var(--accessibility-focus-outline-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. Inputs and textareas dark-mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.input,
|
||||
.textarea {
|
||||
background-color: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 4%);
|
||||
color: var(--modal-text);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 8%);
|
||||
|
||||
+ .form-icon .iconify {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: color-mix(in oklab, var(--primary-grey), black 30%) !important;
|
||||
}
|
||||
|
||||
&.is-primary-focus {
|
||||
&:focus {
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
4. Radio List
|
||||
========================================================================== */
|
||||
|
||||
.radio-list {
|
||||
padding: 6px 4px;
|
||||
|
||||
li {
|
||||
label {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:checked + .k-radio {
|
||||
.radio-knob {
|
||||
border-color: var(--primary);
|
||||
|
||||
.knob-inner {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.label-text {
|
||||
color: var(--dark-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.k-radio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
|
||||
.radio-knob {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border: 1px solid var(--primary-grey);
|
||||
border-radius: var(--radius-rounded);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.knob-inner {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
border-radius: var(--radius-rounded);
|
||||
background: var(--primary);
|
||||
transition: all 0.3s; // transition-all test
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
.label-text {
|
||||
margin-inline-start: 10px;
|
||||
color: var(--muted-grey);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
line-height: 0;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
5. Fieldset | Field | Controls
|
||||
========================================================================== */
|
||||
|
||||
.form-fieldset {
|
||||
padding: 20px 0;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
|
||||
.fieldset-heading {
|
||||
margin-bottom: 20px;
|
||||
|
||||
h4 {
|
||||
font-family: var(--font-alt);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.columns {
|
||||
.column {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select:not(.is-multiple, .is-loading)::after {
|
||||
border-color: color-mix(in oklab, var(--muted-grey), white 14%);
|
||||
border-width: 1.4px;
|
||||
}
|
||||
|
||||
.select {
|
||||
width: 100%;
|
||||
|
||||
&:not(.is-multiple) {
|
||||
&:not(.is-loading) {
|
||||
&::after {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
&::after {
|
||||
inset-inline-end: 0.75em;
|
||||
top: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
+ .icon {
|
||||
.iconify {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.lnil,
|
||||
.lnir {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
font-family: var(--font);
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
border-color: color-mix(in oklab, var(--fade-grey), black 6%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select select {
|
||||
&:focus-visible {
|
||||
outline-offset: var(--accessibility-focus-outline-offset);
|
||||
outline-width: var(--accessibility-focus-outline-width);
|
||||
outline-style: var(--accessibility-focus-outline-style);
|
||||
outline-color: var(--accessibility-focus-outline-color);
|
||||
}
|
||||
}
|
||||
|
||||
.file-label {
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
&:focus-visible,
|
||||
&:focus {
|
||||
& + .file-cta {
|
||||
outline-offset: var(--accessibility-focus-outline-offset);
|
||||
outline-width: var(--accessibility-focus-outline-width);
|
||||
outline-style: var(--accessibility-focus-outline-style);
|
||||
outline-color: var(--accessibility-focus-outline-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
&.is-horizontal {
|
||||
.field-label {
|
||||
.label {
|
||||
font-family: var(--font);
|
||||
font-size: 0.9rem;
|
||||
color: var(--modal-text) !important;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-addons {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.is-grouped {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.has-addons,
|
||||
&.is-grouped {
|
||||
.field-addon-label {
|
||||
.label {
|
||||
font-family: var(--font);
|
||||
font-size: 0.9rem;
|
||||
color: var(--modal-text) !important;
|
||||
font-weight: 400;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.field-addon-body {
|
||||
display: flex;
|
||||
|
||||
.control {
|
||||
.button {
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.select,
|
||||
.input {
|
||||
height: 38px;
|
||||
|
||||
&.currency-select {
|
||||
select {
|
||||
font-family: var(--font);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-textarea-addon {
|
||||
.textarea {
|
||||
border-end-start-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
border-bottom: none;
|
||||
border-color: color-mix(in oklab, var(--fade-grey), black 2%) !important;
|
||||
box-shadow: var(--light-box-shadow);
|
||||
}
|
||||
|
||||
.is-textarea-addon {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 12px 8px;
|
||||
background: var(--white);
|
||||
border-radius: 0 0 4px 4px;
|
||||
border: 1px solid color-mix(in oklab, var(--fade-grey), black 2%);
|
||||
border-top: none;
|
||||
box-shadow: var(--light-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
> label {
|
||||
font-family: var(--font);
|
||||
font-size: 0.9rem;
|
||||
color: var(--modal-text) !important;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
&.is-loading {
|
||||
&::after {
|
||||
inset-inline-end: 0.75em;
|
||||
top: 0.75em;
|
||||
}
|
||||
|
||||
.select {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-icon {
|
||||
position: relative;
|
||||
|
||||
.form-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&.iconify {
|
||||
font-size: 18px;
|
||||
color: var(--placeholder);
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fal,
|
||||
&.fab {
|
||||
color: var(--placeholder);
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
|
||||
&.lnil,
|
||||
&.lnir {
|
||||
font-size: 1.2rem;
|
||||
color: var(--placeholder);
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 38px;
|
||||
padding-inline-start: 38px;
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
&:focus {
|
||||
+ .form-icon {
|
||||
&.iconify {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fal,
|
||||
&.fab {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&.lnil,
|
||||
&.lnir {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-validation {
|
||||
&.has-success {
|
||||
input {
|
||||
border-color: var(--success) !important;
|
||||
box-shadow: var(--light-box-shadow);
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
|
||||
.validation-icon.is-success,
|
||||
.form-icon {
|
||||
opacity: 1 !important;
|
||||
|
||||
&.iconify,
|
||||
.form-icon.iconify {
|
||||
color: var(--success) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-error {
|
||||
input,
|
||||
select {
|
||||
border-color: var(--danger) !important;
|
||||
box-shadow: var(--light-box-shadow);
|
||||
}
|
||||
|
||||
.validation-icon.is-error,
|
||||
.form-icon {
|
||||
opacity: 1 !important;
|
||||
|
||||
&.iconify,
|
||||
.form-icon.iconify {
|
||||
color: var(--danger) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.help-text span {
|
||||
&.info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.error {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
padding-inline-end: 40px;
|
||||
}
|
||||
|
||||
.validation-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
.iconify {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
color: var(--placeholder);
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.help-text {
|
||||
display: block;
|
||||
color: var(--muted-grey);
|
||||
margin-top: 10px;
|
||||
font-size: 0.8rem;
|
||||
|
||||
span {
|
||||
&.info {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.error {
|
||||
display: none;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-results {
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
max-height: 285px;
|
||||
overflow-y: auto;
|
||||
background: var(--white);
|
||||
opacity: 0;
|
||||
border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
|
||||
border-radius: var(--radius);
|
||||
pointer-events: none;
|
||||
transform: translateY(5px);
|
||||
box-shadow: var(--light-box-shadow);
|
||||
z-index: 10;
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.placeholder-wrap {
|
||||
min-height: 240px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
|
||||
.placeholder-content {
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--font);
|
||||
font-weight: 600;
|
||||
color: var(--dark-text);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--light-text);
|
||||
font-size: 0.95rem;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in oklab, var(--fade-grey), white 4%);
|
||||
}
|
||||
|
||||
.v-avatar {
|
||||
.article {
|
||||
border-radius: var(--radius-small);
|
||||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin-inline-start: 12px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
line-height: 1.3;
|
||||
|
||||
&:first-child {
|
||||
font-family: var(--font);
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
color: var(--dark-text);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
font-size: 0.85rem;
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
6. Fieldset | Field | Controls Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.form-fieldset {
|
||||
.fieldset-heading {
|
||||
h4 {
|
||||
color: var(--dark-dark-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
&.has-textarea-addon {
|
||||
.textarea {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 4%) !important;
|
||||
}
|
||||
|
||||
.is-textarea-addon {
|
||||
background-color: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
&.has-icon {
|
||||
.input {
|
||||
&:focus {
|
||||
~ .form-icon {
|
||||
&.iconify {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&.fas,
|
||||
&.fal,
|
||||
&.far,
|
||||
&.fab,
|
||||
&.lnir,
|
||||
&.lnil {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-icon {
|
||||
&.iconify {
|
||||
color: color-mix(in oklab, var(--light-text), black 5%);
|
||||
}
|
||||
|
||||
&.fas,
|
||||
&.fal,
|
||||
&.far,
|
||||
&.fab,
|
||||
&.lnir,
|
||||
&.lnil {
|
||||
color: color-mix(in oklab, var(--light-text), black 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
&:not(.is-multiple, .is-loading) {
|
||||
&:hover {
|
||||
&::after {
|
||||
border-color: var(--dark-dark-text) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: color-mix(in oklab, var(--dark-sidebar), white 10%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%) !important;
|
||||
color: var(--modal-text);
|
||||
}
|
||||
}
|
||||
|
||||
.search-results {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), black 2%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 4%) !important;
|
||||
|
||||
.search-result {
|
||||
&:hover {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
}
|
||||
|
||||
.meta {
|
||||
span {
|
||||
&:first-child {
|
||||
color: var(--dark-dark-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
7. File inputs
|
||||
========================================================================== */
|
||||
|
||||
.file {
|
||||
&.is-default {
|
||||
&:hover {
|
||||
.file-cta {
|
||||
box-shadow: var(--light-box-shadow) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.file-cta {
|
||||
background: var(--white);
|
||||
border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
8. File inputs Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.file {
|
||||
&:not(.is-primary, .is-success, .is-info, .is-warning, .is-danger) {
|
||||
.file-cta {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
color: var(--dark-dark-text);
|
||||
}
|
||||
}
|
||||
|
||||
.file-name {
|
||||
background-color: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
9. Filepond
|
||||
========================================================================== */
|
||||
|
||||
.filepond-uploader {
|
||||
&.is-two-grid {
|
||||
.filepond--item {
|
||||
width: calc(50% - 0.5em);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-three-grid {
|
||||
.filepond--item {
|
||||
width: calc(33.3% - 0.5em);
|
||||
}
|
||||
}
|
||||
|
||||
.filepond--root {
|
||||
border: 2px dashed color-mix(in oklab, var(--fade-grey), black 4%);
|
||||
border-radius: var(--radius);
|
||||
min-height: 70px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
}
|
||||
|
||||
.filepond-profile-wrap,
|
||||
.filepond-square-wrap {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
|
||||
&.is-tiny {
|
||||
height: 68px;
|
||||
width: 68px;
|
||||
max-height: 68px;
|
||||
max-width: 68px;
|
||||
|
||||
.lnil {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-small {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
max-height: 80px;
|
||||
max-width: 80px;
|
||||
|
||||
.lnil {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.lnil {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.filepond--root {
|
||||
border-color: dashed color-mix(in oklab, var(--fade-grey), black 6%);
|
||||
}
|
||||
}
|
||||
|
||||
.lnil {
|
||||
pointer-events: none;
|
||||
font-size: 2.4rem;
|
||||
color: var(--light-text);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.filepond--root {
|
||||
border: 2px dashed color-mix(in oklab, var(--fade-grey), black 4%);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
}
|
||||
|
||||
.filepond-square-wrap {
|
||||
.filepond--root {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
10. Filepond Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.filepond-uploader,
|
||||
.filepond-profile-wrap,
|
||||
.filepond-square-wrap {
|
||||
&:hover {
|
||||
.lnil {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.filepond--root {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
}
|
||||
|
||||
.filepond--drop-label {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
|
||||
label {
|
||||
color: var(--dark-dark-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
601
src/scss/components/_forms-multiselect.scss
Normal file
601
src/scss/components/_forms-multiselect.scss
Normal file
@@ -0,0 +1,601 @@
|
||||
/*! _forms-multiselect.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
0. Multiselect base styles
|
||||
1. Rounded Select
|
||||
2. Curved Select
|
||||
3. Image / Icon select
|
||||
4. Image tags select
|
||||
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
0. Multiselect base styles
|
||||
========================================================================== */
|
||||
|
||||
.multiselect {
|
||||
font-family: var(--font);
|
||||
min-width: initial;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-color: var(--border);
|
||||
outline-offset: 0;
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
outline-offset: var(--accessibility-focus-outline-offset);
|
||||
outline-width: var(--accessibility-focus-outline-width);
|
||||
outline-color: var(--accessibility-focus-outline-color);
|
||||
outline-style: var(--accessibility-focus-outline-style);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.multiselect-caret {
|
||||
margin-inline-end: 0.85rem;
|
||||
}
|
||||
|
||||
.multiselect-dropdown {
|
||||
overflow: hidden;
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.multiselect-clear {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.multiselect-clear-icon {
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect-input {
|
||||
background: var(--white);
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.multiselect-single-label {
|
||||
font-family: var(--font);
|
||||
font-size: 0.9rem;
|
||||
|
||||
.select-label-text {
|
||||
font-family: var(--font);
|
||||
font-size: 0.9rem;
|
||||
color: var(--dark-text);
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect-placeholder,
|
||||
.multiselect-multiple-label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--light-text);
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
.multiselect-tags {
|
||||
.multiselect-tag {
|
||||
font-family: var(--font);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
padding: 1px 0 1px 8px;
|
||||
background: color-mix(in oklab, var(--widget-grey), black 4%);
|
||||
color: var(--dark-text);
|
||||
|
||||
.iconify {
|
||||
padding-inline-end: 4px;
|
||||
|
||||
&::before {
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
|
||||
&::before {
|
||||
color: var(--dark-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect-search {
|
||||
font-family: var(--font);
|
||||
font-size: 0.9rem;
|
||||
color: var(--dark-text);
|
||||
}
|
||||
|
||||
.multiselect-options {
|
||||
overflow-x: hidden;
|
||||
padding: 1rem 0.75rem;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px !important;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px !important;
|
||||
background: rgb(0 0 0 / 20%) !important;
|
||||
}
|
||||
|
||||
.multiselect-option {
|
||||
position: relative;
|
||||
border-radius: 0.5rem;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&.is-pointed {
|
||||
background: color-mix(in oklab, var(--widget-grey), black 1%);
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background: transparent !important;
|
||||
color: var(--dark-text);
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
inset-inline-end: 15px;
|
||||
content: '\f00c';
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 900;
|
||||
font-size: 0.9rem;
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.multiselect-no-options,
|
||||
.multiselect-no-results {
|
||||
width: 100%;
|
||||
font-family: var(--font);
|
||||
font-size: 0.95rem;
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-dark {
|
||||
.is-image-tags {
|
||||
&:not(.is-stacked) {
|
||||
.multiselect {
|
||||
.multiselect-tag {
|
||||
.iconify {
|
||||
&:hover {
|
||||
&::before {
|
||||
color: var(--white) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
.multiselect-tag {
|
||||
img {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 2%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
background-color: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 4%);
|
||||
color: var(--dark-dark-text);
|
||||
|
||||
.multiselect-clear {
|
||||
background-color: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
}
|
||||
|
||||
.multiselect-single-label {
|
||||
color: var(--dark-dark-text);
|
||||
}
|
||||
|
||||
.multiselect-tags-search,
|
||||
.multiselect-search {
|
||||
background: transparent;
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
.multiselect-single-label {
|
||||
.select-label-text {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect-tags {
|
||||
.multiselect-tag {
|
||||
background-color: color-mix(in oklab, var(--dark-sidebar), white 10%);
|
||||
color: var(--white);
|
||||
|
||||
i::before {
|
||||
&:hover {
|
||||
color: var(--white) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect-dropdown {
|
||||
background-color: color-mix(in oklab, var(--dark-sidebar), black 2%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 4%);
|
||||
|
||||
.multiselect-option {
|
||||
color: var(--light-text);
|
||||
|
||||
&.is-pointed {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%);
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
1. Rounded Select
|
||||
========================================================================== */
|
||||
|
||||
.is-rounded-select {
|
||||
.multiselect {
|
||||
border-radius: 500px;
|
||||
|
||||
.multiselect-clear {
|
||||
border-radius: 500px;
|
||||
}
|
||||
|
||||
.multiselect-input,
|
||||
.multiselect-search {
|
||||
border-radius: 500px;
|
||||
|
||||
&::before {
|
||||
inset-inline-end: 20px;
|
||||
}
|
||||
|
||||
.multiselect-tags {
|
||||
.multiselect-tag {
|
||||
border-radius: 15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect-options {
|
||||
border-radius: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Curved Select
|
||||
========================================================================== */
|
||||
|
||||
.is-curved-select {
|
||||
.multiselect {
|
||||
border-radius: 0.5rem;
|
||||
|
||||
.multiselect-clear {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.multiselect-input,
|
||||
.multiselect-search {
|
||||
border-radius: 0.5rem;
|
||||
|
||||
.multiselect-tags {
|
||||
.multiselect-tag {
|
||||
border-radius: 0.35rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect-options {
|
||||
border-radius: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. Image / Icon select
|
||||
========================================================================== */
|
||||
|
||||
.is-image-select,
|
||||
.is-icon-select {
|
||||
--ms-px: 0.3rem;
|
||||
|
||||
&.has-curved-images {
|
||||
.multiselect {
|
||||
.select-option-icon,
|
||||
.select-option-icon-wrap,
|
||||
.select-label-icon,
|
||||
.select-label-icon-wrap {
|
||||
border-radius: 0.35rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-rounded-images {
|
||||
.multiselect {
|
||||
.select-option-icon,
|
||||
.select-option-icon-wrap,
|
||||
.select-label-icon,
|
||||
.select-label-icon-wrap {
|
||||
border-radius: var(--radius-rounded);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
.multiselect-input {
|
||||
.multiselect-single-label {
|
||||
padding-inline-start: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.select-option-icon {
|
||||
margin-inline-end: 6px;
|
||||
height: 22px;
|
||||
min-width: 22px;
|
||||
border-radius: 0.15rem;
|
||||
}
|
||||
|
||||
.select-option-icon-wrap {
|
||||
margin-inline-end: 6px;
|
||||
height: 22px;
|
||||
min-width: 22px;
|
||||
border-radius: 0.15rem;
|
||||
font-size: 1rem;
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
.select-option-text {
|
||||
font-family: var(--font);
|
||||
font-size: 0.9rem;
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
.select-label-text {
|
||||
font-family: var(--font);
|
||||
font-size: 0.9rem;
|
||||
color: var(--dark-text);
|
||||
}
|
||||
|
||||
.select-label-icon {
|
||||
margin-inline-end: 6px;
|
||||
height: 26px;
|
||||
min-width: 26px;
|
||||
border-radius: 0.15rem;
|
||||
}
|
||||
|
||||
.select-label-icon-wrap {
|
||||
margin-inline-end: 6px;
|
||||
height: 26px;
|
||||
min-width: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0.15rem;
|
||||
font-size: 1.1rem;
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
.select-option-label {
|
||||
font-family: var(--font);
|
||||
}
|
||||
|
||||
.select-option-icon,
|
||||
.select-label-icon {
|
||||
&.is-curved {
|
||||
border-radius: 0.35rem;
|
||||
}
|
||||
|
||||
&.is-rounded {
|
||||
border-radius: var(--radius-rounded);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
4. Image tags select
|
||||
========================================================================== */
|
||||
|
||||
.is-image-tags {
|
||||
&:not(.is-curved-select, .is-rounded-select) {
|
||||
.multiselect {
|
||||
.multiselect-tag {
|
||||
&.is-user,
|
||||
&.is-image,
|
||||
&.is-icon {
|
||||
border-radius: var(--radius);
|
||||
|
||||
// padding-inline-start: 4px;
|
||||
|
||||
img {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-curved-select {
|
||||
.multiselect {
|
||||
.multiselect-tag {
|
||||
&.is-user,
|
||||
&.is-image,
|
||||
&.is-icon {
|
||||
border-radius: 0.45rem;
|
||||
|
||||
// padding-inline-start: 4px;
|
||||
|
||||
img {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-rounded-select {
|
||||
.multiselect {
|
||||
.multiselect-input {
|
||||
border-radius: 0.5rem !important;
|
||||
}
|
||||
|
||||
.multiselect-tag {
|
||||
&.is-user,
|
||||
&.is-image,
|
||||
&.is-icon {
|
||||
// padding-inline-start: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-stacked {
|
||||
&.is-rounded-select {
|
||||
.multiselect {
|
||||
.multiselect-tags > span {
|
||||
&:not(:first-child) {
|
||||
margin-inline-start: -12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
.multiselect-tag {
|
||||
padding: 0 !important;
|
||||
background: none !important;
|
||||
margin-inline-start: 0 !important;
|
||||
margin-inline-end: 0 !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
i::before {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
border: 2px solid var(--white);
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
i::before {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
inset-inline-end: 0;
|
||||
background: var(--white);
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
min-width: 14px !important;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
.multiselect-tags {
|
||||
padding-inline-start: 4px;
|
||||
}
|
||||
|
||||
.multiselect-tag {
|
||||
position: relative;
|
||||
|
||||
&.is-user,
|
||||
&.is-image,
|
||||
&.is-icon {
|
||||
padding: 4px 6px;
|
||||
border-radius: 22px;
|
||||
margin: 3px 3px 8px;
|
||||
|
||||
img {
|
||||
min-width: 26px;
|
||||
border-radius: var(--radius-rounded);
|
||||
height: 26px;
|
||||
margin-inline-end: 8px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
i::before {
|
||||
color: var(--light-text);
|
||||
border-radius: var(--radius-rounded);
|
||||
margin-inline-start: 0.5rem;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 22px;
|
||||
transition: color 0.3s background-color 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
5. Autocomplete select
|
||||
========================================================================== */
|
||||
|
||||
.is-autocomplete-select {
|
||||
.multiselect {
|
||||
.multiselect-single-label,
|
||||
.multiselect-placeholder {
|
||||
padding-inline-start: 40px !important;
|
||||
}
|
||||
|
||||
.multiselect-search {
|
||||
padding-inline-start: 40px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
6. Minimal select
|
||||
========================================================================== */
|
||||
|
||||
.is-minimal-select {
|
||||
.multiselect {
|
||||
.multiselect-input {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
112
src/scss/components/_forms-outer.scss
Normal file
112
src/scss/components/_forms-outer.scss
Normal file
@@ -0,0 +1,112 @@
|
||||
/*! form-layout.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
.form-layout {
|
||||
.form-outer {
|
||||
@include vuero-s-card;
|
||||
|
||||
padding: 0;
|
||||
|
||||
.form-header {
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
&.is-stuck {
|
||||
background: var(--white);
|
||||
padding-inline-end: 80px;
|
||||
border-inline-start: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
|
||||
}
|
||||
|
||||
.form-header-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.left {
|
||||
h3 {
|
||||
font-family: var(--font-alt);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-body {
|
||||
padding: 20px 40px 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-dark {
|
||||
.form-layout {
|
||||
.form-outer {
|
||||
@include vuero-card--dark;
|
||||
|
||||
.form-header {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
|
||||
&.is-stuck {
|
||||
background: var(--dark-sidebar);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 6%);
|
||||
}
|
||||
|
||||
.left {
|
||||
h3 {
|
||||
color: var(--dark-dark-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-body {
|
||||
.field {
|
||||
.control {
|
||||
.input,
|
||||
.textarea {
|
||||
&:focus {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width <= 767px) {
|
||||
.form-layout {
|
||||
.form-outer {
|
||||
.form-header {
|
||||
.form-header-inner {
|
||||
flex-direction: column;
|
||||
|
||||
.left {
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 100%;
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
|
||||
.button {
|
||||
margin: 0;
|
||||
width: 49%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
187
src/scss/components/_forms-slider.scss
Normal file
187
src/scss/components/_forms-slider.scss
Normal file
@@ -0,0 +1,187 @@
|
||||
/*! _forms-slider.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Vue Slider
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Vue Slider
|
||||
========================================================================== */
|
||||
|
||||
.slider-target {
|
||||
.slider-base {
|
||||
.slider-connects {
|
||||
.slider-connect {
|
||||
background: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.slider-tooltip {
|
||||
font-size: 0.9rem;
|
||||
border: 1px solid var(--primary);
|
||||
background: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-slider-info {
|
||||
.slider-target {
|
||||
.slider-base {
|
||||
.slider-connects {
|
||||
.slider-connect {
|
||||
background: var(--info);
|
||||
}
|
||||
}
|
||||
|
||||
.slider-tooltip {
|
||||
border: 1px solid var(--info);
|
||||
background: var(--info);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-slider-success {
|
||||
.slider-target {
|
||||
.slider-base {
|
||||
.slider-connects {
|
||||
.slider-connect {
|
||||
background: var(--success);
|
||||
}
|
||||
}
|
||||
|
||||
.slider-tooltip {
|
||||
border: 1px solid var(--success);
|
||||
background: var(--success);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-slider-warning {
|
||||
.slider-target {
|
||||
.slider-base {
|
||||
.slider-connects {
|
||||
.slider-connect {
|
||||
background: var(--warning);
|
||||
}
|
||||
}
|
||||
|
||||
.slider-tooltip {
|
||||
border: 1px solid var(--warning);
|
||||
background: var(--warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-slider-danger {
|
||||
.slider-target {
|
||||
.slider-base {
|
||||
.slider-connects {
|
||||
.slider-connect {
|
||||
background: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
.slider-tooltip {
|
||||
border: 1px solid var(--danger);
|
||||
background: var(--danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-rounded-tooltip {
|
||||
.slider-target {
|
||||
.slider-base {
|
||||
.slider-handle {
|
||||
&:focus-visible {
|
||||
outline-offset: var(--accessibility-focus-outline-offset);
|
||||
outline-width: var(--accessibility-focus-outline-width);
|
||||
outline-color: var(--accessibility-focus-outline-color);
|
||||
outline-style: var(--accessibility-focus-outline-style);
|
||||
}
|
||||
|
||||
.slider-tooltip {
|
||||
border-radius: 100px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-curved-tooltip {
|
||||
.slider-target {
|
||||
.slider-base {
|
||||
.slider-handle {
|
||||
&:focus-visible {
|
||||
outline-offset: var(--accessibility-focus-outline-offset);
|
||||
outline-width: var(--accessibility-focus-outline-width);
|
||||
outline-color: var(--accessibility-focus-outline-color);
|
||||
outline-style: var(--accessibility-focus-outline-style);
|
||||
}
|
||||
|
||||
.slider-tooltip {
|
||||
border-radius: 0.75rem;
|
||||
min-width: 28px;
|
||||
padding-inline-start: 0.75rem;
|
||||
padding-inline-end: 0.75rem;
|
||||
height: 28px;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-squared-tooltip {
|
||||
.slider-target {
|
||||
.slider-base {
|
||||
.slider-handle {
|
||||
&:focus-visible {
|
||||
outline-offset: var(--accessibility-focus-outline-offset);
|
||||
outline-width: var(--accessibility-focus-outline-width);
|
||||
outline-color: var(--accessibility-focus-outline-color);
|
||||
outline-style: var(--accessibility-focus-outline-style);
|
||||
}
|
||||
|
||||
.slider-tooltip {
|
||||
border-radius: 0.5rem;
|
||||
min-width: 28px;
|
||||
padding-inline-start: 0.75rem;
|
||||
padding-inline-end: 0.75rem;
|
||||
height: 28px;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-dark {
|
||||
.slider-target {
|
||||
.slider-base {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
}
|
||||
|
||||
.slider-handle {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 55%);
|
||||
}
|
||||
}
|
||||
}
|
||||
47
src/scss/components/_links.scss
Normal file
47
src/scss/components/_links.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
/*! _links.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Action Link
|
||||
2. Action Link Dark Mode
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Action Link
|
||||
========================================================================== */
|
||||
|
||||
.action-link {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
color: var(--primary);
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-bottom: 1.6px dotted var(--primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Action Link Dark Mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.action-link {
|
||||
color: var(--primary);
|
||||
|
||||
&::after {
|
||||
border-bottom-color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
100
src/scss/components/_lists.scss
Normal file
100
src/scss/components/_lists.scss
Normal file
@@ -0,0 +1,100 @@
|
||||
/*! _lists.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. User List
|
||||
2. User List Dark mode
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. User List
|
||||
========================================================================== */
|
||||
|
||||
.user-list {
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.user-list-avatar img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.user-list-info {
|
||||
margin: 0 10px;
|
||||
|
||||
.name {
|
||||
font-family: var(--font-alt);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: var(--dark-text);
|
||||
}
|
||||
|
||||
.position {
|
||||
font-family: var(--font);
|
||||
font-size: 12px;
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
|
||||
.user-list-status {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 100px;
|
||||
background: var(--fade-grey);
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: 1rem;
|
||||
|
||||
&.is-offline {
|
||||
background: var(--fade-grey);
|
||||
}
|
||||
|
||||
&.is-online {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
&.is-busy {
|
||||
background: var(--warning);
|
||||
}
|
||||
}
|
||||
|
||||
.user-list-icons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-inline-start: auto;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: var(--radius-rounded);
|
||||
color: color-mix(in oklab, var(--light-text), white 15%);
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
&:hover {
|
||||
color: var(--light-text);
|
||||
background: color-mix(in oklab, var(--fade-grey), white 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. User List Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.user-list {
|
||||
.user-list-icons {
|
||||
a:hover {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
10
src/scss/components/_nprogress.scss
Normal file
10
src/scss/components/_nprogress.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
/*! nprogress.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
#nprogress .bar {
|
||||
background: var(--primary);
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
#nprogress .spinner {
|
||||
display: none;
|
||||
}
|
||||
45
src/scss/components/_placeload.scss
Normal file
45
src/scss/components/_placeload.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
/*! _placeload.scss | Huro | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Placeload base styles
|
||||
2. Placeload dark styles
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Placeload base styles
|
||||
========================================================================== */
|
||||
|
||||
.content-shape {
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.loads {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: placeload;
|
||||
animation-timing-function: linear;
|
||||
background: var(--placeload-nuance-from);
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--placeload-nuance-from) 8%,
|
||||
var(--placeload-nuance-to) 18%,
|
||||
var(--placeload-nuance-from) 33%
|
||||
);
|
||||
background-size: 1200px 104px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes placeload {
|
||||
0% {
|
||||
background-position: -468px 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 468px 0;
|
||||
}
|
||||
}
|
||||
|
||||
608
src/scss/components/_popovers.scss
Normal file
608
src/scss/components/_popovers.scss
Normal file
@@ -0,0 +1,608 @@
|
||||
/*! _popovers.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Web UI Popover
|
||||
2. Web UI Popover Dark mode
|
||||
3. User profile popovers
|
||||
4. User profile popovers Dark mode
|
||||
5. Simple popover
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Web UI Popover
|
||||
========================================================================== */
|
||||
|
||||
.tippy-box[data-theme~='light'] {
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--light-box-shadow);
|
||||
|
||||
.tippy-content {
|
||||
// padding: 0 !important;
|
||||
// border: none
|
||||
}
|
||||
}
|
||||
|
||||
.v-popover {
|
||||
box-shadow: rgb(0 0 0 / 4%) 0 3px 10px 4px !important;
|
||||
background: var(--white) !important;
|
||||
color: var(--dark-text) !important;
|
||||
margin-top: -20px !important;
|
||||
border: 1px solid var(--fade-grey);
|
||||
|
||||
&.top > .webui-arrow {
|
||||
border-top-color: var(--white) !important;
|
||||
}
|
||||
|
||||
&.bottom-right > .webui-arrow {
|
||||
border-inline-end-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
}
|
||||
|
||||
&.top-right > .webui-arrow {
|
||||
border-inline-end-color: transparent !important;
|
||||
|
||||
&::after {
|
||||
border-top-color: var(--white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.top-left > .webui-arrow {
|
||||
border-top-color: var(--white) !important;
|
||||
}
|
||||
|
||||
&.left > .webui-arrow {
|
||||
border-inline-start-color: transparent !important;
|
||||
}
|
||||
|
||||
.webui-arrow {
|
||||
border-top-color: transparent !important;
|
||||
border-inline-end-color: transparent !important;
|
||||
|
||||
&::after {
|
||||
border-top-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-popover-title {
|
||||
background-color: var(--white) !important;
|
||||
border-bottom: none !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.v-popover-content {
|
||||
font-size: 0.75rem !important;
|
||||
|
||||
&.is-text {
|
||||
max-width: 200px;
|
||||
padding: 8px 5px 4px;
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
.popover-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.v-avatar,
|
||||
.v-icon {
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: var(--font-alt);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: var(--dark);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
padding: 0;
|
||||
|
||||
p {
|
||||
font-family: var(--font);
|
||||
font-size: 0.9rem;
|
||||
color: var(--light-text);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover-flex-block {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
|
||||
.staff-avatar {
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
border-radius: var(--radius-rounded);
|
||||
}
|
||||
|
||||
.content-block {
|
||||
margin-inline-start: 10px;
|
||||
|
||||
label,
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
label {
|
||||
color: color-mix(in oklab, var(--dark-text), white 35%);
|
||||
text-transform: uppercase;
|
||||
font-size: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.fa.fa-star,
|
||||
.fa.fa-star-half {
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.icon-block {
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.iconify {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
color: var(--dark-text);
|
||||
stroke-width: 1.3px;
|
||||
|
||||
&.is-medium {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Web UI Popover Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.v-popover {
|
||||
background: var(--dark-sidebar) !important;
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 6%);
|
||||
|
||||
&.top {
|
||||
.webui-arrow {
|
||||
border-top-color: var(--dark-sidebar) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
.webui-arrow {
|
||||
border-top-color: transparent !important;
|
||||
border-inline-end-color: var(--dark-sidebar) !important;
|
||||
|
||||
&::after {
|
||||
border-inline-end-color: var(--dark-sidebar) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
.webui-arrow {
|
||||
&::after {
|
||||
border-inline-start-color: var(--dark-sidebar) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
.webui-arrow {
|
||||
&::after {
|
||||
border-bottom-color: var(--dark-sidebar) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bottom-right,
|
||||
&.bottom-left {
|
||||
.webui-arrow {
|
||||
&::after {
|
||||
border-bottom-color: var(--dark-sidebar) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.top-right {
|
||||
.webui-arrow {
|
||||
&::after {
|
||||
border-top-color: var(--dark-sidebar) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.top-left {
|
||||
.webui-arrow {
|
||||
border-top-color: var(--dark-sidebar) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-popover-inner {
|
||||
background: var(--dark-sidebar) !important;
|
||||
border-color: var(--dark-sidebar) !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: color-mix(in oklab, var(--primary-grey), black 5%) !important;
|
||||
}
|
||||
|
||||
.country img,
|
||||
.primary-skill img {
|
||||
border-color: var(--dark-sidebar) !important;
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
a {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
span {
|
||||
color: color-mix(in oklab, var(--primary-grey), black 10%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.media + .media {
|
||||
border-top-color: color-mix(in oklab, var(--dark-sidebar), white 10%) !important;
|
||||
}
|
||||
|
||||
.loader-overlay {
|
||||
background: rgb(42 42 44 / 95%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. User profile popovers
|
||||
========================================================================== */
|
||||
|
||||
.v-popover-profile {
|
||||
.profile-popover-block,
|
||||
.skill-popover-block {
|
||||
max-width: 260px;
|
||||
text-align: inset-inline-start;
|
||||
|
||||
.profile-popover-wrapper,
|
||||
.skill-popover-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
padding: 11px 6px;
|
||||
|
||||
.popover-avatar,
|
||||
.popover-fake-avatar {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
min-width: 44px;
|
||||
z-index: 0;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: var(--radius-rounded);
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
inset-inline-end: -2px;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1.6px solid var(--white);
|
||||
border-radius: var(--radius-rounded);
|
||||
}
|
||||
}
|
||||
|
||||
.popover-fake-avatar {
|
||||
background: color-mix(in oklab, var(--fade-grey), white 3%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-rounded);
|
||||
|
||||
&.is-primary {
|
||||
background: color-mix(in oklab, var(--primary), white 42%);
|
||||
|
||||
span {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-accent {
|
||||
background: color-mix(in oklab, var(--primary), white 36%);
|
||||
|
||||
span {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-success {
|
||||
background: color-mix(in oklab, var(--success), white 45%);
|
||||
|
||||
span {
|
||||
color: var(--success);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-info {
|
||||
background: color-mix(in oklab, var(--info), white 45%);
|
||||
|
||||
span {
|
||||
color: var(--info);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-warning {
|
||||
background: color-mix(in oklab, var(--warning), white 32%);
|
||||
|
||||
span {
|
||||
color: var(--warning);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-danger {
|
||||
background: color-mix(in oklab, var(--danger), white 36%);
|
||||
|
||||
span {
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-h-purple {
|
||||
background: color-mix(in oklab, var(--purple), white 36%);
|
||||
|
||||
span {
|
||||
color: var(--purple);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-h-orange {
|
||||
background: color-mix(in oklab, var(--orange), white 18%);
|
||||
|
||||
span {
|
||||
color: var(--orange);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-h-blue {
|
||||
background: color-mix(in oklab, var(--blue), white 32%);
|
||||
|
||||
span {
|
||||
color: var(--blue);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-h-red {
|
||||
background: color-mix(in oklab, var(--red), white 38%);
|
||||
|
||||
span {
|
||||
color: var(--red);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-h-green {
|
||||
background: color-mix(in oklab, var(--green), white 22%);
|
||||
|
||||
span {
|
||||
color: var(--green);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-h-yellow {
|
||||
background: color-mix(in oklab, var(--yellow), white 22%);
|
||||
|
||||
span {
|
||||
color: color-mix(in oklab, var(--yellow), black 8%);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.1rem;
|
||||
font-family: var(--font);
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
color: var(--dark-text);
|
||||
}
|
||||
}
|
||||
|
||||
.popover-meta {
|
||||
margin-inline-start: 16px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
|
||||
&.user-meta,
|
||||
&.skill-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.username,
|
||||
.skill-name {
|
||||
display: block;
|
||||
font-family: var(--font-alt);
|
||||
line-height: 1.2;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.location {
|
||||
font-size: 0.75rem;
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
|
||||
&.job-title,
|
||||
&.skill-type {
|
||||
font-size: 0.8rem;
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.bio,
|
||||
&.skill-description {
|
||||
font-size: 0.8rem;
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover-actions {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 8px 12px 12px;
|
||||
|
||||
.button {
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.popover-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
max-width: 30px;
|
||||
margin: 0 2px;
|
||||
border-radius: var(--radius-rounded);
|
||||
transition: all 0.3s; // transition-all test
|
||||
cursor: pointer;
|
||||
pointer-events: all !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: color-mix(in oklab, var(--fade-grey), white 3%);
|
||||
|
||||
.iconify {
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
|
||||
.iconify {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loader-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgb(255 255 255 / 95%);
|
||||
opacity: 0;
|
||||
transition: all 0.3s; // transition-all test
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.loader {
|
||||
&.is-loading {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
min-height: 24px;
|
||||
min-width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
4. User profile popovers Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.tippy-box {
|
||||
background: var(--dark-sidebar) !important;
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 6%);
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~='light'][data-placement^='top'] > .tippy-arrow::before {
|
||||
border-top-color: var(--dark-sidebar) !important;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~='light'][data-placement^='bottom'] > .tippy-arrow::before {
|
||||
border-bottom-color: var(--dark-sidebar) !important;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~='light'][data-placement^='left'] > .tippy-arrow::before {
|
||||
border-inline-start-color: var(--dark-sidebar) !important;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~='light'][data-placement^='right'] > .tippy-arrow::before {
|
||||
border-inline-end-color: var(--dark-sidebar) !important;
|
||||
}
|
||||
|
||||
.tippy-profile {
|
||||
background: var(--dark-sidebar) !important;
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 6%);
|
||||
}
|
||||
|
||||
.v-popover-profile {
|
||||
background: var(--dark-sidebar) !important;
|
||||
|
||||
.profile-popover-block {
|
||||
.badge {
|
||||
border-color: var(--dark-sidebar) !important;
|
||||
}
|
||||
|
||||
.user-meta,
|
||||
.skill-meta {
|
||||
.username,
|
||||
.skill-name {
|
||||
color: color-mix(in oklab, var(--primary-grey), black 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.job-title,
|
||||
.skill-type {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.popover-actions .popover-icon:hover {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
|
||||
|
||||
.iconify {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
88
src/scss/components/_profile-stats.scss
Normal file
88
src/scss/components/_profile-stats.scss
Normal file
@@ -0,0 +1,88 @@
|
||||
/*! profile-stats.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
.profile-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
|
||||
.profile-stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--light-text);
|
||||
font-family: var(--font);
|
||||
|
||||
span {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.lnil {
|
||||
font-size: 1.2rem;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
height: 25px;
|
||||
width: 2px;
|
||||
border-inline-end: 1px solid color-mix(in oklab, var(--fade-grey), black 6%);
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.socials {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
background: var(--white);
|
||||
border: 1px solid color-mix(in oklab, var(--fade-grey), black 6%);
|
||||
box-shadow: var(--light-box-shadow);
|
||||
border-radius: var(--radius-rounded);
|
||||
margin: 0 2px;
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary);
|
||||
|
||||
.iconify {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.fab {
|
||||
font-size: 0.9rem;
|
||||
color: var(--light-text);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-dark {
|
||||
.profile-stats {
|
||||
.separator {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 20%);
|
||||
}
|
||||
|
||||
.socials {
|
||||
a {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: var(--primary);
|
||||
|
||||
.iconify {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
src/scss/components/_shiki.scss
Normal file
8
src/scss/components/_shiki.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
.is-dark .shiki,
|
||||
.is-dark .shiki span {
|
||||
color: var(--shiki-dark) !important;
|
||||
// background-color: var(--shiki-dark-bg) !important;
|
||||
font-style: var(--shiki-dark-font-style) !important;
|
||||
font-weight: var(--shiki-dark-font-weight) !important;
|
||||
text-decoration: var(--shiki-dark-text-decoration) !important;
|
||||
}
|
||||
11
src/scss/components/_stay-focus.scss
Normal file
11
src/scss/components/_stay-focus.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
/*! stay-focus.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
.stay-focus-container {
|
||||
&:hover {
|
||||
.stay-focus-element:not(:hover) {
|
||||
transition: all 10s ease-in;
|
||||
transition-delay: 2s;
|
||||
filter: blur(4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
631
src/scss/components/_steps.scss
Normal file
631
src/scss/components/_steps.scss
Normal file
@@ -0,0 +1,631 @@
|
||||
/*! _steps.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Steps
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Steps
|
||||
========================================================================== */
|
||||
|
||||
/* stylelint-disable scss/no-global-function-names */
|
||||
|
||||
$steps-default-color: $grey-lighter !default;
|
||||
$steps-completed-color: var(--primary) !default;
|
||||
$steps-active-color: var(--primary) !default;
|
||||
$steps-horizontal-min-width: 10em !default;
|
||||
$steps-vertical-min-height: 4em !default;
|
||||
$steps-marker-size: 2 !default;
|
||||
$steps-divider-size: 0.4em !default;
|
||||
$steps-gap-size: 0.3rem !default;
|
||||
$steps-hollow-border-size: 0.3em !default;
|
||||
$steps-thin-divider-size: 1px !default;
|
||||
$steps-thin-marker-size: 0.8em !default;
|
||||
|
||||
@mixin steps-horizontal {
|
||||
@include tablet {
|
||||
&:not(.is-vertical) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-horizontal {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin steps-vertical {
|
||||
@include mobile {
|
||||
&:not(.is-horizontal) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-vertical {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin steps-all-segments {
|
||||
&.steps .steps-segment {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin steps-active-segment {
|
||||
&.steps .steps-segment.is-active {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin steps-inactive-segments {
|
||||
&.steps .steps-segment.is-active ~ .steps-segment {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
.steps {
|
||||
@include block;
|
||||
|
||||
.steps-segment {
|
||||
position: relative;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
// This will contain the horizontal or vertical divider
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@include steps-vertical {
|
||||
.steps-segment {
|
||||
display: block;
|
||||
|
||||
&:not(:last-child) {
|
||||
min-height: $steps-vertical-min-height;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-short {
|
||||
.steps-segment {
|
||||
flex-grow: 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
// this is commented because text would be running perpendicular to the line, so we won't need as much room
|
||||
// min-height: $steps-horizontal-min-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-short.is-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.is-short.is-bottom {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&:not(.is-short) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.steps-segment:not(:last-child) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include steps-horizontal {
|
||||
display: flex;
|
||||
|
||||
.steps-segment:not(:last-child) {
|
||||
flex-basis: 1rem;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
&.is-narrow {
|
||||
.steps-segment {
|
||||
flex-grow: 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
min-width: $steps-horizontal-min-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-narrow.is-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.is-narrow.is-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&.has-content-centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.is-balanced,
|
||||
&.has-content-centered {
|
||||
.steps-segment:last-child {
|
||||
flex-basis: 1rem;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-narrow.has-content-centered {
|
||||
.steps-segment:last-child {
|
||||
flex-grow: 0;
|
||||
min-width: $steps-horizontal-min-width;
|
||||
}
|
||||
}
|
||||
|
||||
.steps-content.is-divider-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Marker style
|
||||
}
|
||||
|
||||
.steps-marker {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
border-radius: 50%;
|
||||
font-weight: $weight-bold;
|
||||
justify-content: center;
|
||||
|
||||
// Position & z-index are needed to put it above the divider
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
// Use a mixin to define all ratios in the same spot
|
||||
}
|
||||
|
||||
@mixin steps-size($size) {
|
||||
font-size: $size;
|
||||
|
||||
.steps-marker {
|
||||
height: $size * $steps-marker-size;
|
||||
width: $size * $steps-marker-size;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@include steps-vertical {
|
||||
// Draw a vertical divider
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.steps-segment:not(:last-child)::after {
|
||||
// top and bottom position is almost touching the inner side of a hollow border marker
|
||||
bottom: -$steps-gap-size * 0.8;
|
||||
inset-inline-start: calc(
|
||||
#{$size * ($steps-marker-size * 0.5)} - (#{$steps-divider-size * 0.5})
|
||||
);
|
||||
top: ($size * $steps-marker-size) - ($steps-gap-size * 0.8);
|
||||
width: $steps-divider-size;
|
||||
}
|
||||
|
||||
// Align the content with the marker
|
||||
.steps-content {
|
||||
margin-inline-start: calc(#{$size * $steps-marker-size * 0.5} + 0.5em);
|
||||
margin-top: -$size * $steps-marker-size;
|
||||
padding-inline-start: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.steps-content.is-divider-content {
|
||||
margin-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.has-content-centered {
|
||||
.steps-content {
|
||||
padding-top: calc(#{$size * $steps-marker-size * 0.5} - 0.5em);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-thin) {
|
||||
&.has-gaps .steps-segment,
|
||||
.steps-segment.has-gaps {
|
||||
&:not(:last-child)::after {
|
||||
top: ($size * $steps-marker-size) + $steps-gap-size;
|
||||
bottom: $steps-gap-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include steps-horizontal {
|
||||
// Draw a horizontal divider
|
||||
.steps-segment:not(:last-child)::after {
|
||||
height: $steps-divider-size;
|
||||
|
||||
// top and bottom position is almost touching the inner side of a hollow border marker
|
||||
inset-inline-start: ($size * $steps-marker-size) - ($steps-gap-size * 0.8);
|
||||
inset-inline-end: -$steps-gap-size * 0.8;
|
||||
top: calc(#{$size * ($steps-marker-size * 0.5)} - (#{$steps-divider-size * 0.5}));
|
||||
}
|
||||
|
||||
&.has-content-above .steps-segment:not(:last-child)::after {
|
||||
bottom: calc(#{$size * $steps-marker-size * 0.5} - (#{$steps-divider-size * 0.5}));
|
||||
top: auto;
|
||||
}
|
||||
|
||||
// extra data
|
||||
.extra-data {
|
||||
inset-inline-start: calc(
|
||||
50% + #{($size * $steps-marker-size * 0.5) + $steps-gap-size}
|
||||
);
|
||||
inset-inline-end: calc(
|
||||
-50% + #{($size * $steps-marker-size * 0.5) + $steps-gap-size}
|
||||
);
|
||||
bottom: 100%;
|
||||
position: absolute;
|
||||
|
||||
&.has-overflow-right {
|
||||
overflow: visible;
|
||||
inset-inline-end: auto;
|
||||
white-space: nowrap;
|
||||
min-width: calc(
|
||||
100% - #{$size * $steps-marker-size * 0.5} - (#{$steps-divider-size * 0.5})
|
||||
);
|
||||
}
|
||||
|
||||
&.has-overflow-left {
|
||||
overflow: visible;
|
||||
inset-inline-start: auto;
|
||||
white-space: nowrap;
|
||||
min-width: calc(
|
||||
100% - #{$size * $steps-marker-size * 0.5} - (#{$steps-divider-size * 0.5})
|
||||
);
|
||||
}
|
||||
|
||||
&.has-overflow-centered {
|
||||
overflow: visible;
|
||||
inset-inline-start: auto;
|
||||
white-space: nowrap;
|
||||
min-width: calc(
|
||||
100% - #{$size * $steps-marker-size * 0.5} - (#{$steps-divider-size * 0.5})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&.has-content-above .extra-data {
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
// Align the content with the marker
|
||||
.steps-content {
|
||||
margin-inline-start: $size * $steps-marker-size * 0.5;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-inline-end: -$size * $steps-marker-size * 0.5;
|
||||
}
|
||||
|
||||
&.is-divider-content {
|
||||
margin-inline-end: -$size * $steps-marker-size * 0.5;
|
||||
padding-inline-start: 2em;
|
||||
padding-inline-end: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-content-centered {
|
||||
.steps-segment:not(:last-child)::after {
|
||||
inset-inline-start: 50%;
|
||||
inset-inline-end: -50%;
|
||||
}
|
||||
|
||||
.steps-marker {
|
||||
position: absolute;
|
||||
inset-inline-start: calc(50% - #{$size * $steps-marker-size * 0.5});
|
||||
}
|
||||
|
||||
.steps-content {
|
||||
margin-top: $size * $steps-marker-size;
|
||||
margin-inline-start: 0.5em;
|
||||
margin-inline-end: 0.5em;
|
||||
padding-top: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-content-above.has-content-centered .steps-content {
|
||||
margin-bottom: $size * $steps-marker-size;
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
|
||||
&:not(.is-thin) {
|
||||
&.has-gaps .steps-segment,
|
||||
.steps-segment.has-gaps {
|
||||
&:not(:last-child)::after {
|
||||
inset-inline-start: ($size * $steps-marker-size) + $steps-gap-size;
|
||||
inset-inline-end: $steps-gap-size;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-content-centered {
|
||||
&.has-gaps .steps-segment,
|
||||
.steps-segment.has-gaps {
|
||||
&:not(:last-child)::after {
|
||||
inset-inline-start: calc(
|
||||
50% + #{($size * $steps-marker-size * 0.5) + $steps-gap-size}
|
||||
);
|
||||
inset-inline-end: calc(
|
||||
-50% + #{($size * $steps-marker-size * 0.5) + $steps-gap-size}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.steps {
|
||||
@include steps-size($size-normal);
|
||||
}
|
||||
|
||||
.steps.is-small {
|
||||
@include steps-size($size-small);
|
||||
}
|
||||
|
||||
.steps.is-medium {
|
||||
@include steps-size($size-medium);
|
||||
}
|
||||
|
||||
.steps.is-large {
|
||||
@include steps-size($size-large);
|
||||
}
|
||||
|
||||
// Divider Default Colors
|
||||
.steps-segment {
|
||||
&::after {
|
||||
background-color: $steps-completed-color;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
&::after {
|
||||
background-color: $steps-default-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active ~ .steps-segment {
|
||||
&::after {
|
||||
background-color: $steps-default-color;
|
||||
}
|
||||
|
||||
// Marker Default Colors
|
||||
}
|
||||
}
|
||||
|
||||
.steps:not(.is-hollow) {
|
||||
.steps-marker:not(.is-hollow) {
|
||||
background-color: $steps-completed-color;
|
||||
color: findColorInvert($steps-completed-color);
|
||||
}
|
||||
|
||||
.steps-segment.is-active {
|
||||
.steps-marker:not(.is-hollow) {
|
||||
background-color: $steps-active-color;
|
||||
color: findColorInvert($steps-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
.steps-segment.is-active {
|
||||
& ~ .steps-segment .steps-marker:not(.is-hollow) {
|
||||
background-color: $steps-default-color;
|
||||
color: findColorInvert($steps-default-color);
|
||||
}
|
||||
|
||||
// Hollow style
|
||||
}
|
||||
}
|
||||
|
||||
.steps.is-hollow .steps-marker,
|
||||
.steps-marker.is-hollow {
|
||||
border: $steps-hollow-border-size solid $steps-completed-color;
|
||||
}
|
||||
|
||||
.steps.is-hollow .is-active .steps-marker,
|
||||
.steps .is-active .steps-marker.is-hollow {
|
||||
border-color: $steps-active-color;
|
||||
}
|
||||
|
||||
.steps.is-hollow .steps-segment.is-active ~ .steps-segment .steps-marker,
|
||||
.steps-segment.is-active ~ .steps-segment .steps-marker.is-hollow {
|
||||
border-color: $steps-default-color;
|
||||
}
|
||||
|
||||
// Override marker color per step
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
.steps:not(.is-hollow) .steps-marker:not(.is-hollow) {
|
||||
&.is-#{$name} {
|
||||
background-color: $color !important;
|
||||
color: $color-invert !important;
|
||||
}
|
||||
}
|
||||
|
||||
.steps.is-hollow .steps-marker,
|
||||
.steps .steps-marker.is-hollow {
|
||||
&.is-#{$name} {
|
||||
border-color: $color !important;
|
||||
}
|
||||
|
||||
// Divider dashed style
|
||||
}
|
||||
}
|
||||
|
||||
@mixin steps-divider-background($angle, $color, $size) {
|
||||
background: repeating-linear-gradient(
|
||||
$angle,
|
||||
$color,
|
||||
$color $size,
|
||||
transparent $size,
|
||||
transparent #{$size * 2}
|
||||
);
|
||||
}
|
||||
|
||||
.steps {
|
||||
@include steps-vertical {
|
||||
&.is-dashed .steps-segment,
|
||||
.steps-segment.is-dashed {
|
||||
&::after {
|
||||
@include steps-divider-background(0deg, $steps-completed-color, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-dashed .steps-segment.is-active,
|
||||
&.is-dashed .steps-segment.is-active ~ .steps-segment,
|
||||
.steps-segment.is-active.is-dashed,
|
||||
.steps-segment.is-active ~ .steps-segment.is-dashed {
|
||||
&::after {
|
||||
@include steps-divider-background(0deg, $steps-default-color, 5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include steps-horizontal {
|
||||
&.is-dashed .steps-segment,
|
||||
.steps-segment.is-dashed {
|
||||
&::after {
|
||||
@include steps-divider-background(90deg, $steps-completed-color, 10px);
|
||||
}
|
||||
|
||||
// the active segment and any subsequent segment get the default colot
|
||||
}
|
||||
|
||||
&.is-dashed .steps-segment.is-active,
|
||||
&.is-dashed .steps-segment.is-active ~ .steps-segment,
|
||||
.steps-segment.is-active.is-dashed,
|
||||
.steps-segment.is-active ~ .steps-segment.is-dashed {
|
||||
&::after {
|
||||
@include steps-divider-background(90deg, $steps-default-color, 10px);
|
||||
}
|
||||
|
||||
// Thin modifier
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.steps.is-thin {
|
||||
.steps-marker {
|
||||
width: $steps-thin-marker-size;
|
||||
height: $steps-thin-marker-size;
|
||||
}
|
||||
|
||||
&.is-hollow .steps-marker,
|
||||
.steps-marker.is-hollow {
|
||||
border-width: $steps-thin-divider-size;
|
||||
height: calc(#{$steps-thin-marker-size} + #{$steps-thin-divider-size});
|
||||
width: calc(#{$steps-thin-marker-size} + #{$steps-thin-divider-size});
|
||||
}
|
||||
|
||||
@include steps-vertical {
|
||||
.steps-segment {
|
||||
&:not(:last-child)::after {
|
||||
bottom: 0;
|
||||
inset-inline-start: calc(
|
||||
#{$steps-thin-marker-size * 0.5} - #{$steps-thin-divider-size * 0.5}
|
||||
);
|
||||
top: $steps-thin-marker-size;
|
||||
width: $steps-thin-divider-size;
|
||||
}
|
||||
}
|
||||
|
||||
.steps-content {
|
||||
margin-top: -$steps-thin-marker-size * 1.5;
|
||||
margin-inline-start: $steps-thin-marker-size;
|
||||
}
|
||||
|
||||
&.has-gaps .steps-segment,
|
||||
.steps-segment.has-gaps {
|
||||
&:not(:last-child)::after {
|
||||
bottom: $steps-thin-marker-size * 0.5;
|
||||
top: $steps-thin-marker-size * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-content-centered {
|
||||
.steps-content {
|
||||
padding-top: $steps-thin-marker-size * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include steps-horizontal {
|
||||
.steps-segment {
|
||||
&:not(:last-child)::after {
|
||||
inset-inline-start: $steps-thin-marker-size;
|
||||
inset-inline-end: 0;
|
||||
top: calc(#{$steps-thin-marker-size * 0.5} - #{$steps-thin-divider-size * 0.5});
|
||||
height: $steps-thin-divider-size;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-content-above .steps-segment:not(:last-child)::after {
|
||||
bottom: calc(#{$steps-thin-marker-size * 0.5} - #{$steps-thin-divider-size * 0.5});
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.steps-content {
|
||||
margin-top: $steps-thin-marker-size;
|
||||
}
|
||||
|
||||
&.has-content-centered {
|
||||
.steps-segment {
|
||||
&:not(:last-child)::after {
|
||||
inset-inline-start: calc(50% + #{$steps-thin-marker-size * 0.5});
|
||||
inset-inline-end: calc(-50% + #{$steps-thin-marker-size * 0.5});
|
||||
}
|
||||
}
|
||||
|
||||
.steps-marker {
|
||||
position: absolute;
|
||||
inset-inline-start: calc(50% - #{$steps-thin-marker-size * 0.5});
|
||||
}
|
||||
}
|
||||
|
||||
&.has-gaps .steps-segment,
|
||||
.steps-segment.has-gaps {
|
||||
&:not(:last-child)::after {
|
||||
inset-inline-start: $steps-thin-marker-size * 1.5;
|
||||
inset-inline-end: $steps-thin-marker-size * 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-content-centered.has-gaps .steps-segment,
|
||||
&.has-content-centered .steps-segment.has-gaps {
|
||||
&:not(:last-child)::after {
|
||||
inset-inline-start: calc(
|
||||
50% + #{($steps-thin-marker-size * 0.5) + ($steps-thin-marker-size * 0.5)}
|
||||
);
|
||||
inset-inline-end: calc(
|
||||
-50% + #{($steps-thin-marker-size * 0.5) + ($steps-thin-marker-size * 0.5)}
|
||||
);
|
||||
}
|
||||
|
||||
// .has-content-above
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.steps:not(.is-vertical).has-content-above {
|
||||
.steps-segment {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
.steps-content {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
271
src/scss/components/_table.scss
Normal file
271
src/scss/components/_table.scss
Normal file
@@ -0,0 +1,271 @@
|
||||
/*! _table.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Table Pagination
|
||||
2. Table Pagination Dark mode
|
||||
3. Flex Table Advanced wrapper
|
||||
4. Flex Table Advanced wrapper Dark mode
|
||||
5. Bulma Table
|
||||
6. Bulma Table Dark mode
|
||||
7. Media Queries
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Table Pagination
|
||||
========================================================================== */
|
||||
|
||||
.flex-pagination {
|
||||
padding: 12px 0;
|
||||
|
||||
.pagination-next,
|
||||
.pagination-previous,
|
||||
.pagination-list {
|
||||
order: initial;
|
||||
}
|
||||
|
||||
.pagination-next,
|
||||
.pagination-previous {
|
||||
background: var(--white);
|
||||
min-width: 85px;
|
||||
|
||||
&.has-chevron {
|
||||
min-width: 55px;
|
||||
|
||||
.iconify {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
font-size: 16px;
|
||||
stroke-width: 3px;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline-offset: var(--accessibility-focus-outline-offset);
|
||||
outline-width: var(--accessibility-focus-outline-width);
|
||||
outline-style: var(--accessibility-focus-outline-style);
|
||||
outline-color: var(--accessibility-focus-outline-color);
|
||||
border-color: var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-list {
|
||||
li {
|
||||
.pagination-link {
|
||||
background: var(--white);
|
||||
font-family: var(--font);
|
||||
font-size: 0.9em;
|
||||
|
||||
&.is-current {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
box-shadow: var(--primary-box-shadow);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline-offset: var(--accessibility-focus-outline-offset);
|
||||
outline-width: var(--accessibility-focus-outline-width);
|
||||
outline-style: var(--accessibility-focus-outline-style);
|
||||
outline-color: var(--accessibility-focus-outline-color);
|
||||
border-color: var(--border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Table Pagination Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.flex-pagination {
|
||||
.pagination-next,
|
||||
.pagination-previous {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 4%);
|
||||
color: var(--dark-dark-text);
|
||||
|
||||
.iconify {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-list {
|
||||
li {
|
||||
.pagination-link {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 4%);
|
||||
color: var(--dark-dark-text);
|
||||
|
||||
&.is-current {
|
||||
background: var(--primary);
|
||||
color: var(--smoke-white);
|
||||
border-color: var(--primary);
|
||||
box-shadow: var(--primary-box-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
7. Bulma Table
|
||||
========================================================================== */
|
||||
|
||||
.demo-table {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.table {
|
||||
&.is-striped {
|
||||
tr:not(.is-selected) {
|
||||
&:nth-child(even) {
|
||||
background: color-mix(in oklab, var(--widget-grey), white 1%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-hoverable {
|
||||
tbody {
|
||||
tr:not(.is-selected) {
|
||||
&:hover {
|
||||
background: color-mix(in oklab, var(--widget-grey), white 1%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
th {
|
||||
font-family: var(--font);
|
||||
color: var(--dark-text);
|
||||
|
||||
&.is-media {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
&.is-end {
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
font-family: var(--font);
|
||||
vertical-align: middle;
|
||||
//color: var(--light-text);
|
||||
color: var(--modal-text);
|
||||
|
||||
&.is-media {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
&.is-end {
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
font-family: var(--font-alt);
|
||||
}
|
||||
|
||||
td {
|
||||
font-family: var(--font);
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
6. Bulma Table Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.table {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
|
||||
&.is-hoverable {
|
||||
tbody {
|
||||
tr:not(.is-selected) {
|
||||
&:hover {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 9%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-striped {
|
||||
tr:not(.is-selected) {
|
||||
&:nth-child(even) {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 9%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
th,
|
||||
td {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--modal-text);
|
||||
}
|
||||
|
||||
td {
|
||||
&:first-child {
|
||||
color: var(--modal-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--dark-dark-text);
|
||||
}
|
||||
|
||||
td {
|
||||
color: var(--dark-dark-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
7. Media Queries
|
||||
========================================================================== */
|
||||
|
||||
@media (width <= 767px) {
|
||||
.pagination-next,
|
||||
.pagination-previous {
|
||||
&.has-chevron {
|
||||
min-width: 55px;
|
||||
max-width: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width >= 768px) and (width <= 1024px) and (orientation: portrait) {
|
||||
.pagination-next,
|
||||
.pagination-previous {
|
||||
&.has-chevron {
|
||||
min-width: 55px;
|
||||
max-width: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-next {
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
}
|
||||
95
src/scss/components/_theme-switch.scss
Normal file
95
src/scss/components/_theme-switch.scss
Normal file
@@ -0,0 +1,95 @@
|
||||
/*! _theme-switch.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Theme Switch
|
||||
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Theme Switch
|
||||
========================================================================== */
|
||||
|
||||
$nightBtn: #ffd22e;
|
||||
$dayBtn: #ffb62e;
|
||||
|
||||
.dark-mode {
|
||||
cursor: pointer;
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
&:focus-visible {
|
||||
border-radius: 50px;
|
||||
outline-offset: 20px;
|
||||
outline-width: 2px;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
& + span {
|
||||
display: block;
|
||||
border-radius: var(--radius-rounded);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
position: relative;
|
||||
box-shadow: inset 16px -16px 0 0 $nightBtn;
|
||||
transform: scaleY(1) rotate(-2deg);
|
||||
transition:
|
||||
box-shadow 0.5s ease 0s,
|
||||
transform 0.4s ease 0.1s;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: inherit;
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
backface-visibility: hidden;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: var(--radius-rounded);
|
||||
margin-top: -4px;
|
||||
margin-inline-start: -4px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline-start: 50%;
|
||||
box-shadow:
|
||||
0 -23px 0 $dayBtn,
|
||||
0 23px 0 $dayBtn,
|
||||
23px 0 0 $dayBtn,
|
||||
-23px 0 0 $dayBtn,
|
||||
15px 15px 0 $dayBtn,
|
||||
-15px 15px 0 $dayBtn,
|
||||
15px -15px 0 $dayBtn,
|
||||
-15px -15px 0 $dayBtn;
|
||||
transform: scale(0);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + span {
|
||||
box-shadow: inset 32px -32px 0 0 $nightBtn;
|
||||
transform: scale(0.5) rotate(0deg);
|
||||
transition:
|
||||
transform 0.3s ease 0.1s,
|
||||
box-shadow 0.2s ease 0s;
|
||||
|
||||
&::before {
|
||||
background: $dayBtn;
|
||||
backface-visibility: hidden;
|
||||
transition: background-color 0.3s ease 0.1s;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: scale(1.5);
|
||||
transition: transform 0.5s ease 0.15s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
45
src/scss/components/_toasts.scss
Normal file
45
src/scss/components/_toasts.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
/*! _toasts.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Notyf Toasts
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Notyf Toasts
|
||||
========================================================================== */
|
||||
|
||||
.notyf {
|
||||
.notyf__toast {
|
||||
.notyf__wrapper {
|
||||
.notyf__icon {
|
||||
.fas,
|
||||
.fal,
|
||||
.far,
|
||||
.fad,
|
||||
.fab {
|
||||
color: var(--white) !important;
|
||||
font-size: 1.6rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.notyf__message {
|
||||
font-family: var(--font);
|
||||
color: var(--white) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disable-notyf {
|
||||
.notyf {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: 1;
|
||||
margin: -1;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
165
src/scss/components/_toggles.scss
Normal file
165
src/scss/components/_toggles.scss
Normal file
@@ -0,0 +1,165 @@
|
||||
/*! _toggles.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Sliding Switch
|
||||
2. Special Checkbox
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Sliding Switch
|
||||
========================================================================== */
|
||||
|
||||
.sliding-toggle {
|
||||
width: 86px;
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
user-select: none;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:checked ~ .toggler {
|
||||
border-color: var(--primary);
|
||||
|
||||
.dark,
|
||||
.light {
|
||||
transform: translateX(calc(var(--transform-direction) * 100%))
|
||||
rotate(calc(var(--transform-direction) * 360deg));
|
||||
}
|
||||
|
||||
.dark {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.light {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggler {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 31px;
|
||||
width: 53px;
|
||||
border: 2px solid var(--primary);
|
||||
border-radius: 100px;
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
.dark,
|
||||
.light {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
inset-inline-start: 2px;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
border-radius: var(--radius-rounded);
|
||||
background: black;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: translateX(calc(var(--transform-direction) * 0))
|
||||
rotate(calc(var(--transform-direction) * 0));
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.iconify {
|
||||
color: var(--white) !important;
|
||||
height: 14px !important;
|
||||
width: 14px !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.light {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dark {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
|
||||
.iconify {
|
||||
color: var(--white) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* =====================================================
|
||||
2. Special Checkbox
|
||||
===================================================== */
|
||||
|
||||
.special-checkbox {
|
||||
position: relative;
|
||||
|
||||
label {
|
||||
background-color: var(--white);
|
||||
border: 1px solid var(--primary-grey);
|
||||
border-radius: var(--radius-rounded);
|
||||
cursor: pointer;
|
||||
height: 28px;
|
||||
inset-inline-start: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 28px;
|
||||
|
||||
&::after {
|
||||
border: 2px solid var(--white);
|
||||
border-top: none;
|
||||
border-inline-end: none;
|
||||
content: '';
|
||||
height: 6px;
|
||||
inset-inline-start: 7px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
transform: rotate(calc(var(--transform-direction) * -45deg));
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked + label {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked + label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Size modifier
|
||||
&.is-small {
|
||||
label {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&::after {
|
||||
inset-inline-start: 4px;
|
||||
top: 5px;
|
||||
width: 11px;
|
||||
height: 6px;
|
||||
transform: rotate(calc(var(--transform-direction) * -45deg)) scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
padding: 0 10px;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
335
src/scss/components/_toolbar.scss
Normal file
335
src/scss/components/_toolbar.scss
Normal file
@@ -0,0 +1,335 @@
|
||||
/*! _list-view.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. List View Toolbar
|
||||
2. List Flex Toolbar
|
||||
3. Card grid Toolbar
|
||||
4. Tile grid Toolbar
|
||||
5. User grid Toolbar
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. List View Toolbar
|
||||
========================================================================== */
|
||||
|
||||
.list-view-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.is-reversed {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.control {
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.tabs-inner {
|
||||
margin-inline-end: 10px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.control {
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.list-info {
|
||||
span {
|
||||
font-family: var(--font);
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-inline-start: auto;
|
||||
margin-bottom: 0;
|
||||
|
||||
.v-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-inner {
|
||||
margin-inline-start: auto;
|
||||
|
||||
.tabs {
|
||||
margin-bottom: 0;
|
||||
min-width: 170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width <= 767px) {
|
||||
.list-view-toolbar {
|
||||
.list-info {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width >= 768px) and (width <= 1024px) and (orientation: portrait) {
|
||||
.list-view-toolbar {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. List Flex Toolbar
|
||||
========================================================================== */
|
||||
|
||||
.list-flex-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.is-reversed {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.control {
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.tabs-inner {
|
||||
margin-inline-end: 10px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.control {
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.list-info {
|
||||
span {
|
||||
font-family: var(--font);
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-inline-start: auto;
|
||||
margin-bottom: 0;
|
||||
|
||||
.v-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-inner {
|
||||
margin-inline-start: auto;
|
||||
|
||||
.tabs {
|
||||
margin-bottom: 0;
|
||||
min-width: 170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. Card grid Toolbar
|
||||
========================================================================== */
|
||||
|
||||
.card-grid-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.is-reversed {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.control {
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.tabs-inner {
|
||||
margin-inline-end: 10px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.control {
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.list-info {
|
||||
span {
|
||||
font-family: var(--font);
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-inline-start: auto;
|
||||
margin-bottom: 0;
|
||||
|
||||
.field {
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.field,
|
||||
.v-button {
|
||||
margin-bottom: 0;
|
||||
|
||||
.h-select {
|
||||
min-width: 190px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-inner {
|
||||
margin-inline-start: auto;
|
||||
|
||||
.tabs {
|
||||
margin-bottom: 0;
|
||||
min-width: 170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
4. Tile grid Toolbar
|
||||
========================================================================== */
|
||||
|
||||
.tile-grid-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.is-reversed {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.control {
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.tabs-inner {
|
||||
margin-inline-end: 10px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.control {
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.list-info {
|
||||
span {
|
||||
font-family: var(--font);
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-inline-start: auto;
|
||||
margin-bottom: 0;
|
||||
|
||||
.field {
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.field,
|
||||
.v-button {
|
||||
margin-bottom: 0;
|
||||
|
||||
.h-select {
|
||||
min-width: 190px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-inner {
|
||||
margin-inline-start: auto;
|
||||
|
||||
.tabs {
|
||||
margin-bottom: 0;
|
||||
min-width: 170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
5. User grid Toolbar
|
||||
========================================================================== */
|
||||
|
||||
.user-grid-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.is-reversed {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.control {
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.tabs-inner {
|
||||
margin-inline-end: 10px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.control {
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.list-info {
|
||||
span {
|
||||
font-family: var(--font);
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-inline-start: auto;
|
||||
margin-bottom: 0;
|
||||
|
||||
.field {
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.field,
|
||||
.v-button {
|
||||
margin-bottom: 0;
|
||||
|
||||
.h-select {
|
||||
min-width: 190px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-inner {
|
||||
margin-inline-start: auto;
|
||||
|
||||
.tabs {
|
||||
margin-bottom: 0;
|
||||
min-width: 170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
944
src/scss/components/_tooltips.scss
Normal file
944
src/scss/components/_tooltips.scss
Normal file
@@ -0,0 +1,944 @@
|
||||
/*! _tooltips.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. CSS Tooltips
|
||||
2. CSS Tooltips Dark mode
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. CSS Tooltips
|
||||
========================================================================== */
|
||||
|
||||
[class*='hint--'] {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[class*='hint--']:focus-visible {
|
||||
outline-offset: var(--accessibility-focus-outline-offset);
|
||||
outline-width: var(--accessibility-focus-outline-width);
|
||||
outline-style: var(--accessibility-focus-outline-style);
|
||||
outline-color: var(--accessibility-focus-outline-color);
|
||||
}
|
||||
|
||||
[class*='hint--']::before,
|
||||
[class*='hint--']::after {
|
||||
position: absolute;
|
||||
transform: translate3d(0, 0, 0);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 1000000;
|
||||
pointer-events: none;
|
||||
transition: 0.3s ease;
|
||||
transition-delay: 0ms;
|
||||
}
|
||||
|
||||
[class*='hint--']:hover::before,
|
||||
[class*='hint--']:hover::after,
|
||||
[class*='hint--']:focus-visible::before,
|
||||
[class*='hint--']:focus-visible::after {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[class*='hint--']:focus-visible::before,
|
||||
[class*='hint--']:focus-visible::after,
|
||||
[class*='hint--']:hover::before,
|
||||
[class*='hint--']:hover::after {
|
||||
transition-delay: 100ms;
|
||||
}
|
||||
|
||||
[class*='hint--']::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
border: 6px solid transparent;
|
||||
z-index: 1000001;
|
||||
}
|
||||
|
||||
[class*='hint--']::after {
|
||||
background: #383838;
|
||||
color: white;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
line-height: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[class*='hint--'][aria-label]::after {
|
||||
content: attr(aria-label);
|
||||
}
|
||||
|
||||
[class*='hint--'][data-hint]::after {
|
||||
content: attr(data-hint);
|
||||
}
|
||||
|
||||
[aria-label='']::before,
|
||||
[aria-label='']::after,
|
||||
[data-hint='']::before,
|
||||
[data-hint='']::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Tooltip arrows
|
||||
.hint--top-left::before {
|
||||
border-top-color: #383838;
|
||||
}
|
||||
|
||||
.hint--top-right::before {
|
||||
border-top-color: #383838;
|
||||
}
|
||||
|
||||
.hint--top::before {
|
||||
border-top-color: #383838;
|
||||
}
|
||||
|
||||
.hint--bottom-left::before {
|
||||
border-bottom-color: #383838;
|
||||
}
|
||||
|
||||
.hint--bottom-right::before {
|
||||
border-bottom-color: #383838;
|
||||
}
|
||||
|
||||
.hint--bottom::before {
|
||||
border-bottom-color: #383838;
|
||||
}
|
||||
|
||||
.hint--left::before {
|
||||
border-inline-start-color: #383838;
|
||||
}
|
||||
|
||||
.hint--right::before {
|
||||
border-inline-end-color: #383838;
|
||||
}
|
||||
|
||||
// Top placement
|
||||
.hint--top::before {
|
||||
margin-bottom: -11px;
|
||||
}
|
||||
|
||||
.hint--top::before,
|
||||
.hint--top::after {
|
||||
bottom: 100%;
|
||||
inset-inline-start: 50%;
|
||||
}
|
||||
|
||||
.hint--top::before {
|
||||
inset-inline-start: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.hint--top::after {
|
||||
transform: translateX(calc(var(--transform-direction) * -50%));
|
||||
}
|
||||
|
||||
.hint--top:hover::before,
|
||||
.hint--top:focus-visible::before {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.hint--top:hover::after,
|
||||
.hint--top:focus-visible::after {
|
||||
transform: translateX(calc(var(--transform-direction) * -50%)) translateY(-8px);
|
||||
}
|
||||
|
||||
// Bottom placement
|
||||
.hint--bottom::before {
|
||||
margin-top: -11px;
|
||||
}
|
||||
|
||||
.hint--bottom::before,
|
||||
.hint--bottom::after {
|
||||
top: 100%;
|
||||
inset-inline-start: 50%;
|
||||
}
|
||||
|
||||
.hint--bottom::before {
|
||||
inset-inline-start: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.hint--bottom::after {
|
||||
transform: translateX(calc(var(--transform-direction) * -50%));
|
||||
}
|
||||
|
||||
.hint--bottom:hover::before,
|
||||
.hint--bottom:focus-visible::before {
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
.hint--bottom:hover::after,
|
||||
.hint--bottom:focus-visible::after {
|
||||
transform: translateX(calc(var(--transform-direction) * -50%)) translateY(8px);
|
||||
}
|
||||
|
||||
// Right placement
|
||||
.hint--right::before {
|
||||
margin-inline-start: -11px;
|
||||
margin-bottom: -6px;
|
||||
}
|
||||
|
||||
.hint--right::after {
|
||||
margin-bottom: -14px;
|
||||
}
|
||||
|
||||
.hint--right::before,
|
||||
.hint--right::after {
|
||||
inset-inline-start: 100%;
|
||||
bottom: 50%;
|
||||
}
|
||||
|
||||
.hint--right:hover::before,
|
||||
.hint--right:focus-visible::before {
|
||||
transform: translateX(calc(var(--transform-direction) * 8px));
|
||||
}
|
||||
|
||||
.hint--right:hover::after,
|
||||
.hint--right:focus-visible::after {
|
||||
transform: translateX(calc(var(--transform-direction) * 8px));
|
||||
}
|
||||
|
||||
// Left placement
|
||||
.hint--left::before {
|
||||
margin-inline-end: -11px;
|
||||
margin-bottom: -6px;
|
||||
}
|
||||
|
||||
.hint--left::after {
|
||||
margin-bottom: -14px;
|
||||
}
|
||||
|
||||
.hint--left::before,
|
||||
.hint--left::after {
|
||||
inset-inline-end: 100%;
|
||||
bottom: 50%;
|
||||
}
|
||||
|
||||
.hint--left:hover::before,
|
||||
.hint--left:focus-visible::before {
|
||||
transform: translateX(calc(var(--transform-direction) * -8px));
|
||||
}
|
||||
|
||||
.hint--left:hover::after,
|
||||
.hint--left:focus-visible::after {
|
||||
transform: translateX(calc(var(--transform-direction) * -8px));
|
||||
}
|
||||
|
||||
// Top left placement
|
||||
.hint--top-left::before {
|
||||
margin-bottom: -11px;
|
||||
}
|
||||
|
||||
.hint--top-left::before,
|
||||
.hint--top-left::after {
|
||||
bottom: 100%;
|
||||
inset-inline-start: 50%;
|
||||
}
|
||||
|
||||
.hint--top-left::before {
|
||||
inset-inline-start: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.hint--top-left::after {
|
||||
transform: translateX(calc(var(--transform-direction) * -100%));
|
||||
}
|
||||
|
||||
.hint--top-left::after {
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
|
||||
.hint--top-left:hover::before,
|
||||
.hint--top-left:focus-visible::before {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.hint--top-left:hover::after,
|
||||
.hint--top-left:focus-visible::after {
|
||||
transform: translateX(calc(var(--transform-direction) * -100%)) translateY(-8px);
|
||||
}
|
||||
|
||||
// Top right placement
|
||||
.hint--top-right::before {
|
||||
margin-bottom: -11px;
|
||||
}
|
||||
|
||||
.hint--top-right::before,
|
||||
.hint--top-right::after {
|
||||
bottom: 100%;
|
||||
inset-inline-start: 50%;
|
||||
}
|
||||
|
||||
.hint--top-right::before {
|
||||
inset-inline-start: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.hint--top-right::after {
|
||||
transform: translateX(calc(var(--transform-direction) * 0));
|
||||
}
|
||||
|
||||
.hint--top-right::after {
|
||||
margin-inline-start: -12px;
|
||||
}
|
||||
|
||||
.hint--top-right:hover::before,
|
||||
.hint--top-right:focus-visible::before {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.hint--top-right:hover::after,
|
||||
.hint--top-right:focus-visible::after {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
// Bottom left placement
|
||||
.hint--bottom-left::before {
|
||||
margin-top: -11px;
|
||||
}
|
||||
|
||||
.hint--bottom-left::before,
|
||||
.hint--bottom-left::after {
|
||||
top: 100%;
|
||||
inset-inline-start: 50%;
|
||||
}
|
||||
|
||||
.hint--bottom-left::before {
|
||||
inset-inline-start: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.hint--bottom-left::after {
|
||||
transform: translateX(calc(var(--transform-direction) * -100%));
|
||||
}
|
||||
|
||||
.hint--bottom-left::after {
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
|
||||
.hint--bottom-left:hover::before,
|
||||
.hint--bottom-left:focus-visible::before {
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
.hint--bottom-left:hover::after,
|
||||
.hint--bottom-left:focus-visible::after {
|
||||
transform: translateX(calc(var(--transform-direction) * -100%)) translateY(8px);
|
||||
}
|
||||
|
||||
// Bottom right placement
|
||||
.hint--bottom-right::before {
|
||||
margin-top: -11px;
|
||||
}
|
||||
|
||||
.hint--bottom-right::before,
|
||||
.hint--bottom-right::after {
|
||||
top: 100%;
|
||||
inset-inline-start: 50%;
|
||||
}
|
||||
|
||||
.hint--bottom-right::before {
|
||||
inset-inline-start: calc(50% - 6px);
|
||||
}
|
||||
|
||||
.hint--bottom-right::after {
|
||||
transform: translateX(calc(var(--transform-direction) * 0));
|
||||
}
|
||||
|
||||
.hint--bottom-right::after {
|
||||
margin-inline-start: -12px;
|
||||
}
|
||||
|
||||
.hint--bottom-right:hover::before,
|
||||
.hint--bottom-right:focus-visible::before {
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
.hint--bottom-right:hover::after,
|
||||
.hint--bottom-right:focus-visible::after {
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
// Defines tooltip sizes.
|
||||
.hint--small::after,
|
||||
.hint--medium::after,
|
||||
.hint--large::after {
|
||||
white-space: normal;
|
||||
line-height: 1.4em;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.hint--small::after {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.hint--medium::after {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.hint--large::after {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
// Defines a basic theme.
|
||||
[class*='hint--'] {
|
||||
/**
|
||||
* tooltip body
|
||||
*/
|
||||
}
|
||||
|
||||
[class*='hint--']::after {
|
||||
box-shadow: var(--light-box-shadow);
|
||||
}
|
||||
|
||||
// Defines a primary tooltip.
|
||||
.hint--primary::after {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
.hint--primary.hint--top-left::before {
|
||||
border-top-color: var(--primary);
|
||||
}
|
||||
|
||||
.hint--primary.hint--top-right::before {
|
||||
border-top-color: var(--primary);
|
||||
}
|
||||
|
||||
.hint--primary.hint--top::before {
|
||||
border-top-color: var(--primary);
|
||||
}
|
||||
|
||||
.hint--primary.hint--bottom-left::before {
|
||||
border-bottom-color: var(--primary);
|
||||
}
|
||||
|
||||
.hint--primary.hint--bottom-right::before {
|
||||
border-bottom-color: var(--primary);
|
||||
}
|
||||
|
||||
.hint--primary.hint--bottom::before {
|
||||
border-bottom-color: var(--primary);
|
||||
}
|
||||
|
||||
.hint--primary.hint--left::before {
|
||||
border-inline-start-color: var(--primary);
|
||||
}
|
||||
|
||||
.hint--primary.hint--right::before {
|
||||
border-inline-end-color: var(--primary);
|
||||
}
|
||||
|
||||
// Defines an error tooltip.
|
||||
.hint--error::after {
|
||||
background-color: var(--danger);
|
||||
}
|
||||
|
||||
.hint--error.hint--top-left::before {
|
||||
border-top-color: var(--danger);
|
||||
}
|
||||
|
||||
.hint--error.hint--top-right::before {
|
||||
border-top-color: var(--danger);
|
||||
}
|
||||
|
||||
.hint--error.hint--top::before {
|
||||
border-top-color: var(--danger);
|
||||
}
|
||||
|
||||
.hint--error.hint--bottom-left::before {
|
||||
border-bottom-color: var(--danger);
|
||||
}
|
||||
|
||||
.hint--error.hint--bottom-right::before {
|
||||
border-bottom-color: var(--danger);
|
||||
}
|
||||
|
||||
.hint--error.hint--bottom::before {
|
||||
border-bottom-color: var(--danger);
|
||||
}
|
||||
|
||||
.hint--error.hint--left::before {
|
||||
border-inline-start-color: var(--danger);
|
||||
}
|
||||
|
||||
.hint--error.hint--right::before {
|
||||
border-inline-end-color: var(--danger);
|
||||
}
|
||||
|
||||
// Defines a warning tooltip.
|
||||
.hint--warning::after {
|
||||
background-color: var(--warning);
|
||||
}
|
||||
|
||||
.hint--warning.hint--top-left::before {
|
||||
border-top-color: var(--warning);
|
||||
}
|
||||
|
||||
.hint--warning.hint--top-right::before {
|
||||
border-top-color: var(--warning);
|
||||
}
|
||||
|
||||
.hint--warning.hint--top::before {
|
||||
border-top-color: var(--warning);
|
||||
}
|
||||
|
||||
.hint--warning.hint--bottom-left::before {
|
||||
border-bottom-color: var(--warning);
|
||||
}
|
||||
|
||||
.hint--warning.hint--bottom-right::before {
|
||||
border-bottom-color: var(--warning);
|
||||
}
|
||||
|
||||
.hint--warning.hint--bottom::before {
|
||||
border-bottom-color: var(--warning);
|
||||
}
|
||||
|
||||
.hint--warning.hint--left::before {
|
||||
border-inline-start-color: var(--warning);
|
||||
}
|
||||
|
||||
.hint--warning.hint--right::before {
|
||||
border-inline-end-color: var(--warning);
|
||||
}
|
||||
|
||||
// Defines an info tooltip.
|
||||
.hint--info::after {
|
||||
background-color: var(--info);
|
||||
}
|
||||
|
||||
.hint--info.hint--top-left::before {
|
||||
border-top-color: var(--info);
|
||||
}
|
||||
|
||||
.hint--info.hint--top-right::before {
|
||||
border-top-color: var(--info);
|
||||
}
|
||||
|
||||
.hint--info.hint--top::before {
|
||||
border-top-color: var(--info);
|
||||
}
|
||||
|
||||
.hint--info.hint--bottom-left::before {
|
||||
border-bottom-color: var(--info);
|
||||
}
|
||||
|
||||
.hint--info.hint--bottom-right::before {
|
||||
border-bottom-color: var(--info);
|
||||
}
|
||||
|
||||
.hint--info.hint--bottom::before {
|
||||
border-bottom-color: var(--info);
|
||||
}
|
||||
|
||||
.hint--info.hint--left::before {
|
||||
border-inline-start-color: var(--info);
|
||||
}
|
||||
|
||||
.hint--info.hint--right::before {
|
||||
border-inline-end-color: var(--info);
|
||||
}
|
||||
|
||||
// Defines a success tooltip.
|
||||
.hint--success::after {
|
||||
background-color: var(--success);
|
||||
}
|
||||
|
||||
.hint--success.hint--top-left::before {
|
||||
border-top-color: var(--success);
|
||||
}
|
||||
|
||||
.hint--success.hint--top-right::before {
|
||||
border-top-color: var(--success);
|
||||
}
|
||||
|
||||
.hint--success.hint--top::before {
|
||||
border-top-color: var(--success);
|
||||
}
|
||||
|
||||
.hint--success.hint--bottom-left::before {
|
||||
border-bottom-color: var(--success);
|
||||
}
|
||||
|
||||
.hint--success.hint--bottom-right::before {
|
||||
border-bottom-color: var(--success);
|
||||
}
|
||||
|
||||
.hint--success.hint--bottom::before {
|
||||
border-bottom-color: var(--success);
|
||||
}
|
||||
|
||||
.hint--success.hint--left::before {
|
||||
border-inline-start-color: var(--success);
|
||||
}
|
||||
|
||||
.hint--success.hint--right::before {
|
||||
border-inline-end-color: var(--success);
|
||||
}
|
||||
|
||||
// Defines a light tooltip.
|
||||
.hint--light::after {
|
||||
background-color: var(--white);
|
||||
color: var(--dark-text) !important;
|
||||
box-shadow: 0 5px 15px 0 rgb(39 26 54 / 15%);
|
||||
}
|
||||
|
||||
.hint--light.hint--top-left::before {
|
||||
border-top-color: var(--white);
|
||||
}
|
||||
|
||||
.hint--light.hint--top-right::before {
|
||||
border-top-color: var(--white);
|
||||
}
|
||||
|
||||
.hint--light.hint--top::before {
|
||||
border-top-color: var(--white);
|
||||
}
|
||||
|
||||
.hint--light.hint--bottom-left::before {
|
||||
border-bottom-color: var(--white);
|
||||
}
|
||||
|
||||
.hint--light.hint--bottom-right::before {
|
||||
border-bottom-color: var(--white);
|
||||
}
|
||||
|
||||
.hint--light.hint--bottom::before {
|
||||
border-bottom-color: var(--white);
|
||||
}
|
||||
|
||||
.hint--light.hint--left::before {
|
||||
border-inline-start-color: var(--white);
|
||||
}
|
||||
|
||||
.hint--light.hint--right::before {
|
||||
border-inline-end-color: var(--white);
|
||||
}
|
||||
|
||||
// Defines a bubble shape tooltip.
|
||||
.hint--bubble::after {
|
||||
// background-color: var(--primary);
|
||||
border-radius: 100px !important;
|
||||
font-size: 0.6rem !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.hint--bubble.hint--top-left::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hint--bubble.hint--top-right::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hint--bubble.hint--top::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hint--bubble.hint--bottom-left::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hint--bubble.hint--bottom-right::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hint--bubble.hint--bottom::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hint--bubble.hint--left::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hint--bubble.hint--right::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Defines a persisted tooltip which shows always.
|
||||
.hint--always::after,
|
||||
.hint--always::before {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.hint--always.hint--top::before {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.hint--always.hint--top::after {
|
||||
transform: translateX(calc(var(--transform-direction) * -50%)) translateY(-8px);
|
||||
}
|
||||
|
||||
.hint--always.hint--top-left::before {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.hint--always.hint--top-left::after {
|
||||
transform: translateX(calc(var(--transform-direction) * -100%)) translateY(-8px);
|
||||
}
|
||||
|
||||
.hint--always.hint--top-right::before {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.hint--always.hint--top-right::after {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.hint--always.hint--bottom::before {
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
.hint--always.hint--bottom::after {
|
||||
transform: translateX(calc(var(--transform-direction) * -50%)) translateY(8px);
|
||||
}
|
||||
|
||||
.hint--always.hint--bottom-left::before {
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
.hint--always.hint--bottom-left::after {
|
||||
transform: translateX(calc(var(--transform-direction) * -100%)) translateY(8px);
|
||||
}
|
||||
|
||||
.hint--always.hint--bottom-right::before {
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
.hint--always.hint--bottom-right::after {
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
.hint--always.hint--left::before {
|
||||
transform: translateX(calc(var(--transform-direction) * -8px));
|
||||
}
|
||||
|
||||
.hint--always.hint--left::after {
|
||||
transform: translateX(calc(var(--transform-direction) * -8px));
|
||||
}
|
||||
|
||||
.hint--always.hint--right::before {
|
||||
transform: translateX(calc(var(--transform-direction) * 8px));
|
||||
}
|
||||
|
||||
.hint--always.hint--right::after {
|
||||
transform: translateX(calc(var(--transform-direction) * 8px));
|
||||
}
|
||||
|
||||
// Defines slightly rounded corner tooltips.
|
||||
.hint--rounded::after {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
// Defines various transition effects for the tooltips.
|
||||
.hint--no-animate::before,
|
||||
.hint--no-animate::after {
|
||||
transition-duration: 0ms;
|
||||
}
|
||||
|
||||
.hint--bounce::before,
|
||||
.hint--bounce::after {
|
||||
transition:
|
||||
opacity 0.3s ease,
|
||||
visibility 0.3s ease,
|
||||
-webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
transition:
|
||||
opacity 0.3s ease,
|
||||
visibility 0.3s ease,
|
||||
-moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
transition:
|
||||
opacity 0.3s ease,
|
||||
visibility 0.3s ease,
|
||||
transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
}
|
||||
|
||||
.hint--no-shadow::before,
|
||||
.hint--no-shadow::after {
|
||||
text-shadow: initial;
|
||||
box-shadow: initial;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. CSS Tooltips Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.hint--top-left:not(
|
||||
.hint--light,
|
||||
.hint--info,
|
||||
.hint--success,
|
||||
.hint--warning,
|
||||
.hint--error,
|
||||
.hint--bubble,
|
||||
.hint--primary
|
||||
) {
|
||||
&::after {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), black 4%) !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-top-color: color-mix(in oklab, var(--dark-sidebar), black 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.hint--top-right:not(
|
||||
.hint--light,
|
||||
.hint--info,
|
||||
.hint--success,
|
||||
.hint--warning,
|
||||
.hint--error,
|
||||
.hint--bubble,
|
||||
.hint--primary
|
||||
) {
|
||||
&::after {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), black 4%) !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-top-color: color-mix(in oklab, var(--dark-sidebar), black 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.hint--top:not(
|
||||
.hint--light,
|
||||
.hint--info,
|
||||
.hint--success,
|
||||
.hint--warning,
|
||||
.hint--error,
|
||||
.hint--bubble,
|
||||
.hint--primary
|
||||
) {
|
||||
&::after {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), black 4%) !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-top-color: color-mix(in oklab, var(--dark-sidebar), black 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.hint--bottom-left:not(
|
||||
.hint--light,
|
||||
.hint--info,
|
||||
.hint--success,
|
||||
.hint--warning,
|
||||
.hint--error,
|
||||
.hint--bubble,
|
||||
.hint--primary
|
||||
) {
|
||||
&::after {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), black 4%) !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-bottom-color: color-mix(in oklab, var(--dark-sidebar), black 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.hint--bottom-right:not(
|
||||
.hint--light,
|
||||
.hint--info,
|
||||
.hint--success,
|
||||
.hint--warning,
|
||||
.hint--error,
|
||||
.hint--bubble,
|
||||
.hint--primary
|
||||
) {
|
||||
&::after {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), black 4%) !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-bottom-color: color-mix(in oklab, var(--dark-sidebar), black 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.hint--bottom:not(
|
||||
.hint--light,
|
||||
.hint--info,
|
||||
.hint--success,
|
||||
.hint--warning,
|
||||
.hint--error,
|
||||
.hint--bubble,
|
||||
.hint--primary
|
||||
) {
|
||||
&::after {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), black 4%) !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-bottom-color: color-mix(in oklab, var(--dark-sidebar), black 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.hint--left:not(
|
||||
.hint--light,
|
||||
.hint--info,
|
||||
.hint--success,
|
||||
.hint--warning,
|
||||
.hint--error,
|
||||
.hint--bubble,
|
||||
.hint--primary
|
||||
) {
|
||||
&::after {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), black 4%) !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-inline-start-color: color-mix(in oklab, var(--dark-sidebar), black 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.hint--right:not(
|
||||
.hint--light,
|
||||
.hint--info,
|
||||
.hint--success,
|
||||
.hint--warning,
|
||||
.hint--error,
|
||||
.hint--bubble,
|
||||
.hint--primary
|
||||
) {
|
||||
&::after {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), black 4%) !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-inline-end-color: color-mix(in oklab, var(--dark-sidebar), black 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.hint--primary::after {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
.hint--primary.hint--top-left::before {
|
||||
border-top-color: var(--primary);
|
||||
}
|
||||
|
||||
.hint--primary.hint--top-right::before {
|
||||
border-top-color: var(--primary);
|
||||
}
|
||||
|
||||
.hint--primary.hint--top::before {
|
||||
border-top-color: var(--primary);
|
||||
}
|
||||
|
||||
.hint--primary.hint--bottom-left::before {
|
||||
border-bottom-color: var(--primary);
|
||||
}
|
||||
|
||||
.hint--primary.hint--bottom-right::before {
|
||||
border-bottom-color: var(--primary);
|
||||
}
|
||||
|
||||
.hint--primary.hint--bottom::before {
|
||||
border-bottom-color: var(--primary);
|
||||
}
|
||||
|
||||
.hint--primary.hint--left::before {
|
||||
border-inline-start-color: var(--primary);
|
||||
}
|
||||
|
||||
.hint--primary.hint--right::before {
|
||||
border-inline-end-color: var(--primary);
|
||||
}
|
||||
}
|
||||
55
src/scss/components/_widgets.scss
Normal file
55
src/scss/components/_widgets.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
/*! _widgets.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/* ==========================================================================
|
||||
Stat Widgets
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
1. Stat Widget Base
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Stat Widget Base
|
||||
========================================================================== */
|
||||
|
||||
.stat-widget {
|
||||
@include vuero-l-card;
|
||||
|
||||
padding: 30px;
|
||||
font-family: var(--font);
|
||||
|
||||
&.is-straight {
|
||||
@include vuero-s-card;
|
||||
}
|
||||
|
||||
.widget-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 32px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
h3 {
|
||||
font-family: var(--font-alt);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--dark-text);
|
||||
}
|
||||
}
|
||||
|
||||
.inner-list {
|
||||
padding: 10px 0;
|
||||
|
||||
.inner-list-item {
|
||||
+ .inner-list-item {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-dark {
|
||||
.stat-widget {
|
||||
@include vuero-card--dark;
|
||||
}
|
||||
}
|
||||
14
src/scss/css-variables/_accessibility.scss
Normal file
14
src/scss/css-variables/_accessibility.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
/*! accessibility.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
:root {
|
||||
--accessibility-focus-outline-style: dashed;
|
||||
--accessibility-focus-outline-offset: 3px;
|
||||
--accessibility-focus-outline-width: 1px;
|
||||
--accessibility-focus-outline-color: color-mix(in oklab, var(--fade-grey), black 8%);
|
||||
|
||||
&.is-dark {
|
||||
--accessibility-focus-outline-color: color-mix(in oklab, var(--dark-sidebar), white 25%);
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
6
src/scss/css-variables/_all.scss
Normal file
6
src/scss/css-variables/_all.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
@import './colors';
|
||||
@import './shadows';
|
||||
@import './radius';
|
||||
@import './fonts';
|
||||
@import './accessibility';
|
||||
@import './rtl';
|
||||
107
src/scss/css-variables/_colors.scss
Normal file
107
src/scss/css-variables/_colors.scss
Normal file
@@ -0,0 +1,107 @@
|
||||
/*! colors.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
:root {
|
||||
// placeload colors
|
||||
--placeload-nuance-from: rgb(0 0 0 / 7%);
|
||||
--placeload-nuance-to: rgb(0 0 0 / 15%);
|
||||
|
||||
// bulma colors
|
||||
//--primary: oklch(66.67% 0.146 173.07deg);
|
||||
//--primary--color-invert: color-mix(in oklab, var(--primary), white 90%);
|
||||
//--primary--dark-color: color-mix(in oklab, var(--primary), black 5%);
|
||||
//--primary--light-color: color-mix(in oklab, var(--primary), white 90%);
|
||||
--primary: #014099;
|
||||
--primary--color-invert: color-mix(in oklab, var(--primary), white 85%);
|
||||
--primary--dark-color: color-mix(in oklab, var(--primary), black 5%);
|
||||
--primary--light-color: color-mix(in oklab, var(--primary), white 90%);
|
||||
|
||||
--link: #485fc7;
|
||||
--link--color-invert: color-mix(in oklab, var(--link), white 85%);
|
||||
--link--dark-color: color-mix(in oklab, var(--link), black 5%);
|
||||
--link--light-color: color-mix(in oklab, var(--link), white 90%);
|
||||
|
||||
--info: #0398e2;
|
||||
--info--color-invert: color-mix(in oklab, var(--info), white 85%);
|
||||
--info--dark-color: color-mix(in oklab, var(--info), black 5%);
|
||||
--info--light-color: color-mix(in oklab, var(--info), white 90%);
|
||||
|
||||
--success: #05d69e;
|
||||
--success--color-invert: color-mix(in oklab, var(--success), white 85%);
|
||||
--success--dark-color: color-mix(in oklab, var(--success), black 20%);
|
||||
--success--light-color: color-mix(in oklab, var(--success), white 90%);
|
||||
|
||||
--warning: #faad42;
|
||||
--warning--color-invert: color-mix(in oklab, var(--warning), white 85%);
|
||||
--warning--dark-color: color-mix(in oklab, var(--warning), black 20%);
|
||||
--warning--light-color: color-mix(in oklab, var(--warning), white 90%);
|
||||
|
||||
--danger: #e62864;
|
||||
--danger--color-invert: color-mix(in oklab, var(--danger), white 85%);
|
||||
--danger--dark-color: color-mix(in oklab, var(--danger), black 15%);
|
||||
--danger--light-color: color-mix(in oklab, var(--danger), white 90%);
|
||||
|
||||
--dark: #222225;
|
||||
--dark--color-invert: color-mix(in oklab, var(--dark), white 85%);
|
||||
--dark--dark-color: color-mix(in oklab, var(--dark), black 15%);
|
||||
--dark--light-color: color-mix(in oklab, var(--dark), white 90%);
|
||||
|
||||
// Layout colors
|
||||
--body-color: #f4f4f5;
|
||||
--title-grey: #a9abac;
|
||||
--background-grey: #fafafa;
|
||||
--medium-grey: #ddd;
|
||||
--light-grey: #eee;
|
||||
--white: #fff;
|
||||
--border: #dbdbdb;
|
||||
--dark-sidebar: #222225;
|
||||
|
||||
--landing-xxx: #0b0d13;
|
||||
--landing-yyy: #191b2a;
|
||||
|
||||
--smoke-white: #fcfcfc;
|
||||
--primary-grey: #ccc;
|
||||
--muted-grey: #999;
|
||||
//--fade-grey: #ededed;
|
||||
--fade-grey: #c8c8c8;
|
||||
--widget-grey: #f5f6fa;
|
||||
--placeholder: #cfcfcf;
|
||||
|
||||
--dark-dark-text: #a9a9b2;
|
||||
--dark-text: #283252;
|
||||
--light-text: #a2a5b9;
|
||||
--modal-text: #283252;
|
||||
// Additional colors
|
||||
--secondary: #336aeb;
|
||||
--purple: #8168b1;
|
||||
--blue: #38c3ff;
|
||||
--red: #f82a5e;
|
||||
--orange: #ffa880;
|
||||
--yellow: #ffd770;
|
||||
--green: #94e189;
|
||||
--pink: #ff9eb8;
|
||||
--lime: #90e0d0;
|
||||
|
||||
--modal-background: #FCFCFC;
|
||||
}
|
||||
|
||||
// override colors for dark mode
|
||||
.is-dark {
|
||||
--background-grey: color-mix(in oklab, var(--dark-sidebar), white 5%);
|
||||
--border: color-mix(in oklab, var(--dark-sidebar), white 12%);
|
||||
--dark-text: #0b0d13;
|
||||
--modal-text: #fff;
|
||||
--placeload-nuance-from: rgb(255 255 255 / 15%);
|
||||
--placeload-nuance-to: rgb(255 255 255 / 24%);
|
||||
|
||||
--primary: #0398e2;
|
||||
--primary--color-invert: color-mix(in oklab, var(--info), white 85%);
|
||||
|
||||
//--primary: oklch(59.02% 0.146 172.62deg);
|
||||
//--primary--color-invert: color-mix(in oklab, var(--primary), white 80%);
|
||||
--success: #1dc598;
|
||||
--warning: #e0a654;
|
||||
--danger: #ee3c74;
|
||||
|
||||
--modal-background: color-mix(in oklab, var(--dark-sidebar), white 5%);
|
||||
|
||||
}
|
||||
8
src/scss/css-variables/_fonts.scss
Normal file
8
src/scss/css-variables/_fonts.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
/*! fonts.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
:root {
|
||||
--font: 'Noto Sans KR', sans-serif;
|
||||
--font-alt: 'Noto Sans KR', sans-serif;
|
||||
--font-monospace: 'Fira Code Variable', monospace;
|
||||
--font-size: 14px;
|
||||
}
|
||||
8
src/scss/css-variables/_radius.scss
Normal file
8
src/scss/css-variables/_radius.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
/*! radius.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
:root {
|
||||
--radius-small: 2px;
|
||||
--radius: 4px;
|
||||
--radius-large: 6px;
|
||||
--radius-rounded: 9999px;
|
||||
}
|
||||
10
src/scss/css-variables/_rtl.scss
Normal file
10
src/scss/css-variables/_rtl.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
/*! rtl.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
:root {
|
||||
--transform-direction: 1;
|
||||
zoom:1.2;
|
||||
}
|
||||
|
||||
[dir='rtl'] {
|
||||
--transform-direction: -1;
|
||||
}
|
||||
18
src/scss/css-variables/_shadows.scss
Normal file
18
src/scss/css-variables/_shadows.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
/*! shadows.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
$shadow-colors: 'primary', 'secondary', 'danger', 'warning', 'info', 'success', 'purple',
|
||||
'blue', 'red', 'orange', 'yellow', 'green';
|
||||
|
||||
:root {
|
||||
--base-shadow: rgb(0 0 0 / 12%);
|
||||
--light-box-shadow: -1px 3px 10px 0 rgb(0 0 0 / 6%);
|
||||
--light-box-shadow-md: -1px 3px 10px 0 rgb(0 0 0 / 12%);
|
||||
|
||||
@each $color in $shadow-colors {
|
||||
--#{$color}-shadow-from: hsl(from var(--#{$color}) h s l / 42%);
|
||||
--#{$color}-shadow-to: hsl(from var(--#{$color}) h s l / 20%);
|
||||
--#{$color}-box-shadow:
|
||||
0 14px 26px -12px var(--#{$color}-shadow-from),
|
||||
0 4px 23px 0 var(--base-shadow), 0 8px 10px -5px var(--#{$color}-shadow-to) !important;
|
||||
}
|
||||
}
|
||||
472
src/scss/layout/_animations.scss
Normal file
472
src/scss/layout/_animations.scss
Normal file
@@ -0,0 +1,472 @@
|
||||
/*! _animations.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Base Class
|
||||
2. pulsate
|
||||
3. Infinite rotate
|
||||
4. Fade In Up
|
||||
5. Fade In Down
|
||||
6. Fade In Left
|
||||
7. Scale in
|
||||
8. Scale out
|
||||
9. Scale In Circle
|
||||
10. Gelatine
|
||||
11. Wave
|
||||
12. Levitate
|
||||
13. Glowing
|
||||
14. Translate Left
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Base Class
|
||||
========================================================================== */
|
||||
|
||||
.animated {
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
|
||||
.no-transition * {
|
||||
transition-property: none !important;
|
||||
transition-duration: 0 !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Pulsate
|
||||
========================================================================== */
|
||||
|
||||
@keyframes pulsate {
|
||||
0% {
|
||||
transform: scale(0.1, 0.1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1.2, 1.2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pulsate {
|
||||
animation: pulsate 1.5s ease-out;
|
||||
animation-iteration-count: infinite;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. Infinite rotate
|
||||
========================================================================== */
|
||||
|
||||
@keyframes rotating {
|
||||
from {
|
||||
transform: rotate(calc(var(--transform-direction) * 0deg));
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(calc(var(--transform-direction) * 360deg));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotating {
|
||||
from {
|
||||
transform: rotate(calc(var(--transform-direction) * 0deg));
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(calc(var(--transform-direction) * 360deg));
|
||||
}
|
||||
}
|
||||
|
||||
.rotating {
|
||||
animation: rotating 2s linear infinite;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
4. Fade In Up
|
||||
========================================================================== */
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.preFadeInUp {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fadeInUp {
|
||||
opacity: 0;
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
5. Fade In Down
|
||||
========================================================================== */
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
transform: translate3d(0, -20px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.preFadeInDown {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fadeInDown {
|
||||
opacity: 0;
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
6. Fade In Left
|
||||
========================================================================== */
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
transform: translate3d(20px, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
transform: translate3d(20px, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.preFadeInLeft {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fadeInLeft {
|
||||
opacity: 0;
|
||||
animation-name: fadeInLeft;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
7. Scale in
|
||||
========================================================================== */
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.scaleIn {
|
||||
animation: scaleIn 0.5s;
|
||||
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.scaleInTooltip {
|
||||
animation: scaleIn 0.3s;
|
||||
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
8. Scale out
|
||||
========================================================================== */
|
||||
|
||||
@keyframes scaleOut {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleOut {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
.scaleOut {
|
||||
animation: scaleOut 0.5s;
|
||||
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.scaleOutTooltip {
|
||||
animation: scaleOut 0.3s;
|
||||
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
9. Scale in circle (used for modal popup)
|
||||
========================================================================== */
|
||||
|
||||
@keyframes scaleInCircle {
|
||||
from {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(7);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleInCircle {
|
||||
from {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(7);
|
||||
}
|
||||
}
|
||||
|
||||
.scaleInCircle {
|
||||
animation: scaleInCircle 0.6s;
|
||||
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
10. Gelatine
|
||||
========================================================================== */
|
||||
|
||||
@keyframes gelatine {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: scale(0.9, 1.1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.1, 0.9);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(0.95, 1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gelatine {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: scale(0.9, 1.1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.1, 0.9);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(0.95, 1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.gelatine {
|
||||
animation: gelatine 0.6s;
|
||||
animation-duration: 0.6s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
11. Wave
|
||||
========================================================================== */
|
||||
|
||||
@keyframes wave {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(4.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
12. Levitate
|
||||
========================================================================== */
|
||||
|
||||
@keyframes levitate {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(0, 10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes levitate {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(0, 10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.levitate {
|
||||
animation-name: levitate;
|
||||
animation-duration: 3s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
13. Glowing
|
||||
========================================================================== */
|
||||
|
||||
@keyframes glowing {
|
||||
0% {
|
||||
box-shadow: 0 0 -10px #fafafa;
|
||||
}
|
||||
|
||||
40% {
|
||||
box-shadow: 0 0 20px #fafafa;
|
||||
}
|
||||
|
||||
60% {
|
||||
box-shadow: 0 0 20px #fafafa;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 -10px #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
14. Translate Left
|
||||
========================================================================== */
|
||||
|
||||
@keyframes translateLeft {
|
||||
from {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translateLeft {
|
||||
from {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.translateLeft {
|
||||
animation-name: translateLeft;
|
||||
animation-duration: 0.3s;
|
||||
transition: all 500ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
15. View transition
|
||||
========================================================================== */
|
||||
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
::view-transition-old(root),
|
||||
.is-dark::view-transition-new(root) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
::view-transition-new(root),
|
||||
.is-dark::view-transition-old(root) {
|
||||
z-index: 9999;
|
||||
}
|
||||
30
src/scss/layout/_custom.scss
Normal file
30
src/scss/layout/_custom.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
.valid-err {
|
||||
border: 2px dotted red;
|
||||
border-radius: 10px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.mouse-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
background-color: var(--primary) !important;
|
||||
|
||||
|
||||
td {
|
||||
color: white !important;
|
||||
|
||||
.flex-media > .meta > h3 {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-pre-line {
|
||||
white-space: pre-line;
|
||||
}
|
||||
45
src/scss/layout/_dark.scss
Normal file
45
src/scss/layout/_dark.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
/*! _dark.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Layout Dark mode
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Layout Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%);
|
||||
|
||||
&.is-chat-side-collapsed {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 5%) !important;
|
||||
}
|
||||
|
||||
&.opened {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 5%);
|
||||
}
|
||||
|
||||
.pageloader {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%);
|
||||
}
|
||||
|
||||
.infraloader {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 15%) !important;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
h1 {
|
||||
color: color-mix(in oklab, var(--primary-grey), white 3%);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-toggle .iconify {
|
||||
background: var(--primary);
|
||||
color: var(--primary--color-invert);
|
||||
}
|
||||
|
||||
.zoom-overlay {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 10%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 10%);
|
||||
}
|
||||
}
|
||||
218
src/scss/layout/_helpers.scss
Normal file
218
src/scss/layout/_helpers.scss
Normal file
@@ -0,0 +1,218 @@
|
||||
/*! _helpers.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Spacing helpers
|
||||
2. Color helpers
|
||||
3. Shadow helpers
|
||||
4. Dark helpers
|
||||
5. Radius helpers
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Spacing helpers
|
||||
========================================================================== */
|
||||
|
||||
$spaceamounts: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100;
|
||||
$sides: top, bottom, left, right;
|
||||
|
||||
@each $space in $spaceamounts {
|
||||
@each $side in $sides {
|
||||
.m-#{str-slice($side, 0, 1)}-#{$space} {
|
||||
margin-#{$side}: #{$space}px !important;
|
||||
}
|
||||
|
||||
.p-#{str-slice($side, 0, 1)}-#{$space} {
|
||||
padding-#{$side}: #{$space}px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-padding-all {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.no-padding-top {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.no-padding-bottom {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.no-padding-left {
|
||||
padding-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
.no-padding-right {
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
.no-margin-all {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.no-margin-top {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.no-margin-bottom {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.no-margin-left {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
.is-block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.is-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.is-rounded {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.no-margin-right {
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
.has-fullheight {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.has-fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.no-scroll {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.has-help-cursor {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.zero-height {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.max-h-60 {
|
||||
max-height: 60px;
|
||||
}
|
||||
|
||||
.max-h-280 {
|
||||
max-height: 280px;
|
||||
}
|
||||
|
||||
iconify-icon {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.iconify {
|
||||
&.is-inline {
|
||||
vertical-align: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Color helpers
|
||||
========================================================================== */
|
||||
|
||||
.has-text-secondary {
|
||||
color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
.has-text-light {
|
||||
color: var(--light-text) !important;
|
||||
}
|
||||
|
||||
.has-background-secondary {
|
||||
background-color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
// /* ==========================================================================
|
||||
// 3. Shadow helpers
|
||||
// ========================================================================== */
|
||||
|
||||
.has-light-shadow {
|
||||
box-shadow: var(--light-box-shadow);
|
||||
|
||||
&.has-light-border {
|
||||
border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
4. Dark helpers
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
// Card border helper
|
||||
.is-dark-card-bordered,
|
||||
.is-dark-bordered-12 {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%) !important;
|
||||
}
|
||||
|
||||
// Primary Helper
|
||||
.is-dark-primary {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.is-dark-primary-hover:hover {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
// BG Helpers
|
||||
.is-dark-bg-1 {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 1%) !important;
|
||||
}
|
||||
|
||||
.is-dark-bg-2 {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%) !important;
|
||||
}
|
||||
|
||||
.is-dark-bg-3 {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 3%) !important;
|
||||
}
|
||||
|
||||
.is-dark-bg-4 {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 4%) !important;
|
||||
}
|
||||
|
||||
.is-dark-bg-5 {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 5%) !important;
|
||||
}
|
||||
|
||||
.is-dark-bg-6 {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
4. Radius helpers
|
||||
========================================================================== */
|
||||
|
||||
.radius-5 {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.radius-75 {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.radius-full {
|
||||
border-radius: var(--radius-rounded);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
5. Size helpers
|
||||
========================================================================== */
|
||||
|
||||
.max-w-540 {
|
||||
max-width: 540px;
|
||||
}
|
||||
1095
src/scss/layout/_landing.scss
Normal file
1095
src/scss/layout/_landing.scss
Normal file
File diff suppressed because it is too large
Load Diff
288
src/scss/layout/_layout.scss
Normal file
288
src/scss/layout/_layout.scss
Normal file
@@ -0,0 +1,288 @@
|
||||
/*! _layout.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. App Layout
|
||||
2. View Wrapper
|
||||
3. Page Content
|
||||
4. Page Title / Toolbar
|
||||
5. Minimal Wrapper
|
||||
6. Media Queries
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. App layout
|
||||
========================================================================== */
|
||||
|
||||
body {
|
||||
background: var(--background-grey);
|
||||
|
||||
&.opened {
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
&.is-fixed {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.is-curved {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
}
|
||||
|
||||
.app-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgb(0 0 0);
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&.is-active {
|
||||
opacity: 0.4;
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-highlight {
|
||||
position: relative;
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
4. Page Title / Toolbar
|
||||
========================================================================== */
|
||||
|
||||
.is-navbar {
|
||||
.page-title {
|
||||
display: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
|
||||
.title-wrap {
|
||||
margin-inline-start: 1rem;
|
||||
|
||||
h1 {
|
||||
text-align: inset-inline-start;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1;
|
||||
color: var(--light-text);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
margin-inline-start: auto;
|
||||
|
||||
.control {
|
||||
min-width: 280px;
|
||||
margin-inline-end: 1rem;
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
transform: scale(0.55);
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.toolbar-notifications {
|
||||
margin: 0 4px;
|
||||
|
||||
.dropdown {
|
||||
&:hover {
|
||||
.is-trigger {
|
||||
background: var(--white);
|
||||
border-color: var(--fade-grey);
|
||||
border-radius: var(--radius-rounded);
|
||||
box-shadow: var(--light-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.is-trigger {
|
||||
position: relative;
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
|
||||
.iconify {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.new-indicator {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
inset-inline-end: 1px;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: var(--radius-rounded);
|
||||
background: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.dropdown-content {
|
||||
top: 2.5rem;
|
||||
line-height: 1.5;
|
||||
color: var(--dark-text);
|
||||
width: 20rem;
|
||||
background: var(--white);
|
||||
border-radius: 5px;
|
||||
box-shadow: var(--light-box-shadow);
|
||||
padding-top: 0;
|
||||
|
||||
.heading {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
border-bottom: 0.01rem solid var(--light-grey);
|
||||
margin-bottom: 0;
|
||||
|
||||
.heading-left {
|
||||
h6 {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--light-text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
.heading-right {
|
||||
.notification-link {
|
||||
margin: 0.4rem 0;
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-list {
|
||||
list-style-type: none;
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0;
|
||||
|
||||
.notification-item {
|
||||
display: flex;
|
||||
padding: 0.65rem 0;
|
||||
|
||||
.img-left {
|
||||
img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 2.25rem;
|
||||
width: 2.25rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
border-radius: var(--radius-rounded);
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-content {
|
||||
text-align: start;
|
||||
font-family: var(--font);
|
||||
|
||||
.user-info {
|
||||
color: var(--dark-text);
|
||||
font-size: 0.95rem;
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
border-radius: var(--radius-rounded);
|
||||
margin: 0 4px;
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
&:hover {
|
||||
background: var(--white);
|
||||
border-color: var(--fade-grey);
|
||||
box-shadow: var(--light-box-shadow);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-offset: var(--accessibility-focus-outline-offset);
|
||||
outline-width: var(--accessibility-focus-outline-width);
|
||||
outline-style: var(--accessibility-focus-outline-style);
|
||||
outline-color: var(--accessibility-focus-outline-color);
|
||||
}
|
||||
|
||||
.iconify {
|
||||
font-size: 20px;
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
border-radius: var(--radius-rounded);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
6. Media Queries
|
||||
========================================================================== */
|
||||
|
||||
@media (width <= 767px) {
|
||||
.page-title {
|
||||
.toolbar {
|
||||
.control {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width >= 768px) and (width <= 1024px) and (orientation: portrait) {
|
||||
.page-title {
|
||||
.title-wrap {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
534
src/scss/layout/_mobile-subsidebar.scss
Normal file
534
src/scss/layout/_mobile-subsidebar.scss
Normal file
@@ -0,0 +1,534 @@
|
||||
.mobile-subsidebar {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
inset-inline-start: 0;
|
||||
height: calc(100% - 60px);
|
||||
width: 280px;
|
||||
background: var(--white);
|
||||
border-top: 1px solid var(--fade-grey);
|
||||
border-inline-end: 1px solid var(--fade-grey);
|
||||
z-index: 99;
|
||||
|
||||
.navbar-divider {
|
||||
width: 83%;
|
||||
margin: 5px auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: calc(100% - 60px);
|
||||
margin-inline-start: 60px;
|
||||
|
||||
.sidebar-title {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
|
||||
h3 {
|
||||
font-family: var(--font-alt);
|
||||
color: var(--muted-grey);
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
height: calc(100% - 70px);
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
padding: 0 20px 20px;
|
||||
|
||||
li {
|
||||
&.is-active {
|
||||
a {
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-children {
|
||||
display: block;
|
||||
height: unset;
|
||||
min-height: 36px;
|
||||
|
||||
&.active {
|
||||
.collapse-wrap {
|
||||
a {
|
||||
color: var(--dark-text);
|
||||
font-weight: 600;
|
||||
|
||||
.iconify {
|
||||
transform: rotate(90deg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: 20px;
|
||||
border-radius: 100px;
|
||||
background: var(--danger);
|
||||
color: var(--white);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-wrap {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 36px;
|
||||
align-items: stretch;
|
||||
|
||||
> a {
|
||||
font-family: var(--font-alt);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--light-text);
|
||||
|
||||
.iconify {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
font-size: 18px;
|
||||
margin-inline-start: auto;
|
||||
transform: rotate(calc(var(--transform-direction) * 0));
|
||||
transition:
|
||||
color 0.3s,
|
||||
background-color 0.3s,
|
||||
border-color 0.3s,
|
||||
height 0.3s,
|
||||
width 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
height: 32px;
|
||||
|
||||
&.has-divider {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.is-submenu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-inline-start: 16px;
|
||||
font-size: 0.95rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
&.is-active {
|
||||
font-weight: 500;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.iconify, .lnil {
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.iconify {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.divider {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
height: 10px;
|
||||
margin: 5px 0 10px;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 15%);
|
||||
|
||||
&.with-label {
|
||||
border-bottom: 0;
|
||||
margin-top: 25px;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.divider-label {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 6px 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
color: var(--light-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-action {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
|
||||
.button {
|
||||
.iconify {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-messaging {
|
||||
ul {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-inline-start: 2px solid transparent;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 5%);
|
||||
cursor: pointer;
|
||||
|
||||
&.is-active {
|
||||
border-inline-start-color: var(--primary);
|
||||
background: color-mix(in oklab, var(--primary), white 51%);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: color-mix(in oklab, var(--primary), white 51%);
|
||||
}
|
||||
}
|
||||
|
||||
.recent-user {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-inline-start: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
.user-container {
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: var(--radius-rounded);
|
||||
display: block;
|
||||
|
||||
&.is-user {
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
&.is-badge {
|
||||
display: block;
|
||||
position: absolute;
|
||||
inset-inline-end: -5px;
|
||||
bottom: 0;
|
||||
border: 2px solid var(--white);
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: var(--radius-rounded);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recipient-meta {
|
||||
margin: 0 15px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
|
||||
&:first-child {
|
||||
color: var(--dark-text);
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted-grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-group {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-inline-start: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border: 2px solid var(--white);
|
||||
border-radius: var(--radius-rounded);
|
||||
display: block;
|
||||
|
||||
&.is-user {
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
&:nth-child(2),
|
||||
&:nth-child(3),
|
||||
&:nth-child(4) {
|
||||
margin-inline-start: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.more-indicator {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
border-radius: var(--radius-rounded);
|
||||
background: var(--primary);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-inline-start: -15px;
|
||||
border: 2px solid var(--white);
|
||||
|
||||
span {
|
||||
display: block;
|
||||
color: var(--white);
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
time {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
inset-inline-end: 20px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted-grey);
|
||||
}
|
||||
|
||||
.group-message {
|
||||
padding: 0 10px;
|
||||
margin-top: -20px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted-grey);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 220px;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.is-unread {
|
||||
color: var(--dark-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #fafafa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-wallet {
|
||||
.wallet-item {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-inline-start: 2px solid transparent;
|
||||
border-bottom: 1px solid var(--fade-grey);
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
background: color-mix(in oklab, var(--primary), white 51%);
|
||||
border-inline-start-color: var(--primary);
|
||||
|
||||
&.is-eth {
|
||||
.wallet-meta {
|
||||
small {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.currency-value {
|
||||
span {
|
||||
color: var(--dark-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.currency-coin {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
|
||||
.kodr-coin-fill,
|
||||
.eth-coin-fill {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
transform: scale(1);
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
.st9,
|
||||
.st10 {
|
||||
fill: var(--muted-grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wallet-meta {
|
||||
margin-inline-start: 10px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
color: var(--muted-grey);
|
||||
|
||||
small {
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.currency-value {
|
||||
span {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--muted-grey) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
padding: 0;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
}
|
||||
|
||||
.buy-wrap {
|
||||
padding: 16px;
|
||||
|
||||
.button {
|
||||
.kodr-coin-fill {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-inline-end: 5px;
|
||||
margin-inline-start: -5px;
|
||||
|
||||
.path {
|
||||
fill: var(--smoke-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.request-payout {
|
||||
width: 100%;
|
||||
|
||||
.button {
|
||||
height: 40px !important;
|
||||
padding: 0 26px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.iconify {
|
||||
fill: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
.iconify {
|
||||
font-size: 24px;
|
||||
fill: var(--primary);
|
||||
margin-inline-end: 5px;
|
||||
margin-inline-start: -12px;
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-dark {
|
||||
.mobile-subsidebar {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 4%);
|
||||
|
||||
.submenu {
|
||||
li {
|
||||
&.is-active {
|
||||
a {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-children {
|
||||
&.active {
|
||||
.collapse-wrap {
|
||||
> a {
|
||||
color: var(--smoke-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-messaging {
|
||||
ul li {
|
||||
&.is-active {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), black 4%);
|
||||
border-inline-start-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.recipient-meta {
|
||||
span {
|
||||
&:first-child,
|
||||
&.is-unread {
|
||||
color: var(--primary-grey) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-group {
|
||||
img,
|
||||
span {
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 2%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
301
src/scss/layout/_navbar.scss
Normal file
301
src/scss/layout/_navbar.scss
Normal file
@@ -0,0 +1,301 @@
|
||||
/*! _navbar.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Webapp Subnavbar
|
||||
2. Webapp Subnavbar Dark mode
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Webapp Subnavbar
|
||||
========================================================================== */
|
||||
|
||||
.navbar-subnavbar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
background: var(--white);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: 99;
|
||||
border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
|
||||
box-shadow: var(--light-box-shadow);
|
||||
transition-property: height, opacity;
|
||||
transition-duration: 0.1s, 0.2s;
|
||||
top: 64px;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
margin: 0 auto;
|
||||
|
||||
&.is-active {
|
||||
height: calc(100% - 64px);
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
&.is-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
min-width: 400px;
|
||||
max-width: 800px;
|
||||
width: max-content;
|
||||
padding: 1rem;
|
||||
height: auto;
|
||||
border-radius: var(--radius-large);
|
||||
}
|
||||
|
||||
.navbar-subnavbar-inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: none;
|
||||
|
||||
&.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
margin: 0 auto 10px;
|
||||
|
||||
&.is-3 {
|
||||
max-width: 410px;
|
||||
}
|
||||
|
||||
&.is-2 {
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
&.is-4 {
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
border: none !important;
|
||||
padding: 10px 0;
|
||||
|
||||
li {
|
||||
flex: 1 1 0;
|
||||
|
||||
&.is-active {
|
||||
a {
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
background: var(--white);
|
||||
border-color: color-mix(in oklab, var(--fade-grey), black 3%);
|
||||
box-shadow: var(--light-box-shadow);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
background: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
background: color-mix(in oklab, var(--fade-grey), white 4%);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-transform: uppercase;
|
||||
font-family: var(--font-alt);
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 1px;
|
||||
padding: 10px 16px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
margin: 0 10px;
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 0 20px;
|
||||
|
||||
.tab-content-inner {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
min-height: 220px;
|
||||
|
||||
.center {
|
||||
flex-grow: 2;
|
||||
max-width: 940px;
|
||||
max-height: 220px;
|
||||
margin: 0 auto;
|
||||
padding: 10px 20px 0;
|
||||
|
||||
.columns {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.column {
|
||||
&:not(:last-child) {
|
||||
border-inline-end: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
|
||||
}
|
||||
}
|
||||
|
||||
.column-heading {
|
||||
font-family: var(--font-alt);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: var(--dark-text);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.column-placeholder {
|
||||
@include vuero-r-card;
|
||||
|
||||
text-align: center;
|
||||
padding: 16px !important;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: var(--light-box-shadow);
|
||||
|
||||
h3 {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
> img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 34px;
|
||||
margin: 0 auto 6px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--font-alt);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--dark-text);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
transition:
|
||||
color 0.3s,
|
||||
background-color 0.3s,
|
||||
border-color 0.3s,
|
||||
height 0.3s,
|
||||
width 0.3s;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
a {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border-radius: 0;
|
||||
|
||||
a {
|
||||
color: color-mix(in oklab, var(--primary), black 14%);
|
||||
|
||||
.iconify {
|
||||
opacity: 1;
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.router-link-exact-active {
|
||||
color: color-mix(in oklab, var(--primary), black 14%);
|
||||
|
||||
.iconify {
|
||||
opacity: 1;
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: color-mix(in oklab, var(--light-text), white 5%);
|
||||
|
||||
span {
|
||||
font-family: var(--font);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.lnil,
|
||||
.lnir,
|
||||
.fas,
|
||||
.fal,
|
||||
.fab,
|
||||
.far {
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
line-height: 1.6;
|
||||
height: 1.7em;
|
||||
font-size: 0.65rem;
|
||||
margin-inline-start: 0.25rem;
|
||||
}
|
||||
|
||||
.iconify {
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin-inline-start: 12px;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
stroke-width: 2px;
|
||||
fill: var(--primary);
|
||||
transition:
|
||||
color 0.3s,
|
||||
background-color 0.3s,
|
||||
border-color 0.3s,
|
||||
height 0.3s,
|
||||
width 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Webapp Subnavbar Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.navbar-subnavbar {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%);
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 4%);
|
||||
|
||||
.navbar-subnavbar-inner {
|
||||
.tab-content {
|
||||
.tab-content-inner {
|
||||
.center {
|
||||
.column {
|
||||
&:not(:last-child) {
|
||||
border-inline-end: 1px solid color-mix(in oklab, var(--dark-sidebar), white 12%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.column-placeholder {
|
||||
@include vuero-card--dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
597
src/scss/layout/_responsive.scss
Normal file
597
src/scss/layout/_responsive.scss
Normal file
@@ -0,0 +1,597 @@
|
||||
/*! _responsive.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/* ==========================================================================
|
||||
Responsive styles
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
1. Tablet Landscape
|
||||
2. Tablet portrait
|
||||
3. Mobile Only
|
||||
4. Custom
|
||||
5. Responsive Helpers
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Tablet Landscape
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (width >= 768px) and (width <= 1024px) and (orientation: landscape) {
|
||||
.pageloader,
|
||||
.infraloader {
|
||||
width: calc(100% - 60px) !important;
|
||||
inset-inline-start: 60px !important;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main-sidebar {
|
||||
width: 60px !important;
|
||||
|
||||
&.has-labels {
|
||||
.sidebar-inner {
|
||||
.icon-menu,
|
||||
.bottom-menu {
|
||||
overflow-x: hidden;
|
||||
|
||||
ul {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
a {
|
||||
&::after {
|
||||
inset-inline-start: -30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-float {
|
||||
width: 56px !important;
|
||||
margin-inline-start: 4px;
|
||||
|
||||
&:not(.is-bordered) {
|
||||
.sidebar-brand {
|
||||
width: 56px !important;
|
||||
}
|
||||
|
||||
.sidebar-inner {
|
||||
.icon-menu,
|
||||
.bottom-menu {
|
||||
overflow-x: hidden;
|
||||
|
||||
ul {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 56px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-bordered {
|
||||
width: 60px !important;
|
||||
|
||||
.sidebar-brand {
|
||||
width: 60px !important;
|
||||
}
|
||||
|
||||
.sidebar-inner {
|
||||
.icon-menu,
|
||||
.bottom-menu {
|
||||
overflow-x: hidden;
|
||||
|
||||
ul {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 60px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-inner {
|
||||
.bottom-menu {
|
||||
padding-bottom: 0 !important;
|
||||
bottom: -3px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
width: 60px !important;
|
||||
}
|
||||
|
||||
.sidebar-inner {
|
||||
li {
|
||||
width: 60px !important;
|
||||
}
|
||||
|
||||
.icon-menu {
|
||||
max-height: calc(100vh - 60px - 64px) !important;
|
||||
overflow-x: hidden;
|
||||
|
||||
ul {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-main-sidebar,
|
||||
.mobile-overlay,
|
||||
.mobile-subsidebar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sidebar-panel {
|
||||
box-shadow: var(--light-box-shadow);
|
||||
|
||||
.panel-close {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-panel,
|
||||
.sidebar-search {
|
||||
inset-inline-start: 60px !important;
|
||||
}
|
||||
|
||||
.is-navbar {
|
||||
.view-wrapper {
|
||||
.is-stuck {
|
||||
margin-inline-start: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
&.is-project-details {
|
||||
.vuero-hamburger {
|
||||
margin-inline-start: -4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-pulled-lg {
|
||||
.vuero-hamburger {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-stuck {
|
||||
margin-inline-start: 60px !important;
|
||||
width: calc(100% - 60px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Tablet portrait
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (width >= 768px) and (width <= 1024px) and (orientation: portrait) {
|
||||
.infraloader,
|
||||
.pageloader {
|
||||
width: 100% !important;
|
||||
inset-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
.navbar-navbar,
|
||||
.circular-menu,
|
||||
.navbar-navbar-clean {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 60px;
|
||||
|
||||
.brand-start {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.is-brand {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.brand-end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 90px;
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
|
||||
.is-notification {
|
||||
&.is-active,
|
||||
&:hover {
|
||||
.navbar-link {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: 3;
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-large);
|
||||
border: 1px solid var(--fade-grey);
|
||||
box-shadow:
|
||||
0 8px 8px rgb(10 10 10 / 10%),
|
||||
0 0 0 1px rgb(10 10 10 / 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Toolbar
|
||||
.toolbar {
|
||||
.toolbar-notifications {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vuero-hamburger:not(.is-visible) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Sidebars
|
||||
.main-sidebar,
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-panel {
|
||||
display: none !important;
|
||||
inset-inline-start: 0 !important;
|
||||
z-index: 100 !important;
|
||||
box-shadow: var(--light-box-shadow);
|
||||
|
||||
.panel-close {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin-top: 0;
|
||||
padding-top: 20px;
|
||||
|
||||
&.is-project-details {
|
||||
.vuero-hamburger {
|
||||
margin-inline-start: 7px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-navbar {
|
||||
.view-wrapper {
|
||||
padding-top: 70px !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: flex !important;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.is-stuck {
|
||||
top: 60px !important;
|
||||
margin-inline-start: 0 !important;
|
||||
width: 100% !important;
|
||||
padding-inline-end: 20px !important;
|
||||
}
|
||||
|
||||
.widget-demo-columns {
|
||||
display: flex;
|
||||
|
||||
&.half-columns {
|
||||
> .column {
|
||||
width: 50% !important;
|
||||
max-width: 50% !important;
|
||||
min-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
> .column {
|
||||
width: 33.3%;
|
||||
max-width: 33.3%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. Mobile Only
|
||||
========================================================================== */
|
||||
|
||||
@media (width <= 767px) {
|
||||
.infraloader,
|
||||
.pageloader {
|
||||
width: 100% !important;
|
||||
inset-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
.navbar-navbar,
|
||||
.circular-menu,
|
||||
.navbar-navbar-clean {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 60px;
|
||||
|
||||
.brand-start {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.is-brand {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.brand-end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 90px;
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
|
||||
.is-notification {
|
||||
&.is-active,
|
||||
&:hover {
|
||||
.navbar-link {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: 3;
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-large);
|
||||
border: 1px solid var(--fade-grey);
|
||||
box-shadow:
|
||||
0 8px 8px rgb(10 10 10 / 10%),
|
||||
0 0 0 1px rgb(10 10 10 / 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
.toolbar-notifications {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vuero-hamburger:not(.is-visible) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sidebar-panel {
|
||||
display: none !important;
|
||||
inset-inline-start: 0 !important;
|
||||
z-index: 100 !important;
|
||||
border-inline-end: 1px solid var(--fade-grey) !important;
|
||||
box-shadow: var(--light-box-shadow);
|
||||
|
||||
.subpanel-header {
|
||||
height: 60px !important;
|
||||
background: #fafafa;
|
||||
|
||||
.iconify {
|
||||
color: var(--muted-grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-sidebar,
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin-top: 0;
|
||||
padding-top: 20px;
|
||||
|
||||
&.is-project-details {
|
||||
.vuero-hamburger {
|
||||
margin-inline-start: -4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.is-navbar {
|
||||
.view-wrapper {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: flex !important;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.is-stuck {
|
||||
top: 59px !important;
|
||||
margin-inline-start: 0 !important;
|
||||
width: 100% !important;
|
||||
padding-inline-end: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
4. Custom
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (width >= 1025px) and (orientation: landscape) {
|
||||
.panel-close {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.mobile-main-sidebar,
|
||||
.mobile-overlay,
|
||||
.mobile-subsidebar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
5. Responsive Helpers
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (width <= 767px) {
|
||||
.h-hidden-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.h-only-mobile {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.h-only-mobile-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.is-half-mobile-p {
|
||||
display: flex !important;
|
||||
|
||||
.column {
|
||||
width: 50%;
|
||||
min-width: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width >= 768px) and (width <= 1024px) and (orientation: portrait) {
|
||||
.h-hidden-tablet-p {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-flex-tablet-p {
|
||||
display: flex !important;
|
||||
|
||||
&.is-half-tablet-p {
|
||||
.column {
|
||||
width: 50%;
|
||||
min-width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.h-only-tablet-p {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.h-only-tablet-p-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width >= 768px) and (width <= 1024px) and (orientation: landscape) {
|
||||
.h-hidden-tablet-l {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-flex-tablet-l {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.h-only-tablet-l {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width >= 768px) and (orientation: landscape) {
|
||||
.h-only-mobile {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.h-only-mobile-flex {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.h-only-tablet-p {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.h-only-tablet-p-flex {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width >= 1025px) {
|
||||
.h-hidden-desktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-overlay-desktop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.mx-3-desktop {
|
||||
margin-inline-start: 0.75rem !important;
|
||||
margin-inline-end: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width >= 768px) and (width <= 1024px) and (orientation: portrait) {
|
||||
.mobile-navbar .navbar-item.is-notification .navbar-dropdown {
|
||||
width: 280px !important;
|
||||
position: absolute !important;
|
||||
inset-inline-start: initial !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width <= 1024px) and (orientation: portrait) {
|
||||
.mobile-navbar .navbar-item.is-notification {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.mobile-navbar {
|
||||
display: flex !important;
|
||||
|
||||
> .container {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
154
src/scss/layout/_right-panel.scss
Normal file
154
src/scss/layout/_right-panel.scss
Normal file
@@ -0,0 +1,154 @@
|
||||
/*! _right-panel.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Right Panel Base
|
||||
2. Right Panel Base Dark mode
|
||||
3. Media Queries
|
||||
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Right Panel Base
|
||||
========================================================================== */
|
||||
|
||||
.right-panel-wrapper {
|
||||
&.is-active {
|
||||
.panel-overlay {
|
||||
opacity: 0.8;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
transform: translateX(calc(var(--transform-direction) * 0));
|
||||
}
|
||||
}
|
||||
|
||||
&.is-left {
|
||||
&.is-active {
|
||||
.right-panel {
|
||||
transform: translateX(calc(var(--transform-direction) * 0)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
inset-inline-end: unset;
|
||||
inset-inline-start: 0;
|
||||
transform: translateX(calc(var(--transform-direction) * -100%));
|
||||
}
|
||||
}
|
||||
|
||||
.panel-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--dark-sidebar);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: 101;
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
width: 360px;
|
||||
height: 100%;
|
||||
background: var(--white);
|
||||
transform: translateX(calc(var(--transform-direction) * 100%));
|
||||
z-index: 102;
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
.right-panel-head {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
|
||||
h3 {
|
||||
color: var(--muted-grey);
|
||||
font-family: var(--font-alt);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
> img {
|
||||
max-width: 36px;
|
||||
}
|
||||
|
||||
.close-panel {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: var(--radius-rounded);
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
&:hover {
|
||||
background: var(--fade-grey);
|
||||
|
||||
.iconify {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.iconify {
|
||||
color: var(--light-text);
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-panel-body {
|
||||
position: relative;
|
||||
height: calc(100% - 60px);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Right Panel Base Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.right-panel-wrapper {
|
||||
.right-panel {
|
||||
background: var(--dark-sidebar);
|
||||
|
||||
.right-panel-head {
|
||||
h3 {
|
||||
color: var(--dark-dark-text);
|
||||
}
|
||||
|
||||
.close-panel {
|
||||
&:hover {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%);
|
||||
|
||||
.iconify {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. Media Queries
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (width <= 767px) {
|
||||
.right-panel-wrapper {
|
||||
.right-panel {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
1037
src/scss/layout/_sidebar-panel.scss
Normal file
1037
src/scss/layout/_sidebar-panel.scss
Normal file
File diff suppressed because it is too large
Load Diff
229
src/scss/layout/_transitions.scss
Normal file
229
src/scss/layout/_transitions.scss
Normal file
@@ -0,0 +1,229 @@
|
||||
/* ==========================================================================
|
||||
1. fade-fast
|
||||
========================================================================== */
|
||||
|
||||
.fade-fast-enter-active,
|
||||
.fade-fast-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-fast-enter-from,
|
||||
.fade-fast-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade-fast-enter-active,
|
||||
.fade-fast-leave-active {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. fade-slow
|
||||
========================================================================== */
|
||||
|
||||
.fade-slow-enter-active,
|
||||
.fade-slow-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-slow-enter-from,
|
||||
.fade-slow-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade-slow-enter-active,
|
||||
.fade-slow-leave-active {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. translate-page-y
|
||||
========================================================================== */
|
||||
|
||||
.translate-page-y-enter-active,
|
||||
.translate-page-y-leave-active {
|
||||
transform: translateY(0);
|
||||
transition:
|
||||
transform 0.25s ease-out,
|
||||
opacity 0.25s ease-out;
|
||||
}
|
||||
|
||||
.translate-page-y-enter-from {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.translate-page-y-leave-to {
|
||||
transform: translateY(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.translate-page-y-enter-active,
|
||||
.translate-page-y-leave-active {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
4. translate-page-x
|
||||
========================================================================== */
|
||||
|
||||
.translate-page-x-enter-active {
|
||||
animation: translate-page-x-in 0.2s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
.translate-page-x-leave-active {
|
||||
animation: translate-page-x-out 0.2s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
@keyframes translate-page-x-in {
|
||||
0% {
|
||||
transform: translateX(calc(var(--transform-direction) * -200px));
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(calc(var(--transform-direction) * 0));
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translate-page-x-out {
|
||||
0% {
|
||||
transform: translateX(calc(var(--transform-direction) * 0));
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(calc(var(--transform-direction) * 500px));
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.translate-page-x-enter-active,
|
||||
.translate-page-x-leave-active {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
5. list
|
||||
========================================================================== */
|
||||
|
||||
.list-item {
|
||||
display: inline-block;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.list-enter-from,
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
6. list-complete
|
||||
========================================================================== */
|
||||
|
||||
.list-complete-item {
|
||||
transition: all 0.8s ease;
|
||||
display: inline-block;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.list-complete-enter-from,
|
||||
.list-complete-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.list-complete-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.list-complete-enter-active,
|
||||
.list-complete-leave-active {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
7. slide-x
|
||||
========================================================================== */
|
||||
|
||||
.slide-x-enter-active {
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
.slide-x-leave-active {
|
||||
transition: transform 0.2s ease-in;
|
||||
}
|
||||
|
||||
.slide-x-enter-from {
|
||||
transform: translateX(calc(var(--transform-direction) * -100%));
|
||||
}
|
||||
|
||||
.slide-x-enter-to {
|
||||
transform: translateX(calc(var(--transform-direction) * 0));
|
||||
}
|
||||
|
||||
.slide-x-leave-from {
|
||||
transform: translateX(calc(var(--transform-direction) * 0));
|
||||
}
|
||||
|
||||
.slide-x-leave-to {
|
||||
transform: translateX(calc(var(--transform-direction) * -100%));
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.slide-x-enter-active,
|
||||
.slide-x-leave-active {
|
||||
transition: none;
|
||||
transform: translateX(calc(var(--transform-direction) * 0));
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
7. from-bottom
|
||||
========================================================================== */
|
||||
|
||||
.from-bottom-enter-active,
|
||||
.from-bottom-leave-active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition:
|
||||
opacity 0.2s ease,
|
||||
transform 0.3s ease;
|
||||
}
|
||||
|
||||
.from-bottom-enter-from,
|
||||
.from-bottom-leave-to {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.from-bottom-enter-active,
|
||||
.from-bottom-leave-active {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
304
src/scss/layout/_typography.scss
Normal file
304
src/scss/layout/_typography.scss
Normal file
@@ -0,0 +1,304 @@
|
||||
/*! _typography.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Titles
|
||||
2. Titles Dark mode
|
||||
3. Typography Helpers
|
||||
*/
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
//font-synthesis: none;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
1. Titles
|
||||
========================================================================== */
|
||||
|
||||
.title {
|
||||
font-family: var(--font-alt);
|
||||
color: var(--dark-text);
|
||||
|
||||
&.is-narrow {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.is-thin {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
&.is-heavy {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.is-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&.is-bolder {
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: var(--font);
|
||||
color: var(--dark-text);
|
||||
|
||||
&.is-narrow {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.is-thin {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
&.is-heavy {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.is-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&.is-bolder {
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(--font);
|
||||
font-weight: 300;
|
||||
color: var(--modal-text);
|
||||
//color: var(--light-text);
|
||||
|
||||
&.white-text {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
color: var(--modal-text);
|
||||
}
|
||||
|
||||
var {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.font-size-base {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.has-dark-text {
|
||||
color: var(--dark-text);
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre;
|
||||
color: var(--primary);
|
||||
background: transparent;
|
||||
font-family: var(--font-monospace);
|
||||
}
|
||||
|
||||
|
||||
.font-mono {
|
||||
white-space: pre;
|
||||
font-family: var(--font-monospace);
|
||||
}
|
||||
|
||||
pre {
|
||||
border-radius: 0.75rem;
|
||||
|
||||
&.shiki {
|
||||
background: #f5f5f5 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-dark {
|
||||
pre,
|
||||
code {
|
||||
background: #1a1a1f;
|
||||
color: #c0c0d1;
|
||||
}
|
||||
|
||||
pre.shiki {
|
||||
background: #1a1a1f !important;
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
select,
|
||||
textarea,
|
||||
input,
|
||||
label,
|
||||
button,
|
||||
.is-trigger {
|
||||
&:focus-visible {
|
||||
border-radius: 4px;
|
||||
outline-offset: var(--accessibility-focus-outline-offset);
|
||||
outline-width: var(--accessibility-focus-outline-width);
|
||||
outline-style: var(--accessibility-focus-outline-style);
|
||||
outline-color: var(--accessibility-focus-outline-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Titles Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.title,
|
||||
.dark-inverted {
|
||||
color: var(--dark-dark-text) !important;
|
||||
}
|
||||
|
||||
.dark-white {
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
a {
|
||||
&.dark-inverted {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
&.dark-inverted-hover:hover {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--dark-dark-text);
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.title {
|
||||
font-family: var(--font-alt);
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. Typography Helpers
|
||||
========================================================================== */
|
||||
|
||||
.is-font {
|
||||
font-family: var(--font);
|
||||
}
|
||||
|
||||
.is-font-alt {
|
||||
font-family: var(--font-alt) !important;
|
||||
}
|
||||
|
||||
.is-weight-300 {
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
.is-weight-400 {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.is-weight-500 {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.is-weight-600 {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.is-weight-700 {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.is-weight-500 {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.is-weight-900 {
|
||||
font-weight: 900 !important;
|
||||
}
|
||||
|
||||
.rem-70 {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.rem-75 {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.rem-80 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.rem-85 {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.rem-90 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.rem-95 {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.rem-100 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.rem-110 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.rem-120 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.rem-130 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.rem-140 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.rem-150 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.rem-160 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.rem-170 {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.rem-180 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.rem-190 {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
.rem-200 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.is-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
752
src/scss/layout/_utilities.scss
Normal file
752
src/scss/layout/_utilities.scss
Normal file
@@ -0,0 +1,752 @@
|
||||
/*! _utilities.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/*
|
||||
1. Titles
|
||||
2. Divider
|
||||
3. Helpers
|
||||
4. Hamburger
|
||||
5. Tooltips
|
||||
6. Alertify js
|
||||
7. Alertify js Dark mode
|
||||
8. Divider alt
|
||||
9. Text tips
|
||||
10. Text tips Dark mode
|
||||
11. Hopscotch
|
||||
12. Demo toggler
|
||||
13. Background images
|
||||
14. Dark mode images
|
||||
15. Demo spacer
|
||||
16. RTL
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
1. Titles
|
||||
========================================================================== */
|
||||
|
||||
.title,
|
||||
.subtitle {
|
||||
&.light-mb {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&.no-mb {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.has-margin-top {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&.has-margin-top-lg {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
&.is-purple {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&.is-light {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
var {
|
||||
font-style: inherit;
|
||||
}
|
||||
|
||||
.has-text-centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Divider
|
||||
========================================================================== */
|
||||
|
||||
.divider-container {
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
|
||||
.divider {
|
||||
text-align: center;
|
||||
margin: 1.5em auto 1em;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-top: 1px;
|
||||
font-size: 1rem;
|
||||
text-transform: none;
|
||||
color: var(--primary-grey);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
width: 36%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
top: 0.9em;
|
||||
height: 1px;
|
||||
content: ' ';
|
||||
border-top: 1px solid var(--primary-grey);
|
||||
}
|
||||
|
||||
&::after {
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 768px) {
|
||||
.divider span::before,
|
||||
.divider span::after {
|
||||
width: 22% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. Helpers
|
||||
========================================================================== */
|
||||
|
||||
.is-flex-wrapped {
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
|
||||
.is-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-vhidden {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.no-click {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
margin-inline-start: auto !important;
|
||||
}
|
||||
|
||||
.mr-auto {
|
||||
margin-inline-end: auto !important;
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.no-margin {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.no-mb {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.mb-20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.is-green {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.is-purple {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.has-slimscroll {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.has-slimscroll-x {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.has-slimscroll-all {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.has-slimscroll,
|
||||
.has-slimscroll-x,
|
||||
.has-slimscroll-all {
|
||||
&::-webkit-scrollbar {
|
||||
height: 6px !important;
|
||||
width: 6px !important;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px !important;
|
||||
background: rgb(0 0 0 / 20%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.has-slimscroll-sm {
|
||||
&::-webkit-scrollbar {
|
||||
height: 3px !important;
|
||||
width: 3px !important;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px !important;
|
||||
background: rgb(0 0 0 / 20%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dark-text {
|
||||
color: var(--dark-text);
|
||||
}
|
||||
|
||||
.light-text {
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
.success-text {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.info-text {
|
||||
color: var(--info);
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.danger-text {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.inverted-text {
|
||||
color: var(--smoke-white);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
4. Hamburger
|
||||
========================================================================== */
|
||||
|
||||
.menu-toggle {
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: opacity 0.4s;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
|
||||
&.has-chevron {
|
||||
.icon-box-toggle {
|
||||
&.active {
|
||||
.icon-line-top {
|
||||
width: 13px !important;
|
||||
top: 17px !important;
|
||||
}
|
||||
|
||||
.icon-line-bottom {
|
||||
width: 13px !important;
|
||||
top: 9px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-box-toggle {
|
||||
background: transparent;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
&.active > span.rotate {
|
||||
transform: rotate(calc(var(--transform-direction) * 90deg));
|
||||
transform: translate(0, 0) rotate(calc(var(--transform-direction) * 90deg));
|
||||
transform: translate(0, 0) rotate(calc(var(--transform-direction) * 90deg));
|
||||
transform: translate(0, 0) rotate(calc(var(--transform-direction) * 90deg));
|
||||
transform: translate(0, 0) rotate(calc(var(--transform-direction) * 90deg));
|
||||
}
|
||||
|
||||
&.active > span > i.icon-line-center {
|
||||
visibility: hidden;
|
||||
width: 1px;
|
||||
height: 3px;
|
||||
inset-inline-start: 70%;
|
||||
}
|
||||
|
||||
&.active > span > i.icon-line-bottom {
|
||||
margin: -2px 0 0 -10px;
|
||||
inset-inline-start: 50%;
|
||||
top: 12px;
|
||||
transform: rotate(calc(var(--transform-direction) * 135deg));
|
||||
transform: translate(0, 0) rotate(calc(var(--transform-direction) * 135deg));
|
||||
transform: translate(0, 0) rotate(calc(var(--transform-direction) * 135deg));
|
||||
transform: translate(0, 0) rotate(calc(var(--transform-direction) * 135deg));
|
||||
transform: translate(0, 0) rotate(calc(var(--transform-direction) * 135deg));
|
||||
}
|
||||
|
||||
&.active > span > i.icon-line-top {
|
||||
margin: -2px 0 0 -10px;
|
||||
inset-inline-start: 50%;
|
||||
top: 12px;
|
||||
transform: rotate(calc(var(--transform-direction) * 45deg));
|
||||
transform: translate(0, 0) rotate(calc(var(--transform-direction) * 45deg));
|
||||
transform: translate(0, 0) rotate(calc(var(--transform-direction) * 45deg));
|
||||
transform: translate(0, 0) rotate(calc(var(--transform-direction) * 45deg));
|
||||
transform: translate(0, 0) rotate(calc(var(--transform-direction) * 45deg));
|
||||
}
|
||||
}
|
||||
|
||||
.icon-line-center {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
background: var(--primary);
|
||||
margin: -1px 0 0 -10px;
|
||||
inset-inline-start: 50%;
|
||||
top: 12px;
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
|
||||
.icon-line-top {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background: var(--primary);
|
||||
margin: -3px 0 0 -10px;
|
||||
inset-inline-start: 50%;
|
||||
top: 6px;
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
|
||||
.icon-line-bottom {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background: var(--primary);
|
||||
margin: 2px 0 0 -10px;
|
||||
inset-inline-start: 50%;
|
||||
top: 17px;
|
||||
transition: all 0.3s; // transition-all test
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
6. Alertify js
|
||||
========================================================================== */
|
||||
|
||||
.alertify .ajs-dialog {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin: auto;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.ajs-dimmer {
|
||||
background-color: var(--dark-sidebar) !important;
|
||||
}
|
||||
|
||||
.ajs-header {
|
||||
font-weight: 600 !important;
|
||||
font-family: var(--font-alt) !important;
|
||||
border-radius: 8px 8px 0 0 !important;
|
||||
}
|
||||
|
||||
.ajs-footer {
|
||||
border-radius: 0 0 6px 6px !important;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.ajs-content {
|
||||
padding: 16px 0 !important;
|
||||
font-family: var(--font) !important;
|
||||
|
||||
b {
|
||||
font-weight: 500 !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ajs-buttons {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.ajs-ok {
|
||||
padding: 8px 22px;
|
||||
height: 33px;
|
||||
min-width: 82px !important;
|
||||
line-height: 0;
|
||||
text-transform: capitalize !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: 0.75rem;
|
||||
background: var(--primary) !important;
|
||||
color: var(--white) !important;
|
||||
border: 1px solid var(--primary);
|
||||
border-radius: var(--radius-large);
|
||||
transition: all 0.3s; // transition-all test
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: var(--primary-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.ajs-cancel {
|
||||
padding: 8px 22px;
|
||||
height: 33px;
|
||||
min-width: 82px !important;
|
||||
line-height: 0;
|
||||
text-transform: capitalize !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: 0.75rem;
|
||||
background: var(--white) !important;
|
||||
color: var(--primary) !important;
|
||||
border: 1px solid var(--primary) !important;
|
||||
border-radius: var(--radius-large);
|
||||
transition: all 0.3s; // transition-all test
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
7. Alertify js Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.ajs-dialog {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 2%) !important;
|
||||
}
|
||||
|
||||
.ajs-header {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
|
||||
color: var(--primary-grey) !important;
|
||||
}
|
||||
|
||||
.ajs-content {
|
||||
color: var(--dark-dark-text) !important;
|
||||
|
||||
span {
|
||||
color: var(--dark-dark-text) !important;
|
||||
|
||||
b {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ajs-footer {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
|
||||
|
||||
.ajs-ok {
|
||||
background: var(--primary) !important;
|
||||
}
|
||||
|
||||
.ajs-cancel {
|
||||
background: color-mix(in oklab, var(--dark-sidebar), white 2%) !important;
|
||||
border-color: color-mix(in oklab, var(--dark-sidebar), white 2%) !important;
|
||||
color: var(--muted-grey) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
8. Divider alt
|
||||
========================================================================== */
|
||||
|
||||
.divider {
|
||||
display: flex;
|
||||
color: var(--muted-grey);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.line {
|
||||
align-items: center;
|
||||
margin: 1em -1em;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
height: 1px;
|
||||
margin: 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&.one-line {
|
||||
&::before,
|
||||
&::after {
|
||||
background: color-mix(in oklab, var(--fade-grey), black 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
9. Text tips
|
||||
========================================================================== */
|
||||
|
||||
.has-text-tip,
|
||||
.has-small-text-tip {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.text-tooltip {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
|
||||
.tooltip-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px 16px;
|
||||
background: var(--white);
|
||||
color: var(--dark-text);
|
||||
border: 1px solid var(--primary-grey);
|
||||
box-shadow: var(--light-box-shadow);
|
||||
border-radius: var(--radius-large);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
10. Text tips Dark mode
|
||||
========================================================================== */
|
||||
|
||||
.is-dark {
|
||||
.text-tooltip {
|
||||
.tooltip-content {
|
||||
background: var(--dark-sidebar);
|
||||
border-color: var(--dark-sidebar);
|
||||
color: var(--primary-grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
11. Hopscotch
|
||||
========================================================================== */
|
||||
|
||||
.app-wrapper {
|
||||
&.is-pushed-bottom {
|
||||
transform: translateY(50px);
|
||||
}
|
||||
}
|
||||
|
||||
.hopscotch-bubble {
|
||||
.hopscotch-bubble-container {
|
||||
.hopscotch-bubble-number {
|
||||
padding: 0;
|
||||
background: var(--primary);
|
||||
border-radius: var(--radius-rounded);
|
||||
box-shadow: var(--primary-box-shadow);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.hopscotcv-actions {
|
||||
.hopscotch-nav-button {
|
||||
background: var(--white);
|
||||
text-shadow: none;
|
||||
color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
font-weight: 500;
|
||||
height: 32px;
|
||||
min-width: 80px;
|
||||
border-radius: 100px;
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
&:hover {
|
||||
background: var(--primary);
|
||||
color: var(--smoke-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
12. Demo toggler
|
||||
========================================================================== */
|
||||
|
||||
.demo-wrapper {
|
||||
position: fixed;
|
||||
bottom: -50px;
|
||||
inset-inline-end: -50px;
|
||||
height: 140px;
|
||||
width: 140px;
|
||||
background: transparent;
|
||||
border-radius: var(--radius-rounded);
|
||||
transform: scale(0.4);
|
||||
transition: all 0.3s; // transition-all test
|
||||
|
||||
&:hover {
|
||||
background: var(--white);
|
||||
transform: scale(1);
|
||||
|
||||
.form-switch {
|
||||
opacity: 1 !important;
|
||||
pointer-events: all !important;
|
||||
}
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.form-switch {
|
||||
position: relative;
|
||||
top: -10px;
|
||||
inset-inline-start: -10px;
|
||||
display: block;
|
||||
transition: all 0.3s; // transition-all test
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
13. Background images
|
||||
========================================================================== */
|
||||
|
||||
.has-background-image {
|
||||
background-size: cover !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: center !important;
|
||||
background-color: rgb(0 0 0 / 10%);
|
||||
|
||||
&.is-top {
|
||||
background-position: top !important;
|
||||
}
|
||||
|
||||
&.is-bottom {
|
||||
background-position: bottom !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
14. Dark mode images
|
||||
========================================================================== */
|
||||
|
||||
.light-image {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.dark-image {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.light-image-block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.dark-image-block {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.is-dark {
|
||||
.light-image {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.dark-image {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.light-image-block {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.dark-image-block {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
15. Demo Spacer
|
||||
========================================================================== */
|
||||
|
||||
.demo-spacer {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.is-gap-0\.5 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.is-gap-1 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
16. RTL
|
||||
========================================================================== */
|
||||
|
||||
[dir='ltr'] {
|
||||
.rtl-hidden {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.ltr-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.rtl-hidden-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.ltr-hidden-flex {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] {
|
||||
.ltr-hidden {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.rtl-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ltr-hidden-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.rtl-hidden-flex {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.rtl-reflect {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
10
src/scss/layout/all.scss
Normal file
10
src/scss/layout/all.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
@import './animations';
|
||||
@import './dark';
|
||||
@import './helpers';
|
||||
@import './layout';
|
||||
@import './responsive';
|
||||
@import './right-panel';
|
||||
@import './transitions';
|
||||
@import './typography';
|
||||
@import './utilities';
|
||||
@import './custom';
|
||||
41
src/scss/main.scss
Normal file
41
src/scss/main.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
/*! main.scss | Vuero | Css ninja 2020-2024 */
|
||||
|
||||
/* ==========================================================================
|
||||
SCSS Imports
|
||||
========================================================================== */
|
||||
|
||||
@import './bulma-generated/generated-vars.sass';
|
||||
@import './abstracts/all';
|
||||
@import './css-variables/all';
|
||||
|
||||
// Here we import bulma-css-vars instead of bulma
|
||||
// because we want to use the variables defined in the file
|
||||
@import '../../node_modules/@cssninja/bulma-css-vars/bulma-cv-lib.sass';
|
||||
@import './layout/all';
|
||||
@import './components/cards';
|
||||
@import './components/content';
|
||||
@import './components/forms-general';
|
||||
@import './components/forms-checkboxes';
|
||||
@import './components/forms-slider';
|
||||
@import './components/forms-multiselect';
|
||||
@import './components/steps';
|
||||
@import './components/links';
|
||||
@import './components/lists';
|
||||
@import './components/nprogress';
|
||||
@import './components/datepicker';
|
||||
@import './components/divider';
|
||||
@import './components/charts';
|
||||
@import './components/toggles';
|
||||
@import './components/placeload';
|
||||
@import './components/popovers';
|
||||
@import './components/shiki';
|
||||
@import './components/stay-focus';
|
||||
@import './components/theme-switch';
|
||||
@import './components/table';
|
||||
@import './components/toasts';
|
||||
@import './components/toolbar';
|
||||
@import './components/tooltips';
|
||||
@import './components/ckeditor';
|
||||
@import './components/color-picker';
|
||||
@import './components/credit-card';
|
||||
@import './components/widgets';
|
||||
Reference in New Issue
Block a user