github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/cluster/components/range/range.styl (about) 1 // Copyright 2018 The Cockroach Authors. 2 // 3 // Use of this software is governed by the Business Source License 4 // included in the file licenses/BSL.txt. 5 // 6 // As of the Change Date specified in that file, in accordance with 7 // the Business Source License, use of this software will be governed 8 // by the Apache License, Version 2.0, included in the file 9 // licenses/APL.txt. 10 11 @require "~styl/base/palette.styl" 12 @require "~src/components/core/index.styl" 13 14 .Range 15 width: 100% 16 display: flex 17 18 .click-zone 19 position: absolute 20 top 0 21 left 0 22 right 0 23 bottom 0 24 z-index 100 25 26 .trigger-container 27 width 100% 28 height 100% 29 position fixed 30 left 0 31 top 0 32 z-index 98 33 background-color transparent 34 35 .trigger-wrapper 36 z-index 99 37 width 100% 38 39 .range-selector 40 position absolute 41 top: 45px 42 background-color white 43 box-shadow 0 0 4px 0 rgba(154, 161, 171, 0.33) 44 border solid 0.5px $colors--neutral-2 45 border-radius 4px 46 display flex 47 flex-direction row 48 align-items flex-start 49 cursor default 50 z-index 99 51 &.__custom 52 width 555px 53 padding 22px 17px 40px 54 justify-content space-between 55 &.__options 56 width 423px 57 padding 12px 9px 58 &>div 59 display flex 60 flex-direction column 61 ._title 62 color $body-color 63 font-family $font-family--bold 64 font-size 12px 65 margin-bottom 7.5px 66 letter-spacing 0.1px 67 ._time-button 68 text-align left 69 padding 0 70 margin 0 71 &:hover 72 .__option-label 73 color $colors--primary-blue-3 74 .__option-label 75 color $colors--neutral-7 76 font-family $font-family--base 77 font-size 14px 78 line-height 22px 79 letter-spacing 0.1px 80 text-transform none 81 margin-left 13px 82 vertical-align middle 83 &.active 84 .__option-label 85 font-family $font-family--base 86 color $colors--primary-blue-3 87 88 .trigger 89 &.Select 90 display flex 91 justify-content space-between 92 .Select-value-label 93 margin-right 10px 94 font-family $font-family--base 95 font-weight 600 96 font-size 14px 97 line-height 24px 98 color $colors--neutral-7 99 text-transform initial 100 ._label-time 101 font-size: 13.5px 102 font-family $font-family--bold 103 104 .ant-calendar-today-btn 105 color $link-color 106 ._quick-view 107 width 100% 108 ._start 109 width 248px 110 ._end 111 width 248px 112 113 .ant-calendar-picker 114 margin-bottom 20px 115 116 .ant-calendar-picker, .ant-time-picker 117 width 100% 118 119 .ant-time-picker-panel 120 .ant-time-picker-panel-select-option-selected 121 background $colors--neutral-2 122 123 .range-calendar 124 width 248px 125 border-radius 4px 126 border solid 1px $colors--neutral-3 127 margin-bottom 20px 128 .calendar-today-btn 129 width 100% 130 height 40px 131 border-top solid 1px $colors--neutral-3 132 display flex 133 justify-content center 134 align-items center 135 .calendar-month-picker 136 display flex 137 justify-content space-between 138 align-items center 139 height 40px 140 span 141 font-family $font-family--bold 142 color $colors--neutral-7 143 font-size 14px 144 letter-spacing 0.1px 145 line-height 1.57 146 button 147 color $colors--neutral-5 148 width: auto 149 padding 0 15px 150 margin 0 10px 151 &:hover 152 color $colors--primary-blue-3 153 table 154 height auto 155 display flex 156 flex-direction column 157 tr 158 display flex 159 justify-content space-between 160 th, td 161 width 32px 162 height 24px 163 display flex 164 justify-content center 165 align-items center 166 .ant-fullcalendar-calendar-body 167 padding 8px 16px 168 .ant-fullcalendar-column-header 169 font-family $font-family--bold 170 font-size 12px 171 line-height 2 172 letter-spacing 0.1px 173 .ant-fullcalendar-tbody 174 .ant-fullcalendar-cell 175 .ant-fullcalendar-value 176 width 24px 177 height 24px 178 display flex 179 justify-content center 180 align-items center 181 padding 1.5px 4.95px 182 font-family $font-family--base 183 font-size 12px 184 line-height 1.83 185 letter-spacing 0.1px 186 padding 0 187 color $colors--neutral-7 188 &:hover 189 background $background-color 190 &.ant-fullcalendar-selected-day 191 .ant-fullcalendar-value 192 background $colors--primary-blue-1 193 color $colors--primary-blue-3 194 &:hover 195 background #e0efff 196 color $colors--primary-blue-3 197 &.ant-fullcalendar-disabled-cell 198 background $background-color 199 color $colors--neutral-5 200 .ant-fullcalendar-value 201 background $background-color 202 color $colors--neutral-5 203 &:hover 204 background $background-color 205 color $colors--neutral-5 206 &.ant-fullcalendar-today 207 &:hover 208 background transparent 209 .ant-fullcalendar-value 210 width 24px 211 height 24px 212 box-shadow none 213 border 1px solid $colors--primary-blue-3 214 color $colors--primary-blue-3 215 &:hover 216 font-family $font-family--bold 217 background $colors--primary-blue-1 218 &.ant-fullcalendar-selected-day 219 .ant-fullcalendar-value 220 background $colors--primary-blue-1 221 &:hover 222 background #e0efff 223 &.ant-fullcalendar-disabled-cell 224 &:hover 225 background $background-color 226 .ant-fullcalendar-value 227 font-family $font-family--bold 228 color $colors--neutral-5 229 background $background-color 230 border 1px solid $colors--neutral-5 231 &:hover 232 background $background-color