ducdt/admin_hura
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

08/01/2024

Browse Source
This commit is contained in:
Tieptk
2024-01-08 09:26:16 +07:00
parent 0c240b45ea
commit b2469a9235
7 changed files with 3148 additions and 1181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
scss/pc_style.scss
View File

@@ -1,43 +1,112 @@
*, ::after, ::before {box-sizing: border-box;}
button,input,select{outline:none!important;color:#000;border-radius:0}
button, input {overflow: visible;}
button, input, optgroup, select, textarea {margin: 0;font-family: inherit;font-size: inherit;line-height: inherit;border-radius: 0;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;}
input[type=number] {-moz-appearance: textfield;}
body{
color:#000;
font-family: 'Inter', sans-serif;
background: #FAFAFB;
*,
::after,
::before {
box-sizing: border-box;
}
button,
input,
select {
outline: none !important;
color: #000;
border-radius: 0;
}
button,
input {
overflow: visible;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
border-radius: 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
body {
color: #000;
font-family: "Inter", sans-serif;
background: #fafafb;
position: relative;
font-size: 14px;
font-size: 14px;
word-break: break-word;
counter-reset: section;
font-weight: 400;
line-height: 1.5;
margin: auto;
}
img{
img {
max-width: 100%;
height: auto;
}
a{
a {
text-decoration: none;
}
::-webkit-scrollbar-track{background:#f5f5f5;}
::-webkit-scrollbar-thumb{background: grey;border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:#ccc;}
::-webkit-scrollbar{width: 8px;height:10px;}
.clearfix{
&::after{
content:'';clear:both;display:block
::-webkit-scrollbar-track {
background: #f5f5f5;
}
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #ccc;
}
::-webkit-scrollbar {
width: 8px;
height: 10px;
}
.clearfix {
&::after {
content: "";
clear: both;
display: block;
}
}
.inherit{font-size: inherit;font-weight: inherit;line-height: inherit;margin: 0;}
.line-clamp-2{text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-4{text-overflow:ellipsis;-webkit-line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-5{text-overflow:ellipsis;-webkit-line-clamp:5;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.icons{
.inherit {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
margin: 0;
}
.line-clamp-2 {
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
text-overflow: ellipsis;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-4 {
text-overflow: ellipsis;
-webkit-line-clamp: 4;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-5 {
text-overflow: ellipsis;
-webkit-line-clamp: 5;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.icons {
background: url(../images/global-sprite.png) no-repeat;
background-size: 400px 400px;
}
@@ -49,37 +118,37 @@ a{
.admin-menu-container {
position: relative;
overflow: auto;
background: #004E99;
color: #fff;
width: 16%;
background: #004e99;
color: #fff;
width: 16%;
padding: 20px 0;
line-height: 20px;
a{
a {
color: #fff;
}
.menu-logo{
.menu-logo {
display: table;
margin-bottom: 50px;
margin-left: 16px;
img{
img {
height: 22px;
}
}
.menu-list{
.menu-list {
margin: 50px 0;
}
details{
details {
&[open] {
svg {
transform: rotate(90deg);
}
summary {
background: #81B5E4;
a{
background: #81b5e4;
a {
font-weight: 700;
}
}
.icons{
.icons {
filter: brightness(100);
}
}
@@ -88,12 +157,12 @@ a{
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding-right: 16px;
border-radius: 4px;
cursor: pointer;
padding-right: 16px;
border-radius: 4px;
position: relative;
transition: .3s all;
a{
transition: 0.3s all;
a {
padding: 8px 16px;
display: flex;
align-items: center;
@@ -102,18 +171,18 @@ a{
svg {
position: absolute;
right: 16px;
transition: .3s all;
transition: 0.3s all;
}
.item {
display: flex;
align-items: center;
padding: 0 16px;
line-height: 36px;
transition: .3s all;
transition: 0.3s all;
border-radius: 4px;
&:hover{
background: #81B5E4;
.icons{
&:hover {
background: #81b5e4;
.icons {
filter: brightness(100);
}
}
@@ -124,38 +193,38 @@ a{
.sub-menu {
padding: 13px 13px 13px 45px;
position: relative;
&::before{
&::before {
content: "";
width: 1px;
height: calc(100% - 39px);
background: #79B0E2;
background: #79b0e2;
position: absolute;
left: 20px;
top: 20px;
top: 20px;
}
a{
a {
display: block;
margin-bottom: 15px;
position: relative;
&:hover{
&:hover {
text-decoration: underline;
}
&::before{
&::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #79B0E2;
background: #79b0e2;
position: absolute;
top: 6px;
left: -28px;
}
&:last-child{
&:last-child {
margin: 0;
}
}
}
.icons{
.icons {
width: 20px;
height: 20px;
margin-right: 13px;
@@ -203,11 +272,11 @@ a{
.item {
display: flex;
align-items: center;
transition: .3s all;
transition: 0.3s all;
position: relative;
&:hover{
background: #81B5E4;
.icons{
&:hover {
background: #81b5e4;
.icons {
filter: brightness(100);
}
.sub-menu {
@@ -220,37 +289,37 @@ a{
.sub-menu {
padding: 10px 22px 10px 15px;
border-radius: 6px;
background: #004E99;
background: #004e99;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
white-space: nowrap;
min-width: 150px;
z-index: -1;
transition: .2s all;
transition: 0.2s all;
position: absolute;
left: calc(100% + 30px);
top: 0;
opacity: 0;
visibility: hidden;
visibility: hidden;
min-width: 200px;
a{
a {
display: block;
margin-bottom: 12px;
line-height: 18px;
position: relative;
&:hover{
&:hover {
text-decoration: underline;
}
&::before{
&::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #79B0E2;
background: #79b0e2;
position: absolute;
top: 6px;
left: -18px;
}
&:last-child{
&:last-child {
margin: 0;
}
}
@@ -259,17 +328,17 @@ a{
padding-left: 16px;
margin-top: 10px;
position: relative;
&::before{
&::before {
content: "";
width: 1.5px;
background: #79B0E2;
background: #79b0e2;
position: absolute;
left: 1px;
top: 7px;
bottom: 7px;
}
}
.icons{
.icons {
width: 50px;
height: 40px;
}
@@ -311,22 +380,22 @@ a{
background-position: 6px -34px;
}
}
.admin-content-container{
.note-list{
.admin-content-container {
.note-list {
min-width: 144px;
a{
a {
display: block;
padding: 0 10px;
line-height: 35px;
transition: .2s all;
transition: 0.2s all;
&:hover {
background: #F5F7FF;
color: #0041E8;
background: #f5f7ff;
color: #0041e8;
font-weight: 600;
}
}
}
.content-holder{
.content-holder {
padding: 16px 0 16px 16px;
}
}
@@ -334,40 +403,42 @@ a{
text-align: center;
td {
padding: 13px 8px;
border: 1px solid #ECECEC;
border: 1px solid #ececec;
}
tbody {
td{
padding: 5px 8px;
&:nth-child(2), &:nth-child(3){
td {
padding: 5px 8px;
&:nth-child(2),
&:nth-child(3) {
text-align: left;
}
&:nth-child(2){
color: #0041E8;
&:nth-child(2) {
color: #0041e8;
}
}
}
}
.admin-home-tab{
.admin-home-tab {
overflow: auto;
a{
color: #A0A8B5;
a {
color: #a0a8b5;
padding: 9px 7.7px;
text-align: center;
border-right: 1px solid #DDE1EB;
border-right: 1px solid #dde1eb;
white-space: nowrap;
&:last-child{
&:last-child {
border: 0;
}
&:hover,&.current{
background: #0041E8;
&:hover,
&.current {
background: #0041e8;
color: #fff;
}
}
}
.home-report-holder {
display: none;
table{
table {
width: 100%;
line-height: 20px;
text-align: center;
@@ -376,26 +447,79 @@ a{
background: #f6f6f6;
font-weight: 500;
}
td{
border: 1px solid #ECECEC;
td {
border: 1px solid #ececec;
padding: 14px 5px;
a{
a {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&:nth-child(2){
&:nth-child(2) {
text-align: left;
}
}
}
.home-todo-list{
td{
.home-todo-list {
td {
padding: 0 4px;
color: #000 !important;
&:nth-child(1), &:nth-child(3), &:nth-child(4){
&:nth-child(1),
&:nth-child(3),
&:nth-child(4) {
white-space: nowrap;
}
}
}
}
.product-list {
th {
padding: 10px;
border: 1px solid #ececec;
background: #f6f6f6;
}
td {
padding: 8px;
border: 1px solid #ececec;
}
}
.product-sale-info {
td {
padding: 14px;
border: 1px solid #ececec;
}
}
input[type="radio"] {
position: absolute;
&:before {
content: "";
background: #fff;
border-radius: 100%;
border: 1.5px solid #0041e8;
display: inline-block;
width: 20px;
height: 20px;
position: relative;
top: -0.2em;
margin-right: 1em;
vertical-align: top;
cursor: pointer;
text-align: center;
transition: all 250ms ease;
}
&:checked {
&:before {
background-color: #0041e8;
box-shadow: inset 0 0 0 4px #fff;
}
}
&:focus {
&:before {
outline: none;
border-color: #0041e8;
}
}
}