task_ui/assets/task/scss/components/_mian.scss
2025-04-21 11:49:42 +03:30

569 lines
12 KiB
SCSS

.main-page__content {
// height: calc(100dvh - 68px);
height: calc(100% - 70px);
min-height: calc(100% - 70px);
margin-right: var(--sidebar-collapsed-width);
display: flex;
.menu-bar__content {
position: static !important;
flex: 1 1 100%;
max-width: 30em;
// max-width: 20em;
width: auto;
// min-width: 40em;
&.show-list-panel {
right: 0 !important;
}
.date-picker {
.vpd-input-group {
.vpd-icon-btn {
height: 1.8em;
}
// .form-control {
// width: 18em;
// }
}
}
.alert {
display: flex;
border-radius: 0.25em !important;
margin-bottom: 0.5em !important;
&-secondary {
margin-top: 1em;
}
&-light {
}
}
.card {
border-radius: 0.25em !important;
display: flex;
&-header {
display: flex;
}
&-body {
display: flex;
justify-content: space-between;
}
}
.btn:hover {
text-decoration: none;
}
.year-dropdown {
margin-right: 1em;
}
.mounth-dropdown {
margin-right: 1em;
}
.group-item {
.group-row {
.group-picture-container {
.group-picture.mini-mode {
display: none;
}
.group-picture {
display: inline;
}
}
}
}
.groups-header {
.left-icons {
color: #bdc6d0;
}
}
}
#accordionExample {
// max-height: 51em !important;
max-height: calc(100dvh - 13em)!important;
overflow: auto !important;
}
.rotate-icon {
transform-origin: center center;
transition: transform 0.3s ease; /* افکت دوران با سرعت 0.3 ثانیه */
}
.rotate-icon.rotated {
transform: rotate(-90deg);
}
.main-page {
&_header {
display: flex;
// margin-top: 1em;
}
&_total {
border: 1px rgb(223 223 223) solid;
border-radius: 0.25em !important;
font-size: 1.2rem;
padding: 1em;
&-1 {
display: flex;
justify-content: space-between;
&_a {
color: var(--color-items-4);
}
&_b {
color: var(--color-items-5);
}
}
&-2 {
display: flex;
justify-content: space-between;
&_a {
color: var(--color-items-4);
}
&_b {
color: var(--color-items-3);
}
}
}
&_date {
border-radius: 0.25em !important;
// padding: 1em;
&-daysweek {
font-size: 1.3rem;
color: var(--color-items-5);
margin-bottom: 2em;
}
&-icon-left {
display: flex;
align-items: flex-end;
justify-content: center;
}
&-icon-right {
display: flex;
align-items: flex-end;
justify-content: center;
}
#typeNumber {
font-size: 1rem;
color: var(--color-items-5);
}
.form-control {
border-radius: 0.5em !important;
height: calc(2em + 0.35rem + 2px) !important;
padding: 0.5em;
width: 6em;
&.multiselect {
border: 1px solid var(--primary-color);
width: 14em;
}
}
}
&_body {
// border: 1px rgb(223 223 223) solid;
height: 30em;
margin-top: 1em;
border-radius: 0.25em;
// &-form-outline{
// max-height: 4em !important;
// overflow: auto !important;
// }
// .tasks_form {
// min-height: 18em;
// height: auto;
// overflow-y: auto;
// max-height: calc(100vh - 30em);
// }
&-items {
height: 3.5em;
&-move-copy {
display: flex;
flex-direction: row;
justify-content: center;
.date-picker {
input {
display: none !important;
}
svg {
display: none !important;
}
.vpd-icon-btn {
padding: unset !important ;
background-color: unset !important;
margin-bottom: unset !important;
}
// :hover {
// color: #6acfef;
// transition-duration: 0.3s;
// }
}
}
.task-form-control {
border: unset;
border-radius: unset !important;
&.Description {
border-left: unset !important;
text-align: center;
direction: rtl;
}
&.task-title {
text-align: center;
direction: rtl;
}
}
// &.record{
// cursor: pointer;
// }
&-icon {
// font-size:2rem;
color: var(--color-items-3);
display: flex;
justify-content: flex-end;
&-record {
color: var(--color-items-6);
justify-content: center;
display: flex;
font-size: 1.5rem;
height: 2.5em;
}
&-close {
color: unset !important;
}
&-add {
color: var(--color-items-2);
}
}
&-text-record {
color: var(--color-items-6);
}
&-first {
background-color: #f7fafe;
border: 1px rgb(223 223 223) solid;
}
.label-0 {
display: flex;
border-left: 1px var(--color-items-7) solid;
align-items: center;
height: 2em;
justify-content: center;
}
.label-1 {
display: flex;
align-items: center;
height: 2em;
justify-content: center;
}
.label-2 {
display: flex;
height: 2em;
border-left: 1px var(--color-items-7) solid;
border-right: 1px var(--color-items-7) solid;
align-items: center;
justify-content: center;
z-index: 9;
}
.label-3 {
display: flex;
height: 2em;
justify-content: center;
border-left: 1px var(--color-items-7) solid !important;
border-right: 1px var(--color-items-7) solid;
align-items: center;
}
.label-Description {
display: flex;
height: 2em;
justify-content: center;
align-items: center;
}
.label-4 {
display: flex;
height: 2em;
justify-content: space-between;
align-items: center;
padding-left: 0 !important;
}
&.labels {
background-color: #f1f1f1;
font-size: 1.3rem;
margin-left: 0 !important;
}
&.items {
color: var(--color-items-4);
&-bottom {
border-top: unset;
}
&-top {
border-bottom: unset;
}
}
&.total {
background-color: #f1f1f1;
font-size: 1.5rem;
}
.total-all-text {
color: var(--color-items-4);
}
.total-all-number {
color: black;
font-weight: bold;
font-size: 2rem;
}
.indecisive {
color: var(--color-items-4);
&-number {
color: var(--color-items-3);
font-weight: bold;
font-size: 2rem;
}
}
}
&-icon {
font-size: 2rem;
color: var(--color-items-2);
display: flex;
justify-content: flex-end;
&-close {
font-size: 2rem;
color: var(--color-items-3);
display: flex;
justify-content: flex-end;
}
&-add {
font-size: 1.5rem;
}
}
.items-form-control {
width: 6em;
margin-right: 1em;
border-radius: 0.5em !important;
height: calc(2.2em + 0.35rem + 2px) !important;
margin-right: 0.2em;
}
.form-label {
margin-top: 0.5em;
color: var(--color-items-4);
margin-left: 8em;
}
}
.alert {
display: flex;
border: 1px rgb(223 223 223) solid;
border-radius: 0.25em !important;
margin-bottom: 0.5em !important;
&-secondary {
}
&-light {
}
}
}
.coolinput {
display: flex;
flex-direction: column;
width: fit-content;
position: relative;
max-width: 240px;
}
.coolinput label.text {
font-size: 0.75rem;
color: var(--color-items-4);
font-weight: 700;
position: absolute;
top: 0.5rem;
margin: 0 0 0 3em;
padding: 0 3px;
background: #fff;
width: auto !important;
top: -0.8em;
right: 2em;
white-space: nowrap;
padding: 0 0.5em;
}
.coolinput input[type="text"].input {
padding: 11px 10px;
font-size: 1rem;
border: 1px #eee solid;
border-radius: 5px;
background: #fff;
}
.coolinput input[type="text"].input:focus {
outline: none;
}
input {
text-align: center;
direction: ltr;
}
.multiselect {
input {
text-align: right !important ;
direction: ltr;
}
&-lable {
width: 5em !important;
color: var(--color-items-5);
background-color: #fff;
z-index: 99;
margin: 0 0 0 10em !important;
font-size: 0.58rem;
}
}
.task-Form-Organ {
border-left: 1px var(--color-items-7) solid !important;
}
// .tasks_form{
// max-height: 20em;
// overflow: auto;
// }
// .right-section-mobile{
// // position: fixed;
// // z-index: 99;
// // top: 0;
// // right: -20em;
// // height:80% ;
// // -webkit-box-shadow: -5px 0 6px 0 #666;
// // box-shadow: -5px 0 6px 0 #666;
// // width: 30em;
// // background-color: #fff;
// }
.btn-copy {
font-size: 1rem;
width: 14em;
height: 35px;
display: flex;
align-items: center;
justify-content: flex-start;
border: none;
border-radius: 4px;
overflow: hidden;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.164);
cursor: pointer;
}
.btn-move {
font-size: 1rem;
width: 14em;
height: 35px;
display: flex;
align-items: center;
justify-content: flex-start;
border: none;
border-radius: 4px;
overflow: hidden;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.164);
cursor: pointer;
}
.text-move {
width: 90%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
// color: white;
background-color: rgb(2, 153, 153);
}
.text-copy {
width: 90%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
// color: white;
background-color: #196f93;
}
.svgIcon-move {
width: 20%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: teal;
color: white;
}
.svgIcon-copy {
width: 20%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #004761;
color: white;
}
.btn-move:hover .text-move {
background-color: rgb(0, 133, 133);
transition-duration: 0.3s;
}
.btn-copy:hover .text-copy {
background-color: #03688d;
transition-duration: 0.3s;
}
.btn-move:hover .svgIcon-move {
background-color: rgb(0, 105, 105);
transition-duration: 0.3s;
}
.btn-copy:hover .svgIcon-copy {
background-color: #015370;
transition-duration: 0.3s;
}
}
.card-header {
padding: 0.65rem 0.35rem !important;
&_titles {
&-icon {
font-size: 0.6rem;
}
&.text-1 {
color: var(--color-items-1);
padding-right: unset !important;
padding-left: unset !important;
}
&.text-2 {
color: var(--color-items-1);
// margin-right: 4em;
// margin-left: 4em;
padding-right: unset !important;
padding-left: unset !important;
}
&.text-3 {
color: var(--color-items-2);
padding-right: unset !important;
padding-left: unset !important;
}
&.text-4 {
color: var(--color-items-3);
// margin-right: 4em;
padding-right: unset !important;
padding-left: unset !important;
// margin-left: 4em;
}
&.text-5 {
color: var(--color-items-3);
// margin-left: 4em;
}
&.tavasi {
font-size: 1.5rem;
// margin-right: auto;
}
}
&_items {
display: flex;
justify-content: space-between;
&.item-1 {
}
}
}