Finish refactor using grid-template

This commit is contained in:
Rukmini Bose 2024-02-13 14:56:39 -08:00
parent 4b61e61af7
commit f55e31b84b

View File

@ -604,64 +604,50 @@
padding: cButtonPadding($compact: true); padding: cButtonPadding($compact: true);
} }
} }
.pr-time{
.pr-time-label-start-date{ .-label-start-date{
background: red; grid-area: sDate;
grid-area: head;
} }
.pr-time-label-start-time{ .-label-start-time{
background: red; grid-area: sTime;
grid-area: headd;
} }
.pr-time-input-start-date{ .-input-start-date{
background: blue; grid-area: sDateInput;
grid-area: headdd;
} }
.pr-time-input-start-time{ .-input-start-time{
background: blue; grid-area: sTimeInput;
grid-area: inputStartTime;
} }
.icon-arrows-right-left{ &.icon-arrows-right-left{
background: green;
grid-area: arrowIcon; grid-area: arrowIcon;
} }
.pr-time-label-end-date{ .-label-end-date{
background: red; grid-area: eDate;
grid-area: endDate;
} }
.pr-time-label-end-time{ .-label-end-time{
background: red; grid-area: eTime;
grid-area: endTime;
} }
.pr-time-input-end-date{ .-input-end-date{
background: blue; grid-area: eDateInput;
grid-area: inputEndDate;
} }
.pr-time-input-end-time{ .-input-end-time{
background: blue; grid-area: eTimeInput;
grid-area: inputEndTime;
} }
.pr-time-input--buttons{ .-input--buttons{
background: purple;
grid-area: buttons; grid-area: buttons;
} }
.pr-time-label-blank-grid{ .-label-blank-grid{
background: yellow; grid-area: blank;
grid-area: blankSpace; }
} }
&--fixed-mode { &--fixed-mode {
.c-tc-input-popup__input-grid { .c-tc-input-popup__input-grid {
// grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr;
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 150px 1fr;
// grid-template-areas:
// "start_date start_time blank-space end_date end_time blank-space"
// "input_start_date input_start_time arrow_icon input_end_date input_end_time buttons";
grid-template-areas: grid-template-areas:
"head headd headdd"; "sDate sTime . eDate eTime ."
"sDateInput sTimeInput arrowIcon eDateInput eTimeInput buttons ";
} }