Style custom time range component
Alex P
Andrew Watkins
parent
18a04d6964
commit
30514a3d32
|
|
@ -51,10 +51,12 @@ class CustomTimeRange extends Component {
|
|||
{`${moment(lower).format('MMM Do HH:mm')} — ${moment(upper).format('MMM Do HH:mm')}`}
|
||||
<span className="caret"></span>
|
||||
</button>
|
||||
<div className="custom-time-container">
|
||||
<div className="time-lower" ref={(r) => this.lower = r} />
|
||||
<div className="time-upper" ref={(r) => this.upper = r} />
|
||||
<div className="apply-time button" onClick={this.handleClick}>Apply</div>
|
||||
<div className="custom-time--container">
|
||||
<div className="custom-time--dates">
|
||||
<div className="custom-time--lower" ref={(r) => this.lower = r} />
|
||||
<div className="custom-time--upper" ref={(r) => this.upper = r} />
|
||||
</div>
|
||||
<div className="custom-time--apply btn btn-sm btn-primary" onClick={this.handleClick}>Apply</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -12,28 +12,243 @@
|
|||
.caret {
|
||||
position: absolute;
|
||||
right: 9px;
|
||||
top: 50%;
|
||||
top: calc(50% + 1px);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.custom-time-container {
|
||||
.custom-time--container {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
top: 35px;
|
||||
right: 0;
|
||||
background: red;
|
||||
background: $g5-pepper;
|
||||
border-radius: $radius;
|
||||
padding: 8px;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 5px 0.6px rgba(15, 14, 21, 0.2);
|
||||
}
|
||||
.custom-time-range.show {
|
||||
.custom-time-container {
|
||||
display: block;
|
||||
.custom-time--dates {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.custom-time--lower {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.custom-time--upper {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
$custom-time-arrow: 28px;
|
||||
$rd-cell-size: 30px;
|
||||
|
||||
.rd-container {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.rd-date {
|
||||
position: relative;
|
||||
}
|
||||
.rd-back,
|
||||
.rd-next,
|
||||
.rd-month-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: $custom-time-arrow;
|
||||
line-height: $custom-time-arrow;
|
||||
}
|
||||
.rd-back,
|
||||
.rd-next {
|
||||
outline: none;
|
||||
width: $custom-time-arrow;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
border-radius: 50%;
|
||||
color: $g15-platinum;
|
||||
transition:
|
||||
background-color 0.25s ease,
|
||||
color 0.25s ease;
|
||||
|
||||
&:after {
|
||||
font-family: 'icomoon' !important;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
color: inherit;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
font-size: 16px;
|
||||
}
|
||||
.custom-time-range--btn {
|
||||
color: $g20-white;
|
||||
&:hover {
|
||||
background-color: $g6-smoke;
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
.rd-back {
|
||||
left: 0;
|
||||
&:after {
|
||||
left: calc(50% - 1px);
|
||||
content: "\e90c";
|
||||
}
|
||||
}
|
||||
.rd-next {
|
||||
left: calc(100% - #{$custom-time-arrow});
|
||||
&:after {
|
||||
left: calc(50% + 1px);
|
||||
content: "\e911";
|
||||
}
|
||||
}
|
||||
.rd-month-label {
|
||||
font-weight: 600;
|
||||
color: $g15-platinum;
|
||||
left: $custom-time-arrow;
|
||||
text-align: center;
|
||||
@include no-user-select();
|
||||
width: calc(100% - #{($custom-time-arrow * 2)});
|
||||
}
|
||||
.rd-days {
|
||||
margin-top: ($custom-time-arrow + 8px);
|
||||
background-color: transparent;
|
||||
border-radius: $radius-small;
|
||||
|
||||
/* Cancel out default table styles */
|
||||
tr:hover {
|
||||
background-color: transparent !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
thead.rd-days-head th.rd-day-head,
|
||||
tbody.rd-days-body td.rd-day-body {
|
||||
padding: 0 !important;
|
||||
min-height: $rd-cell-size !important;
|
||||
height: $rd-cell-size !important;
|
||||
max-height: $rd-cell-size !important;
|
||||
min-width: $rd-cell-size !important;
|
||||
width: $rd-cell-size !important;
|
||||
max-width: $rd-cell-size !important;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
border: 2px solid $g5-pepper !important;
|
||||
}
|
||||
thead.rd-days-head th.rd-day-head {
|
||||
color: $g15-platinum !important;
|
||||
background-color: $g5-pepper !important;
|
||||
}
|
||||
tbody.rd-days-body td.rd-day-body {
|
||||
@include no-user-select();
|
||||
letter-spacing: -1px;
|
||||
font-family: $code-font;
|
||||
transition:
|
||||
background-color 0.25s ease,
|
||||
color 0.25s ease;
|
||||
color: $g13-mist !important;
|
||||
background-color: $g3-castle;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover {
|
||||
cursor: $cc-pointer;
|
||||
color: $g20-white !important;
|
||||
background-color: $g6-smoke;
|
||||
}
|
||||
&.rd-day-next-month,
|
||||
&.rd-day-prev-month {
|
||||
cursor: $cc-default;
|
||||
color: $g8-storm !important;
|
||||
background-color: $g5-pepper !important;
|
||||
}
|
||||
&.rd-day-selected {
|
||||
background-color: $c-pool !important;
|
||||
color: $g20-white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rd-day-selected {
|
||||
background: blue;
|
||||
|
||||
.rd-time {
|
||||
margin: 0 2px;
|
||||
width: calc(100% - 4px);
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.rd-time-selected {
|
||||
@include no-user-select();
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
background-color: $g3-castle;
|
||||
border-radius: $radius-small;
|
||||
width: 100%;
|
||||
letter-spacing: -1px;
|
||||
font-family: $code-font;
|
||||
color: $g13-mist;
|
||||
display: inline-block;
|
||||
transition:
|
||||
color 0.25s ease,
|
||||
background-color 0.25s ease;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: $g20-white;
|
||||
background-color: $g6-smoke;
|
||||
cursor: $cc-pointer;
|
||||
}
|
||||
}
|
||||
.rd-time-list {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 120px;
|
||||
height: 200px;
|
||||
transform: translate(-50%,-50%);
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
@include custom-scrollbar-round($c-pool, $c-laser);
|
||||
@include gradient-h($c-ocean, $c-pool);
|
||||
border-radius: $radius;
|
||||
box-shadow: 0 2px 5px 0.6px rgba(15, 14, 21, 0.2);
|
||||
}
|
||||
|
||||
.rd-time-option {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
padding-left: $scrollbar-width;
|
||||
text-align: center;
|
||||
@include no-user-select();
|
||||
font-family: $code-font;
|
||||
color: $c-yeti;
|
||||
letter-spacing: -1px;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $g20-white;
|
||||
cursor: $cc-pointer;
|
||||
outline: none;
|
||||
@include gradient-h($c-laser, $c-pool);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-time--apply {
|
||||
margin-top: 8px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
|
||||
/* Show State */
|
||||
.custom-time-range.show {
|
||||
.custom-time--container {
|
||||
display: flex;
|
||||
}
|
||||
.custom-time-range--btn {
|
||||
color: $g20-white !important;
|
||||
background-color: $g6-smoke;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue