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

filters and sidebar

Browse Source
This commit is contained in:
Alex Lingris
2024-08-15 14:44:53 +03:00
parent 1f3ebafe69
commit f9806f60c9
32 changed files with 584 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/sass/_button.scss
+20
View File
@@ -0,0 +1,20 @@
.button{
border-radius: 12px;
background: var(--background);
padding: 3px 10px;
cursor: pointer;
filter: brightness(97%);
border: none;
font-size: 14px;
&:focus {
filter: brightness(94%);
}
&:hover {
filter: brightness(94%);
}
&.active {
filter: brightness(74%);
}
}
front/sass/_dropdown.scss
+60
View File
@@ -0,0 +1,60 @@
.dropdown {
position: relative;
}
.dropdown-button > div {
display: flex;
align-items: center;
gap: 3px;
}
.dropdown-menu {
display: flex;
flex-direction: column;
padding: 10px;
overflow: visible;
position: absolute;
border-radius: 12px;
z-index: 9;
background: var(--background);
filter: brightness(97%);
transition: 600ms;
flex-grow: 1;
&.orientation-right {
right: 0;
}
&.orientation-left {
left: 0;
}
min-width: max-content;
}
.dropdown-header, .dropdown-item {
display: flex;
align-items: center;
gap: 3px;
text-wrap: nowrap;
}
.dropdown-header {
padding: 10px;
}
.dropdown-item {
font-size: 14px;
padding: 3px 10px;
&:hover{
background: var(--background);
filter: brightness(97%);
border-radius: 12px;
}
.button-icon {
flex-shrink: 0;
}
}
front/sass/_form.scss
+1 -1
View File
@@ -12,7 +12,7 @@ input{
}
input,textarea{
background: var(--input-bg);
border: 1px solid $border-color;
border: 1px solid var(--border-color);
border-radius: 5px;
padding: 5px 7px;
font-size: 16px;
front/sass/_helpers.scss
+4 -1
View File
@@ -29,7 +29,10 @@
.gap-5{gap: 20px}
.hide{
display: none;
display: none!important;
}
.hidden{
visibility: hidden;
}
.d-block{
front/sass/_layout.scss
+3 -1
View File
@@ -1,4 +1,6 @@
.sidebar {
.sidebar-content{
min-width: 300px;
max-width: 400px;
}
.main-content {
front/sass/_notice.scss
+7 -7
View File
@@ -1,21 +1,21 @@
.notice {
background-color: $background;
background-color: var(--background);
padding: 25px 14px 14px;
margin: 2rem 0;
filter: brightness(1.03);
position: relative;
font-size: 16px;
line-height: 24px;
border: 3px solid $border-color;
border: 3px solid var(--border-color);
}
.notice .title {
content: "NOTE";
position: absolute;
background: $background;
background: var(--background);
min-width: 90px;
border: 3px solid $border-color;
color: $text;
border: 3px solid var(--border-color);
color: var(--text);
display: block;
text-align: center;
left: 14px;
@@ -25,8 +25,8 @@
}
.notice.success{
border-color: $success;
border-color: var(--success);
& .title{
border-color: $success;
border-color: var(--success);
}
}
front/sass/_sidebar.scss
+57 -17
View File
@@ -1,49 +1,89 @@
.sidebar-top{
font-size: 18px;
padding: 20px 20px ;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--background);
filter: brightness(97%);
margin-bottom: 15px;
border-radius: 12px;
}
.sidebar {
border: 1px solid $border-color;
border: 0px solid var(--border-color);
border-radius: 12px;
min-height: 100vh;
font-size: 15px;
line-height: 28px;
min-width: 300px;
max-width: 400px;
background: $background;
filter: brightness(104%);
padding: 20px;
background: var(--background);
filter: brightness(97%);
display: flex;
flex-direction: column;
gap: 3px;
}
.sidebar-header {
background: $background;
display: flex;
cursor: pointer;
justify-content: space-between;
align-items: center;
background: var(--background);
font-size: 16px;
padding: 12px 12px 6px;
color: $text;
padding: 3px 12px 6px;
color: var(--text);
filter: brightness(94%);
border-bottom: 0px solid var(--border-color);
border-radius: 12px;
&:hover {
background: var(--secondary);
}
&:first-child {
}
&:last-child {
border-bottom: none;
border-radius: 12px 12px 0 0;
}
}
.sidebar-item {
color: $text;
color: var(--text);
display: block;
font-size: 14px;
padding: 6px 12px;
padding: 3px 12px;
text-decoration: none;
border-bottom: 1px solid $border-color;
border-bottom: 0px solid var(--border-color);
transition: 600ms;
border-radius: 12px;
&:last-child {
border-bottom: none;
border-radius: 0 0 12px 12px;
}
&:hover {
background: $secondary;
background: var(--secondary);
}
&.active {
background: $secondary;
background: var(--secondary);
}
}
.top-nav{
display: flex;
justify-content: end;
align-items: center;
gap: 10px;
}
.top-nav-item{
border-radius: 12px;
font-size: 14px;
filter: brightness(97%);
background: var(--background);
padding: 3px 10px ;
&:hover {
background: var(--secondary);
}
}
front/sass/_table.scss
+22 -5
View File
@@ -1,8 +1,12 @@
.lx-table {
.table {
min-width: 600px;
overflow: auto;
border-radius: 12px;
padding: 20px;
background: var(--background);
filter: brightness(97%);
table {
min-width: 600px;
width: 100%;
}
th {
@@ -13,7 +17,6 @@
// height: 34px;
padding: 8px 16px;
// border-bottom: 1px solid #ccc;
background: #eee;
&.is-sort {
background-color: rgba($primary, 0.1);
}
@@ -26,20 +29,34 @@
max-width: 400px;
height: 48px;
padding: 4px 16px;
overflow: hidden;
&.is-sort {
background-color: rgba($primary, 0.1);
}
img{
width: 48px;
}
.status{
color:var(--accent);
font-size: 80%;
}
.row-name{
display: flex;
align-items: center;
gap: 6px;
}
}
tr {
background-color: #fff;
&:hover {
box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.1);
}
}
tr:nth-child(odd) {
background-color: #f9f9f9;
//background-color: #f9f9f9;
}
td:nth-child(odd) {
front/sass/_toolbar.scss
+9
View File
@@ -0,0 +1,9 @@
.toolbar{
display: flex;
align-items: center;
gap: 5px;
justify-content: space-between;
}
.toolbar-filters{ display: flex;
align-items: center;
gap: 5px;}
front/sass/_wrappers.scss
+5 -2
View File
@@ -116,10 +116,13 @@
}
.header-normal {
text-align: center;
text-align: left;
font-weight: 400;
font-size: 20px;
}
.header-small {
text-align: left;
font-size: 26px;
font-weight: 400;
font-size: 20px;
}
front/sass/app.scss
+29 -22
View File
@@ -90,9 +90,7 @@ $success: #80c671;
$background: #f4f6fa;
$table-striped-bg-factor: 0.03;
$dropdown-bg: rgb(206, 223, 210);
$border-color: #000;
$text: #04060b;
$accent: #80c671;
//https://www.realtimecolors.com/?colors=04060b-f4f6fa-5b86be-d9cca1-80c671&fonts=Anek Telugu-Anek Telugu
$themes: (
@@ -111,7 +109,25 @@ $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: #000;
--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;
}
//@import "../node_modules/bootstrap/scss/bootstrap";
@@ -130,25 +146,17 @@ $themes: (
@import "./card";
@import "./files";
@import "./revisions";
@import "./toolbar";
@import "./dropdown";
@import "./button";
: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: $border-color;
--main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
--main-font-color: #444;
--input-bg: rgb(245,245,249);
}
body {
background-color: $background;
background-color: var(--background);
font-family: var(--main-font), sans-serif;
}
.btn-spinner .spinner-border {
@@ -168,9 +176,8 @@ body {
border-color: transparent;
}
.dropdown-menu {
border: 0;
border-radius: 15px;
box-shadow: 0 0 4px #ccc;
padding: 30px 15px;
}
a{
color: var(--text);
text-decoration: none;
}