Initial
This commit is contained in:
303
resources/app/public/less2/blocks/basic.less
Normal file
303
resources/app/public/less2/blocks/basic.less
Normal file
@@ -0,0 +1,303 @@
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Flexbox */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
.flexrow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
> * { flex: 1; }
|
||||
}
|
||||
|
||||
.flexcol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
> * { flex: none }
|
||||
}
|
||||
|
||||
.flexrow, .flexcol {
|
||||
> .flex0 { flex: 0; }
|
||||
> .flex1 { flex: 1; }
|
||||
> .flex2 { flex: 2; }
|
||||
> .flex3 { flex: 3; }
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Global Classes */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
.disabled {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/** Scrollable Containers */
|
||||
.scrollable {
|
||||
--scroll-margin: 0.75rem;
|
||||
margin-right: calc(-1 * var(--scroll-margin)) !important;
|
||||
padding-right: var(--scroll-margin) !important;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Global Notifications */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
#notifications {
|
||||
--position-top: 2rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: var(--position-top);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
list-style: none;
|
||||
z-index: var(--z-index-notification);
|
||||
pointer-events: none;
|
||||
|
||||
.notification {
|
||||
position: relative;
|
||||
width: 95%;
|
||||
max-width: 1200px;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
// Single Notification
|
||||
.notification {
|
||||
background: rgb(0 0 0 / 50%);
|
||||
padding: 0.5rem 1rem;
|
||||
line-height: 1rem;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px black;
|
||||
color: var(--color-light-1);
|
||||
font-size: var(--font-size-14);
|
||||
filter: drop-shadow(0 0 2px black);
|
||||
|
||||
// Close Button
|
||||
.close {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
// Notification Icons
|
||||
&::before {
|
||||
font-family: var(--font-awesome);
|
||||
font-weight: 900;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background: var(--color-level-info-bg);
|
||||
border: 1px solid var(--color-level-info-border);
|
||||
&::before { content: "\f05a"; }
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: var(--color-level-warning-bg);
|
||||
border: 1px solid var(--color-level-warning-border);
|
||||
&::before { content: "\f071"; }
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: var(--color-level-error-bg);
|
||||
border: 1px solid var(--color-level-error-border);
|
||||
&::before { content: "\f06a"; }
|
||||
}
|
||||
|
||||
&.stable {
|
||||
background: rgba(138, 211, 4, 0.4);
|
||||
&::before { content: "\f6d9"; }
|
||||
}
|
||||
|
||||
&.testing {
|
||||
background: rgba(211, 192, 4, 0.4);
|
||||
&::before { content: "\f0ad"; }
|
||||
}
|
||||
|
||||
&.development {
|
||||
background: rgba(211, 119, 4, 0.4);
|
||||
&::before { content: "\f6e3"; }
|
||||
}
|
||||
|
||||
&.prototype {
|
||||
background: rgba(211, 20, 4, 0.4);
|
||||
&::before { content: "\f1e2"; }
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Tabbed Navigation */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
nav.tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--color-light-3);
|
||||
cursor: pointer;
|
||||
i {
|
||||
font-size: var(--font-size-24);
|
||||
}
|
||||
&.active {
|
||||
color: var(--color-light-1);
|
||||
text-shadow: 0 0 8px var(--color-warm-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab[data-tab] {
|
||||
&:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* Context Dropdown Menu
|
||||
/* ----------------------------------------- */
|
||||
|
||||
#context-menu {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
min-width: 150px;
|
||||
max-width: 360px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background: var(--color-cool-5);
|
||||
border: 1px solid var(--color-cool-3);
|
||||
border-radius: 5px;
|
||||
color: var(--color-text-light-1);
|
||||
z-index: calc(var(--z-index-app) + 1);
|
||||
|
||||
&.expand-down {
|
||||
top: calc(100% + 2px);
|
||||
}
|
||||
|
||||
&.expand-up {
|
||||
bottom: calc(100% + 2px);
|
||||
}
|
||||
|
||||
ol.context-items, li.context-group > ol {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li.context-group {
|
||||
border-bottom: 1px solid var(--color-cool-4);
|
||||
&:last-child { border: none; }
|
||||
}
|
||||
|
||||
li.context-item {
|
||||
border: 1px solid transparent;
|
||||
padding: 0.25rem 0.5rem;
|
||||
line-height: 32px;
|
||||
cursor: pointer;
|
||||
transition: 0.1s;
|
||||
> i {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
&:hover {
|
||||
border: 1px solid var(--color-cool-4);
|
||||
background: black;
|
||||
color: var(--color-light-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.window-app {
|
||||
#context-menu {
|
||||
z-index: calc(var(--z-index-window) + 1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* Dialog Windows
|
||||
/* ----------------------------------------- */
|
||||
|
||||
.dialog {
|
||||
.dialog-content {
|
||||
font-size: var(--font-size-14);
|
||||
}
|
||||
.dialog-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
button {
|
||||
flex: 2;
|
||||
height: 40px;
|
||||
&.default {
|
||||
flex: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------- */
|
||||
/* Global Tooltip */
|
||||
/* ---------------------------------------- */
|
||||
|
||||
#tooltip, .locked-tooltip {
|
||||
position: fixed;
|
||||
width: max-content;
|
||||
max-width: 320px;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--color-cool-5-90);
|
||||
font-family: var(--font-primary);
|
||||
font-size: var(--font-size-14);
|
||||
line-height: var(--font-size-16);
|
||||
color: var(--color-light-1);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 4px #000;
|
||||
z-index: var(--z-index-tooltip);
|
||||
pointer-events: none;
|
||||
overflow-wrap: break-word;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
&.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Transition visibility
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0s 500ms, opacity 500ms;
|
||||
&.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 500ms;
|
||||
}
|
||||
&.tour {
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
.locked-tooltip {
|
||||
pointer-events: all;
|
||||
border: 1px solid var(--color-warm-2);
|
||||
}
|
||||
10
resources/app/public/less2/blocks/dialog.less
Normal file
10
resources/app/public/less2/blocks/dialog.less
Normal file
@@ -0,0 +1,10 @@
|
||||
/* ---------------------------------- */
|
||||
/* Dialog V2 */
|
||||
/* ---------------------------------- */
|
||||
|
||||
.application.dialog {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
&:not([open]) { display: none; }
|
||||
.standard-form .form-footer { flex-wrap: nowrap; }
|
||||
}
|
||||
179
resources/app/public/less2/blocks/forms.less
Normal file
179
resources/app/public/less2/blocks/forms.less
Normal file
@@ -0,0 +1,179 @@
|
||||
.standard-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: 1rem;
|
||||
|
||||
/** Tabs */
|
||||
.tab {
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: 1rem;
|
||||
&.active {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/** Fieldsets */
|
||||
fieldset {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: 1rem;
|
||||
border-color: var(--color-fieldset-border);
|
||||
border-radius: 8px;
|
||||
legend {
|
||||
font-size: var(--font-size-15);
|
||||
font-weight: bold;
|
||||
}
|
||||
&:disabled {
|
||||
.form-group {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
fieldset.input-grid {
|
||||
--grid-cols: 2;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--grid-cols), 1fr);
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
/** Buttons */
|
||||
button {
|
||||
height: var(--input-height);
|
||||
}
|
||||
|
||||
/* Icon Inputs */
|
||||
label.icon:has(> input) {
|
||||
background: var(--input-background-color);
|
||||
border: 1px solid var(--input-border-color);
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .25rem;
|
||||
padding: .125rem .5rem;
|
||||
|
||||
&:has(> input:disabled) { border: none; }
|
||||
&:focus-within { outline: 2px solid var(--input-focus-outline-color); }
|
||||
|
||||
> input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
width: unset;
|
||||
padding: 0;
|
||||
background: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
> i { flex: none; }
|
||||
}
|
||||
|
||||
/** Form Groups */
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
gap: 0.5rem;
|
||||
|
||||
// Flex form inputs
|
||||
> * {
|
||||
flex: 2;
|
||||
}
|
||||
> input[type=checkbox] {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
// Labels
|
||||
> label {
|
||||
flex: 1;
|
||||
color: var(--color-form-label);
|
||||
font-weight: bold;
|
||||
line-height: var(--input-height);
|
||||
> i {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
> input {
|
||||
font-weight: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon-Only Labels
|
||||
> label.icon {
|
||||
flex: 0 0 1rem;
|
||||
> i {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Stacked form groups, label is on its own line
|
||||
&.stacked {
|
||||
> * {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Form group hover behavior
|
||||
&:hover {
|
||||
> label {
|
||||
color: var(--color-form-label-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-fields {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
> input[type="checkbox"],
|
||||
> label {
|
||||
flex: none;
|
||||
}
|
||||
&.flexcol {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/** Hint Text */
|
||||
.hint {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-14);
|
||||
color: var(--color-form-hint);
|
||||
}
|
||||
.form-group .hint {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
.form-group:hover .hint {
|
||||
color: var(--color-form-hint-hover);
|
||||
}
|
||||
|
||||
/** Form Footers */
|
||||
.form-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
> button,
|
||||
a.button {
|
||||
flex: 1;
|
||||
height: calc(1.25 * var(--input-height));
|
||||
min-width: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user