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

content and edit record

Browse Source
This commit is contained in:
Alex Lingris
2024-08-15 18:52:53 +03:00
parent f9806f60c9
commit 113533408d
38 changed files with 577 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/sass/_button.scss
+4 -1
View File
@@ -6,7 +6,10 @@
filter: brightness(97%);
border: none;
font-size: 14px;
min-height: 27px;
display: flex;
align-items: center;
gap: 4px;
&:focus {
filter: brightness(94%);
}
front/sass/_card.scss
-5
View File
@@ -1,5 +0,0 @@
.lx-card {
padding: 44px;
background-color: #fff;
border-radius: 32px;
}
front/sass/_checkbox.scss
+104
View File
@@ -0,0 +1,104 @@
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
.checkbox-wrapper input[type=checkbox] {
--active-inner: #fff;
--focus: 2px rgba(39, 94, 254, .3);
--border-hover: #275EFE;
--disabled: #F6F8FF;
--disabled-inner: #E1E6F9;
-webkit-appearance: none;
-moz-appearance: none;
height: 21px;
outline: none;
display: inline-block;
vertical-align: top;
position: relative;
margin: 0;
cursor: pointer;
border: 1px solid var(--bc, var(--border-color));
background: var(--b, var(--background));
transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}
.checkbox-wrapper input[type=checkbox]:after {
content: "";
display: block;
left: 0;
top: 0;
position: absolute;
transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
}
.checkbox-wrapper input[type=checkbox]:checked {
--b: var(--secondary);
--bc: var(--secondary);
--d-o: .3s;
--d-t: .6s;
--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
}
.checkbox-wrapper input[type=checkbox]:disabled {
--b: var(--disabled);
cursor: not-allowed;
opacity: 0.9;
}
.checkbox-wrapper input[type=checkbox]:disabled:checked {
--b: var(--disabled-inner);
--bc: var(--border-color);
}
.checkbox-wrapper input[type=checkbox]:disabled + label {
cursor: not-allowed;
}
.checkbox-wrapper input[type=checkbox]:hover:not(:checked):not(:disabled) {
--bc: var(--border-hover);
}
.checkbox-wrapper input[type=checkbox]:focus {
box-shadow: 0 0 0 var(--focus);
}
.checkbox-wrapper input[type=checkbox]:not(.switch) {
width: 21px;
}
.checkbox-wrapper input[type=checkbox]:not(.switch):after {
opacity: var(--o, 0);
}
.checkbox-wrapper input[type=checkbox]:not(.switch):checked {
--o: 1;
}
.checkbox-wrapper input[type=checkbox] + label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
margin-left: 4px;
}
.checkbox-wrapper input[type=checkbox]:not(.switch) {
border-radius: 7px;
}
.checkbox-wrapper input[type=checkbox]:not(.switch):after {
width: 5px;
height: 9px;
border: 2px solid var(--active-inner);
border-top: 0;
border-left: 0;
left: 7px;
top: 4px;
transform: rotate(var(--r, 20deg));
}
.checkbox-wrapper input[type=checkbox]:not(.switch):checked {
--r: 43deg;
}
}
.checkbox-wrapper * {
box-sizing: inherit;
}
.checkbox-wrapper *:before,
.checkbox-wrapper *:after {
box-sizing: inherit;
}
.checkbox-wrapper input[type=checkbox]:indeterminate {
--b: var(--secondary);
--bc: var(--secondary);
--d-o: .3s;
--d-t: .6s;
--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
}
front/sass/_dropdown.scss
+1
View File
@@ -20,6 +20,7 @@
filter: brightness(97%);
transition: 600ms;
flex-grow: 1;
top: 35px;
&.orientation-right {
right: 0;
front/sass/_files.scss
-3
View File
@@ -1,3 +0,0 @@
.file-wrapper.selected {
box-shadow: inset 0px 0px 0px 2px $primary;
}
front/sass/_form.scss
+4 -5
View File
@@ -5,12 +5,11 @@ label {
margin-bottom: 4px;
}
input{
input[type=text]{
width: 100%;
}
input,textarea{
input[type=text],textarea{
background: var(--input-bg);
border: 1px solid var(--border-color);
border-radius: 5px;
@@ -18,7 +17,7 @@ input,textarea{
font-size: 16px;
filter: brightness(95%);
}
input:focus,textarea:focus{
input[type=text]:focus,textarea:focus{
filter: brightness(101%);
}
front/sass/_pagination.scss
+27
View File
@@ -0,0 +1,27 @@
.pagination {
margin: 20px auto 10px ;
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
padding: 0;
li {
font-size: 14px;
border-radius: 12px;
padding: 4px 18px;
background: var(--background);
list-style: none;
filter: brightness(90%);
&.disabled {
pointer-events: none;
opacity: .7;
}
&.active {
background: var(--secondary);
}
}
}
front/sass/_record-edit.scss
+68
View File
@@ -0,0 +1,68 @@
.record-edit {
}
.record-header {
margin: 10px 0 0;
.schema-name {
font-size: 14px;
}
.record-title {
font-size: 18px;
display: block;
}
}
.tools-header {
margin: 30px 0 0;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.editor-field {
background: var(--background);
filter: brightness(98%);
padding: 18px;
border-radius: 12px;
margin: 6px 0;
border-color: transparent;
}
.field-header{
margin-bottom: 4px;
.labels{
display: flex;
justify-content: space-between;
align-items: center;
}
.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{}
}
.field-checkbox{
display: flex;
gap: 20px;
align-items: center;
.form-check-inline{
display: flex;
align-items: center;
gap: 4px;
}
.form-check-label{
font-size: 14px;
line-height: 14px;
}
}
front/sass/_revisions.scss
-3
View File
@@ -1,3 +0,0 @@
.text-danger.field-content .preview-file-filename{
color: $danger;
}
front/sass/_sidebar.scss
+1
View File
@@ -36,6 +36,7 @@
filter: brightness(94%);
border-bottom: 0px solid var(--border-color);
border-radius: 12px;
&:hover {
background: var(--secondary);
}
front/sass/_switch.scss
+34
View File
@@ -0,0 +1,34 @@
input.switch {
-webkit-appearance: none;
width: 34px;
height: 18px;
border: 2px solid var(--border-color);
position: relative;
border-radius: 50px;
box-sizing: content-box;
cursor: pointer;
transition: background 150ms ease-in-out;
background: white;
}
input.switch::after {
top: 2px;
left: 2px;
transition: left 150ms ease-in-out;
content: " ";
width: 14px;
height: 14px;
background: var(--border-color);
box-shadow: inset 0 0 0px 1px var(--border-color);
position: absolute;
border-radius: 50px;
}
input.switch:checked {
background: var(--secondary);
}
input.switch:checked::after {
left: calc(100% - 17px);
background: var(--background);
}
front/sass/_table.scss
+20 -10
View File
@@ -5,25 +5,26 @@
padding: 20px;
background: var(--background);
filter: brightness(97%);
font-size: 14px;
table {
width: 100%;
}
th {
font-size: 15px;
font-size: 14px;
font-weight: normal;
white-space: nowrap;
max-width: 400px;
// height: 34px;
text-align: left;
padding: 8px 16px;
// border-bottom: 1px solid #ccc;
background: var(--background);
filter: brightness(90%);
&.is-sort {
background-color: rgba($primary, 0.1);
font-weight: 700;
}
}
td {
font-size: 15px;
font-weight: normal;
white-space: nowrap;
max-width: 400px;
@@ -31,9 +32,7 @@
padding: 4px 16px;
overflow: hidden;
&.is-sort {
background-color: rgba($primary, 0.1);
}
img{
width: 48px;
@@ -48,8 +47,20 @@
align-items: center;
gap: 6px;
}
.title-td-contents{
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
line-height: 14px;
}
}
tr {
background: var(--background);
&:has(input:checked){
filter: brightness(90%);
}
&:hover {
box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.1);
}
@@ -64,8 +75,7 @@
// border-right: 1px solid #e4e4e4;
}
th:nth-child(odd) {
border-left: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
}
.field-ui-number {
front/sass/_tabs.scss
+11
View File
@@ -0,0 +1,11 @@
.tabs{
padding: 0;
margin: 20px 0 20px;
display: flex;
gap: 4px;
.tab{
list-style: none;
}
}
front/sass/_toolbar.scss
+11
View File
@@ -3,6 +3,17 @@
align-items: center;
gap: 5px;
justify-content: space-between;
input.search{
border-radius: 12px;
background: var(--background);
padding: 3px 10px;
cursor: pointer;
filter: brightness(97%);
border: none;
font-size: 14px;
}
}
.toolbar-filters{ display: flex;
align-items: center;
front/sass/_typography.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.content{
.content {
font-size: 16px;
line-height: 20px;
p{
front/sass/app.scss
+26 -14
View File
@@ -116,7 +116,7 @@ $themes: (
--radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1);
--radialPrimaryAccent: radial-gradient(#5b86be, #80c671);
--radialSecondaryAccent: radial-gradient(#d9cca1, #80c671);
--border-color: #000;
--border-color: #ccc;
--main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
--main-font-color: #444;
--input-bg: rgb(245,245,249);
@@ -143,16 +143,14 @@ $themes: (
@import "./codemirror";
@import "./layout";
@import "./wrappers";
@import "./card";
@import "./files";
@import "./revisions";
@import "./toolbar";
@import "./dropdown";
@import "./button";
@import "./checkbox";
@import "./pagination";
@import "./record-edit";
@import "./tabs";
@import "./switch";
body {
background-color: var(--background);
@@ -170,14 +168,28 @@ body {
cursor: pointer;
}
.editor-field {
padding: 22px 44px;
margin: 6px 0;
border-color: transparent;
}
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;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}