lucent/lucent-laravel
2
0
Fork 0
Code Issues 14 Pull Requests Releases 1 Activity

fixed zindex thing - brightness was the problem

Browse Source
This commit is contained in:
Alex Lingris
2024-08-16 21:11:01 +03:00
parent 5a13ddb2ec
commit db37653748
26 changed files with 466 additions and 670 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/sass/_autocomplete.scss
+47
View File
@@ -0,0 +1,47 @@
.autocomplete {
position: relative;
z-index: 1000;
overflow: visible;
.autocomplete-option {
cursor: pointer;
}
&:focus-within {
.autocomplete-results{
display: flex;
}
}
}
.autocomplete-selected-value {
font-size: 13px;
margin-top: 10px;
border-radius: 12px;
background: var(--background);
filter: brightness(97%);
padding: 3px 10px;
display: inline-flex;
justify-content: center;
gap: 4px;
line-height: 22px;
}
.autocomplete-selected-value:hover {
opacity: .8;
background-color: #eee;
}
.autocomplete-results {
display: none;
flex-direction: column;
padding: 10px;
overflow: visible;
position: absolute;
border-radius: 12px;
z-index: 20;
background: var(--background);
filter: brightness(97%);
transition: 600ms;
flex-grow: 1;
top: 45px;
min-width: max-content;
}
front/sass/_button.scss
+2 -3
View File
@@ -1,10 +1,9 @@
.button{
border-radius: 12px;
background: var(--background);
background: var(--background-button);
padding: 3px 10px;
cursor: pointer;
filter: brightness(97%);
border: none;
border: 1px solid var(--border-color);
font-size: 14px;
min-height: 27px;
display: flex;
front/sass/_dialog.scss
+1 -1
View File
@@ -22,7 +22,7 @@ dialog {
overflow: auto;
max-height: 96vh;
//position: relative;
z-index: 2;
.close {
position: absolute;
top: 10px;
front/sass/_form.scss
+2 -2
View File
@@ -5,11 +5,11 @@ label {
margin-bottom: 4px;
}
input[type=text]{
input[type=text],input[type=number],input[type=search],textarea{
width: 100%;
}
input[type=text],textarea{
input[type=text],input[type=number],input[type=search],textarea{
background: var(--input-bg);
border: 1px solid var(--border-color);
border-radius: 5px;
front/sass/_layout.scss
+3 -1
View File
@@ -1,11 +1,12 @@
.sidebar-content{
min-width: 300px;
max-width: 400px;
position: relative;
}
.main-content {
width: 100%;
position: relative;
}
@@ -13,4 +14,5 @@
display: flex;
gap: 40px;
padding: 20px;
position: relative;
}
front/sass/_preview.scss
+3 -3
View File
@@ -3,7 +3,7 @@
align-items: center;
justify-content: space-between;
gap: 10px;
background: var(--background);
background: var(--background-2);
border-radius: 12px;
.image{
@@ -18,14 +18,14 @@
}
&:hover{
filter: brightness(95%);
background: var(--background-3);
.trash-action{
display: block;
}
}
}
.preview-reference{
filter: brightness(97%);
background: var(--background-2);
padding: 10px 20px;
margin-bottom: 4px;
}
front/sass/_record-edit.scss
+38 -12
View File
@@ -1,7 +1,7 @@
.record-edit {
position: relative;
.invalid-feedback{
.invalid-feedback {
color: var(--error);
font-size: 15px;
line-height: 20px;
@@ -38,43 +38,69 @@
}
.editor-field {
background: var(--background);
filter: brightness(97%);
background: var(--background-stack);
padding: 18px;
position: relative;
border-radius: 12px;
margin: 6px 0;
border-color: transparent;
}
.field-header{
.field-header {
margin-bottom: 4px;
.labels{
position: relative;
.labels {
display: flex;
justify-content: space-between;
align-items: center;
}
.label-and-help{
.label-and-help {
display: flex;
align-items: center;
gap: 6px;
}
label{font-size: 14px;line-height: 14px;margin: 0;font-weight: 700;}
.help-text{font-size: 14px;opacity: .7;line-height: 14px}
code{}
label {
font-size: 14px;
line-height: 14px;
margin: 0;
font-weight: 700;
}
.help-text {
font-size: 14px;
opacity: .7;
line-height: 14px
}
code {
}
}
.field-checkbox{
.system-help-text {
font-size: 14px;
opacity: .7;
line-height: 14px;
margin-top: 10px;
}
.field-checkbox {
display: flex;
gap: 20px;
align-items: center;
.form-check-inline{
.form-check-inline {
display: flex;
align-items: center;
gap: 4px;
}
.form-check-label{
.form-check-label {
font-size: 14px;
line-height: 14px;
}
front/sass/_reference-tags.scss
+46
View File
@@ -0,0 +1,46 @@
.reference-tags {
position: relative;
z-index: 20;
.reference-tags-option {
cursor: pointer;
}
&:focus-within {
.reference-tags-results{
display: flex;
}
}
}
.reference-tags-selected-value {
font-size: 13px;
margin-top: 10px;
border-radius: 12px;
background: var(--background);
filter: brightness(97%);
padding: 3px 10px;
display: inline-flex;
justify-content: center;
gap: 4px;
line-height: 22px;
}
.reference-tags-selected-value:hover {
opacity: .8;
background-color: #eee;
}
.reference-tags-results {
display: none;
flex-direction: column;
padding: 10px;
overflow: visible;
position: absolute;
border-radius: 12px;
z-index: 20;
background: var(--background);
filter: brightness(97%);
transition: 600ms;
flex-grow: 1;
top: 45px;
min-width: max-content;
}
front/sass/app.scss
+107 -94
View File
@@ -13,81 +13,82 @@ $danger: red;
/* SCSS Gradient */
$gradient-top: linear-gradient(
0deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
0deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$gradient-right: linear-gradient(
90deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
90deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$gradient-bottom: linear-gradient(
180deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
180deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$gradient-left: linear-gradient(
270deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
270deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$gradient-top-right: linear-gradient(
45deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
45deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$gradient-bottom-right: linear-gradient(
135deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
135deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$gradient-top-left: linear-gradient(
225deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
225deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$gradient-bottom-left: linear-gradient(
315deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
315deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$gradient-radial: radial-gradient(
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$primary: #5b86be;
$secondary: #d9cca1;
$success: #80c671;
$background: #f4f6fa;
$table-striped-bg-factor: 0.03;
$dropdown-bg: rgb(206, 223, 210);
@@ -109,24 +110,28 @@ $themes: (
accent: #488e39,
),
);
:root{
--linearPrimarySecondary: linear-gradient(#5b86be, #d9cca1);
--linearPrimaryAccent: linear-gradient(#5b86be, #80c671);
--linearSecondaryAccent: linear-gradient(#d9cca1, #80c671);
--radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1);
--radialPrimaryAccent: radial-gradient(#5b86be, #80c671);
--radialSecondaryAccent: radial-gradient(#d9cca1, #80c671);
--border-color: #ccc;
--main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
--main-font-color: #444;
--input-bg: rgb(245,245,249);
--text: #010b05;
--background: #f7fefa;
--primary: #1ce776;
--secondary: #7bc8f1;
--accent: #5086ed;
--success: #80c671;
--error: red;
:root {
--linearPrimarySecondary: linear-gradient(#5b86be, #d9cca1);
--linearPrimaryAccent: linear-gradient(#5b86be, #80c671);
--linearSecondaryAccent: linear-gradient(#d9cca1, #80c671);
--radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1);
--radialPrimaryAccent: radial-gradient(#5b86be, #80c671);
--radialSecondaryAccent: radial-gradient(#d9cca1, #80c671);
--border-color: #cecece;
--main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
--main-font-color: #444;
--input-bg: rgb(245, 245, 249);
--text: #010b05;
--background: #f7fefa;
--background-stack: #f0f6f3;
--background-2: #E8EBEAFF;
--background-3: #C2C7C5FF;
--background-button: #ddd;
--primary: #1ce776;
--secondary: #7bc8f1;
--accent: #5086ed;
--success: #80c671;
--error: red;
}
@@ -154,45 +159,53 @@ $themes: (
@import "./switch";
@import "./preview";
@import "./dialog";
@import "./autocomplete";
@import "./reference-tags";
body {
background-color: var(--background);
font-family: var(--main-font), sans-serif;
background-color: var(--background);
font-family: var(--main-font), sans-serif;
}
.btn-spinner .spinner-border {
display: none;
display: none;
}
.btn-spinner.spinner-on .spinner-border {
display: inline-block;
display: inline-block;
}
.cursor-pointer {
cursor: pointer;
cursor: pointer;
}
a{
color: var(--text);
text-decoration: none;
a {
color: var(--text);
text-decoration: none;
}
.spinner-border {
width: 9px;
height: 9px;
border: 2px solid #FFF;
border-bottom-color: #FF3D00;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
width: 9px;
height: 9px;
border: 2px solid #FFF;
border-bottom-color: #FF3D00;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.lucent-component {
position: relative;
}