Penambahan FrontEnd All-New-Manufacture
This commit is contained in:
pand03
321
public/scss/components/forms/_form-pickers.scss
Normal file
321
public/scss/components/forms/_form-pickers.scss
Normal file
@@ -0,0 +1,321 @@
|
||||
|
||||
|
||||
.asColorPicker-dropdown {
|
||||
max-width: 26rem;
|
||||
}
|
||||
.asColorPicker-trigger {
|
||||
overflow: hidden;
|
||||
border-top-#{$dlab-pos-right}-radius: 0.5rem !important;
|
||||
border-bottom-#{$dlab-pos-right}-radius: 0.5rem !important;
|
||||
}
|
||||
.asColorPicker-trigger {
|
||||
border : 0 none;
|
||||
height : 100%;
|
||||
position: absolute;
|
||||
#{$dlab-pos-right}: -8px;
|
||||
#{$dlab-pos-left}:auto;
|
||||
top : 0;
|
||||
width : 2.1875rem;
|
||||
}
|
||||
.asColorPicker-clear {
|
||||
display : none;
|
||||
position : absolute;
|
||||
#{$dlab-pos-right}: 1rem;
|
||||
#{$dlab-pos-left}:auto;
|
||||
text-decoration: none;
|
||||
top : .5rem;
|
||||
}
|
||||
.asColorPicker-buttons{
|
||||
float: #{$dlab-pos-right};
|
||||
}
|
||||
|
||||
.daterangepicker {
|
||||
td.active {
|
||||
background-color: var(--primary);
|
||||
color:$white!important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
button.applyBtn {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker {
|
||||
&.datepicker-dropdown {
|
||||
padding:1rem;
|
||||
border-radius: $radius;
|
||||
border: 0;
|
||||
cursor:pointer;
|
||||
td.day, th.next, th.prev {
|
||||
height: 33px;
|
||||
width: 33px !important;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
border-radius: $radius-sm;
|
||||
color: var(--text-dark);
|
||||
&.old,&.new{
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
th.datepicker-switch, th.next, th.prev {
|
||||
font-weight: 500;
|
||||
font-size:14px;
|
||||
color: $heading;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
th.dow {
|
||||
font-weight: 400;
|
||||
font-size: .75rem;
|
||||
height: 2rem;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
}
|
||||
table {
|
||||
|
||||
tr td.selected, tr td.active.active {
|
||||
border: 0;
|
||||
background:var(--primary) !important;
|
||||
color:$white;
|
||||
&:hover{
|
||||
background: var(--primary)!important;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
td.today {
|
||||
background: var(--primary)!important;
|
||||
color : #ffffff!important;
|
||||
&:hover {
|
||||
background: var(--primary)!important;
|
||||
color : #ffffff;
|
||||
}
|
||||
}
|
||||
td.today.disabled {
|
||||
box-shadow: 0rem 0rem 1.875rem 0.3125rem rgba(243,30,122,0.3);
|
||||
color : #ffffff;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0rem 0rem 1.875rem 0.3125rem rgba(243,30,122,0.3);
|
||||
color : #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.picker {
|
||||
&__select--month, &__select--year {
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
&__input {
|
||||
background-color: transparent !important;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: transparent !important;
|
||||
border: 0.0625rem solid $d-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.asColorPicker-wrap{
|
||||
.form-control{
|
||||
border-bottom-#{$dlab-pos-right}-radius: 0;
|
||||
border-bottom-#{$dlab-pos-right}-radius: 0;
|
||||
}
|
||||
}
|
||||
// .daterangepicker td.available:hover, .daterangepicker th.available:hover{
|
||||
// color:var(--primary);
|
||||
// background-color:#f9f9f9;
|
||||
// }
|
||||
.daterangepicker .drp-calendar.left,
|
||||
.daterangepicker .drp-calendar.right{
|
||||
padding:1rem 1rem;
|
||||
}
|
||||
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td{
|
||||
width:33px;
|
||||
height:33px;
|
||||
// border-radius:$radius-sm!important;
|
||||
color:var(--text-dark);
|
||||
}
|
||||
// .daterangepicker td.in-range{
|
||||
// background-color:transparent;
|
||||
// color:#5E6278!important;
|
||||
// }
|
||||
.daterangepicker .calendar-table {
|
||||
background-color: var(--card);
|
||||
border-color: var(--border);
|
||||
th{
|
||||
font-size:14px;
|
||||
font-weight:600;
|
||||
color:var(--text);
|
||||
}
|
||||
}
|
||||
button.cancelBtn.btn.btn-sm.btn-inverse{
|
||||
background-color:var(--light);
|
||||
&:active{
|
||||
color: var(--text-dark);
|
||||
}
|
||||
}
|
||||
.daterangepicker{
|
||||
background-color: var(--card);
|
||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
|
||||
border:0;
|
||||
border-radius: $radius;
|
||||
|
||||
.drp-buttons{
|
||||
border-color: var(--border);
|
||||
}
|
||||
}
|
||||
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span{
|
||||
border-width:0 1.9px 1.9px 0;
|
||||
border-color:$light;
|
||||
}
|
||||
|
||||
.daterangepicker td.in-range{
|
||||
background-color: var(--light);
|
||||
&.end-date{
|
||||
background-color: var(--primary);
|
||||
}
|
||||
}
|
||||
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date{
|
||||
background-color: var(--card);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dtp .dtp-close{
|
||||
top: 1rem;
|
||||
}
|
||||
.dtp > .dtp-content{
|
||||
border-radius: $radius;
|
||||
background-color: var(--card);
|
||||
max-height: 570px;
|
||||
& > .dtp-date-view{
|
||||
& > header.dtp-header{
|
||||
background-color: var(--primary-dark);
|
||||
padding: .75rem 1rem;
|
||||
border-top-#{$dlab-pos-left}-radius: $radius;
|
||||
border-top-#{$dlab-pos-right}-radius: $radius;
|
||||
}
|
||||
}
|
||||
.dtp-buttons{
|
||||
.btn{
|
||||
font-size: .85rem;
|
||||
padding: .35rem 1rem;
|
||||
}
|
||||
.dtp-btn-ok{
|
||||
background: var(--rgba-primary-1);
|
||||
color: var(--primary);
|
||||
}
|
||||
.dtp-btn-cancel{
|
||||
&:hover{
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dtp{
|
||||
direction: ltr;
|
||||
div.dtp-date,div.dtp-time{
|
||||
background-color: var(--primary);
|
||||
}
|
||||
div.dtp-actual-year{
|
||||
color: rgba($white,.8);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.p10 > a{
|
||||
color: $white;
|
||||
}
|
||||
div.dtp-actual-num{
|
||||
font-weight: 600;
|
||||
}
|
||||
div.dtp-date > div{
|
||||
padding: 5px 0;
|
||||
}
|
||||
table.dtp-picker-days tr > td{
|
||||
font-weight: 500;
|
||||
font-size: .75rem;
|
||||
&:last-child{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
div.dtp-picker-month{
|
||||
padding-bottom: 10px!important;
|
||||
}
|
||||
table.dtp-picker-days tr > td > a, .dtp .dtp-picker-time > a{
|
||||
color: var(--text-dark);
|
||||
display: inline-block;
|
||||
height: 1.8rem;
|
||||
width: 1.8rem;
|
||||
}
|
||||
table.dtp-picker-days tr > th{
|
||||
color: var(--text-gray);
|
||||
font-weight: 600;
|
||||
font-size: .875rem;
|
||||
&:last-child{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
table.dtp-picker-days tr > td > a.selected{
|
||||
background-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker table tr td.day.focused, .datepicker table tr td.day:hover,
|
||||
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover{
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.clockpicker-popover{
|
||||
.clockpicker-button{
|
||||
border-color: var(--border)!important;
|
||||
&:active{
|
||||
color: var(--text-dark)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.asColorPicker-gradient-control {
|
||||
float: #{$dlab-pos-right};
|
||||
}
|
||||
|
||||
.picker__footer{
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
button{
|
||||
transition: 0.4s;
|
||||
&:last-child{
|
||||
&:hover{
|
||||
&::before{
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
&::before{
|
||||
top: 0em !important;
|
||||
transition: 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.picker__button--today{
|
||||
background-color: var(--primary);
|
||||
color: $white !important;
|
||||
|
||||
&:before{
|
||||
content: none!important
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user