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);
}
}
.pr-time{
.-label-start-date{
grid-area: sDate;
}
.-label-start-time{
grid-area: sTime;
}
.-input-start-date{
grid-area: sDateInput;
}
.-input-start-time{
grid-area: sTimeInput;
}
.pr-time-label-start-date{
background: red;
grid-area: head;
}
.pr-time-label-start-time{
background: red;
grid-area: headd;
}
.pr-time-input-start-date{
background: blue;
grid-area: headdd;
}
.pr-time-input-start-time{
background: blue;
grid-area: inputStartTime;
}
&.icon-arrows-right-left{
grid-area: arrowIcon;
}
.-label-end-date{
grid-area: eDate;
}
.-label-end-time{
grid-area: eTime;
.icon-arrows-right-left{
background: green;
grid-area: arrowIcon;
}
.pr-time-label-end-date{
background: red;
grid-area: endDate;
}
.pr-time-label-end-time{
background: red;
grid-area: endTime;
}
.pr-time-input-end-date{
background: blue;
grid-area: inputEndDate;
}
.pr-time-input-end-time{
background: blue;
grid-area: inputEndTime;
}
.pr-time-input--buttons{
background: purple;
grid-area: buttons;
}
.pr-time-label-blank-grid{
background: yellow;
grid-area: blankSpace;
}
.-input-end-date{
grid-area: eDateInput;
}
.-input-end-time{
grid-area: eTimeInput;
}
.-input--buttons{
grid-area: buttons;
}
.-label-blank-grid{
grid-area: blank;
}
}
&--fixed-mode {
.c-tc-input-popup__input-grid {
// 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-columns: 1fr 1fr 1fr 1fr 1fr 2fr;
grid-template-areas:
"head headd headdd";
"sDate sTime . eDate eTime ."
"sDateInput sTimeInput arrowIcon eDateInput eTimeInput buttons ";
}