lixin-web/webapp/css/element-theme/time-select.css

vue and bootstrap

:root {
  /* Transition
  -------------------------- */
  /* Colors
  -------------------------- */
  /* Link
  -------------------------- */
  /* Border
  -------------------------- */
  /* Box-shadow
  -------------------------- */
  /* Fill
  -------------------------- */
  /* Font
  -------------------------- */
  /* Size
  -------------------------- */
  /* z-index
  -------------------------- */
  /* Disable base
  -------------------------- */
  /* Icon
  -------------------------- */
  /* Checkbox
  -------------------------- */
  /* Radio
  -------------------------- */
  /* Select
  -------------------------- */
  /* Alert
  -------------------------- */
  /* Message Box
  -------------------------- */
  /* Message
  -------------------------- */
  /* Notification
  -------------------------- */
  /* Input
  -------------------------- */
  /* Cascader
  -------------------------- */
  /* Group
  -------------------------- */
  /* Tab
  -------------------------- */
  /* Button
  -------------------------- */
  /* cascader
  -------------------------- */
  /* Switch
 -------------------------- */
  /* Dialog
 -------------------------- */
  /* Table
 -------------------------- */
  /* Pagination
 -------------------------- */
  /* Popover
 -------------------------- */
  /* Tooltip
  -------------------------- */
  /* Tag
  -------------------------- */
  /* Dropdown
  -------------------------- */
  /* Badge
  -------------------------- */
  /* Card
  --------------------------*/
  /* Slider
  --------------------------*/
  /* Steps
  --------------------------*/
  /* Menu
  --------------------------*/
  /* Rate
  --------------------------*/
  /* DatePicker
  --------------------------*/
  /* Loading
  --------------------------*/
  /* Scrollbar
  --------------------------*/
  /* Carousel
  --------------------------*/
  /* Collapse
  --------------------------*/
  /* Transfer
  --------------------------*/
}
@charset "UTF-8";
:root {
  /* Transition
  -------------------------- */
  /* Colors
  -------------------------- */
  /* Link
  -------------------------- */
  /* Border
  -------------------------- */
  /* Box-shadow
  -------------------------- */
  /* Fill
  -------------------------- */
  /* Font
  -------------------------- */
  /* Size
  -------------------------- */
  /* z-index
  -------------------------- */
  /* Disable base
  -------------------------- */
  /* Icon
  -------------------------- */
  /* Checkbox
  -------------------------- */
  /* Radio
  -------------------------- */
  /* Select
  -------------------------- */
  /* Alert
  -------------------------- */
  /* Message Box
  -------------------------- */
  /* Message
  -------------------------- */
  /* Notification
  -------------------------- */
  /* Input
  -------------------------- */
  /* Cascader
  -------------------------- */
  /* Group
  -------------------------- */
  /* Tab
  -------------------------- */
  /* Button
  -------------------------- */
  /* cascader
  -------------------------- */
  /* Switch
 -------------------------- */
  /* Dialog
 -------------------------- */
  /* Table
 -------------------------- */
  /* Pagination
 -------------------------- */
  /* Popover
 -------------------------- */
  /* Tooltip
  -------------------------- */
  /* Tag
  -------------------------- */
  /* Dropdown
  -------------------------- */
  /* Badge
  -------------------------- */
  /* Card
  --------------------------*/
  /* Slider
  --------------------------*/
  /* Steps
  --------------------------*/
  /* Menu
  --------------------------*/
  /* Rate
  --------------------------*/
  /* DatePicker
  --------------------------*/
  /* Loading
  --------------------------*/
  /* Scrollbar
  --------------------------*/
  /* Carousel
  --------------------------*/
  /* Collapse
  --------------------------*/
  /* Transfer
  --------------------------*/
}
/* DEPRECATED */
.fade-in-linear-enter-active, .fade-in-linear-leave-active {
  transition: opacity 200ms linear;
}
.fade-in-linear-enter, .fade-in-linear-leave, .fade-in-linear-leave-active {
  opacity: 0;
}
.el-fade-in-linear-enter-active, .el-fade-in-linear-leave-active {
  transition: opacity 200ms linear;
}
.el-fade-in-linear-enter, .el-fade-in-linear-leave, .el-fade-in-linear-leave-active {
  opacity: 0;
}
.el-fade-in-enter-active, .el-fade-in-leave-active {
  transition: all .3s cubic-bezier(.55,0,.1,1);
}
.el-fade-in-enter, .el-fade-in-leave-active {
  opacity: 0;
}
.el-zoom-in-center-enter-active, .el-zoom-in-center-leave-active {
  transition: all .3s cubic-bezier(.55,0,.1,1);
}
.el-zoom-in-center-enter, .el-zoom-in-center-leave-active {
  opacity: 0;
  transform: scaleX(0);
}
.el-zoom-in-top-enter-active, .el-zoom-in-top-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: center top;
}
.el-zoom-in-top-enter, .el-zoom-in-top-leave-active {
  opacity: 0;
  transform: scaleY(0);
}
.el-zoom-in-bottom-enter-active, .el-zoom-in-bottom-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: center bottom;
}
.el-zoom-in-bottom-enter, .el-zoom-in-bottom-leave-active {
  opacity: 0;
  transform: scaleY(0);
}
.collapse-transition {
  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}
.el-list-enter-active, .el-list-leave-active {
  transition: all 1s;
}
.el-list-enter, .el-list-leave-active {
  opacity: 0;
  transform: translateY(-30px);
}
.el-date-editor {
  position: relative;
  display: inline-block;
}
.el-date-editor .el-picker-panel {
  position: absolute;
  min-width: 180px;
  box-sizing: border-box;
  box-shadow: 0 2px 6px #ccc;
  background: #fff;
  z-index: 10;
  top: 41px;
}
.el-date-editor.el-input {
  width: 193px;
}
.el-date-editor--daterange {}
.el-date-editor--daterange.el-input {
  width: 220px;
}
.el-date-editor--datetimerange {}
.el-date-editor--datetimerange.el-input {
  width: 350px;
}
:root {
  /* Transition
  -------------------------- */
  /* Colors
  -------------------------- */
  /* Link
  -------------------------- */
  /* Border
  -------------------------- */
  /* Box-shadow
  -------------------------- */
  /* Fill
  -------------------------- */
  /* Font
  -------------------------- */
  /* Size
  -------------------------- */
  /* z-index
  -------------------------- */
  /* Disable base
  -------------------------- */
  /* Icon
  -------------------------- */
  /* Checkbox
  -------------------------- */
  /* Radio
  -------------------------- */
  /* Select
  -------------------------- */
  /* Alert
  -------------------------- */
  /* Message Box
  -------------------------- */
  /* Message
  -------------------------- */
  /* Notification
  -------------------------- */
  /* Input
  -------------------------- */
  /* Cascader
  -------------------------- */
  /* Group
  -------------------------- */
  /* Tab
  -------------------------- */
  /* Button
  -------------------------- */
  /* cascader
  -------------------------- */
  /* Switch
 -------------------------- */
  /* Dialog
 -------------------------- */
  /* Table
 -------------------------- */
  /* Pagination
 -------------------------- */
  /* Popover
 -------------------------- */
  /* Tooltip
  -------------------------- */
  /* Tag
  -------------------------- */
  /* Dropdown
  -------------------------- */
  /* Badge
  -------------------------- */
  /* Card
  --------------------------*/
  /* Slider
  --------------------------*/
  /* Steps
  --------------------------*/
  /* Menu
  --------------------------*/
  /* Rate
  --------------------------*/
  /* DatePicker
  --------------------------*/
  /* Loading
  --------------------------*/
  /* Scrollbar
  --------------------------*/
  /* Carousel
  --------------------------*/
  /* Collapse
  --------------------------*/
  /* Transfer
  --------------------------*/
}
:root {
  /* Transition
  -------------------------- */
  /* Colors
  -------------------------- */
  /* Link
  -------------------------- */
  /* Border
  -------------------------- */
  /* Box-shadow
  -------------------------- */
  /* Fill
  -------------------------- */
  /* Font
  -------------------------- */
  /* Size
  -------------------------- */
  /* z-index
  -------------------------- */
  /* Disable base
  -------------------------- */
  /* Icon
  -------------------------- */
  /* Checkbox
  -------------------------- */
  /* Radio
  -------------------------- */
  /* Select
  -------------------------- */
  /* Alert
  -------------------------- */
  /* Message Box
  -------------------------- */
  /* Message
  -------------------------- */
  /* Notification
  -------------------------- */
  /* Input
  -------------------------- */
  /* Cascader
  -------------------------- */
  /* Group
  -------------------------- */
  /* Tab
  -------------------------- */
  /* Button
  -------------------------- */
  /* cascader
  -------------------------- */
  /* Switch
 -------------------------- */
  /* Dialog
 -------------------------- */
  /* Table
 -------------------------- */
  /* Pagination
 -------------------------- */
  /* Popover
 -------------------------- */
  /* Tooltip
  -------------------------- */
  /* Tag
  -------------------------- */
  /* Dropdown
  -------------------------- */
  /* Badge
  -------------------------- */
  /* Card
  --------------------------*/
  /* Slider
  --------------------------*/
  /* Steps
  --------------------------*/
  /* Menu
  --------------------------*/
  /* Rate
  --------------------------*/
  /* DatePicker
  --------------------------*/
  /* Loading
  --------------------------*/
  /* Scrollbar
  --------------------------*/
  /* Carousel
  --------------------------*/
  /* Collapse
  --------------------------*/
  /* Transfer
  --------------------------*/
}
.el-picker-panel {
  color: #333;
  border: 1px solid rgb(209, 221, 229);
  box-shadow: 0 2px 6px #ccc;
  background: #fff;
  border-radius: 2px;
  line-height: 20px;
  margin: 5px 0;
}
.el-picker-panel__body, .el-picker-panel__body-wrapper {}
.el-picker-panel__body::after, .el-picker-panel__body-wrapper::after {
  content: "";
  display: table;
  clear: both;
}
.el-picker-panel__content {
  position: relative;
  margin: 15px;
}
.el-picker-panel__footer {
  border-top: 1px solid #e4e4e4;
  padding: 4px;
  text-align: right;
  background-color: #fff;
  position: relative;
}
.el-picker-panel__shortcut {
  display: block;
  width: 100%;
  border: 0;
  background-color: transparent;
  line-height: 28px;
  font-size: 14px;
  color: #333;
  padding-left: 12px;
  text-align: left;
  outline: none;
  cursor: pointer;
}
.el-picker-panel__shortcut:hover {
  background-color: #eff8f9;
}
.el-picker-panel__shortcut.active {
  background-color: #e6f1fe;
  color: #2ba7e7;
}
.el-picker-panel__btn {
  border: 1px solid #dcdcdc;
  color: #333;
  line-height: 24px;
  border-radius: 2px;
  padding: 0 20px;
  cursor: pointer;
  background-color: transparent;
  outline: none;
  font-size: 12px;
}
.el-picker-panel__btn[disabled] {
  color: #cccccc;
  cursor: not-allowed;
}
.el-picker-panel__icon-btn {
  font-size: 12px;
  color: #707070;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  margin-top: 3px;
}
.el-picker-panel__icon-btn:hover {
  color: #2ba7e7;
}
.el-picker-panel__link-btn {
  cursor: pointer;
  color: #2ba7e7;
  text-decoration: none;
  padding: 15px;
  font-size: 12px;
}
.el-picker-panel *[slot=sidebar], .el-picker-panel__sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 110px;
  border-right: 1px solid #e4e4e4;
  box-sizing: border-box;
  padding-top: 6px;
  background-color: rgb(251, 253, 255);
}
.el-picker-panel *[slot=sidebar] + .el-picker-panel__body, .el-picker-panel__sidebar + .el-picker-panel__body {
  margin-left: 110px;
}
.el-date-picker {
  min-width: 254px;
}
.el-date-picker .el-picker-panel__content {
  min-width: 224px;
}
.el-date-picker table {
  table-layout: fixed;
  width: 100%;
}
.el-date-picker.has-sidebar.has-time {
  min-width: 434px;
}
.el-date-picker.has-sidebar {
  min-width: 370px;
}
.el-date-picker.has-time {
  min-width: 324px;
}
.el-date-picker__editor-wrap {
  position: relative;
  display: table-cell;
  padding: 0 5px;
}
.el-date-picker__time-header {
  position: relative;
  border-bottom: 1px solid #e4e4e4;
  font-size: 12px;
  padding: 8px 5px 5px 5px;
  display: table;
  width: 100%;
  box-sizing: border-box;
}
.el-date-picker__header {
  margin: 12px;
  text-align: center;
}
.el-date-picker__header-label {
  font-size: 14px;
  padding: 0 5px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
}
.el-date-picker__header-label:hover {
  color: #2ba7e7;
}
.el-date-picker__header-label.active {
  color: #2ba7e7;
}
.el-date-picker__prev-btn {
  float: left;
}
.el-date-picker__next-btn {
  float: right;
}
.el-date-picker__time-wrap {
  padding: 10px;
  text-align: center;
}
.el-date-picker__time-label {
  float: left;
  cursor: pointer;
  line-height: 30px;
  margin-left: 10px;
}
:root {
  /* Transition
  -------------------------- */
  /* Colors
  -------------------------- */
  /* Link
  -------------------------- */
  /* Border
  -------------------------- */
  /* Box-shadow
  -------------------------- */
  /* Fill
  -------------------------- */
  /* Font
  -------------------------- */
  /* Size
  -------------------------- */
  /* z-index
  -------------------------- */
  /* Disable base
  -------------------------- */
  /* Icon
  -------------------------- */
  /* Checkbox
  -------------------------- */
  /* Radio
  -------------------------- */
  /* Select
  -------------------------- */
  /* Alert
  -------------------------- */
  /* Message Box
  -------------------------- */
  /* Message
  -------------------------- */
  /* Notification
  -------------------------- */
  /* Input
  -------------------------- */
  /* Cascader
  -------------------------- */
  /* Group
  -------------------------- */
  /* Tab
  -------------------------- */
  /* Button
  -------------------------- */
  /* cascader
  -------------------------- */
  /* Switch
 -------------------------- */
  /* Dialog
 -------------------------- */
  /* Table
 -------------------------- */
  /* Pagination
 -------------------------- */
  /* Popover
 -------------------------- */
  /* Tooltip
  -------------------------- */
  /* Tag
  -------------------------- */
  /* Dropdown
  -------------------------- */
  /* Badge
  -------------------------- */
  /* Card
  --------------------------*/
  /* Slider
  --------------------------*/
  /* Steps
  --------------------------*/
  /* Menu
  --------------------------*/
  /* Rate
  --------------------------*/
  /* DatePicker
  --------------------------*/
  /* Loading
  --------------------------*/
  /* Scrollbar
  --------------------------*/
  /* Carousel
  --------------------------*/
  /* Collapse
  --------------------------*/
  /* Transfer
  --------------------------*/
}
@charset "UTF-8";
:root {
  /* Transition
  -------------------------- */
  /* Colors
  -------------------------- */
  /* Link
  -------------------------- */
  /* Border
  -------------------------- */
  /* Box-shadow
  -------------------------- */
  /* Fill
  -------------------------- */
  /* Font
  -------------------------- */
  /* Size
  -------------------------- */
  /* z-index
  -------------------------- */
  /* Disable base
  -------------------------- */
  /* Icon
  -------------------------- */
  /* Checkbox
  -------------------------- */
  /* Radio
  -------------------------- */
  /* Select
  -------------------------- */
  /* Alert
  -------------------------- */
  /* Message Box
  -------------------------- */
  /* Message
  -------------------------- */
  /* Notification
  -------------------------- */
  /* Input
  -------------------------- */
  /* Cascader
  -------------------------- */
  /* Group
  -------------------------- */
  /* Tab
  -------------------------- */
  /* Button
  -------------------------- */
  /* cascader
  -------------------------- */
  /* Switch
 -------------------------- */
  /* Dialog
 -------------------------- */
  /* Table
 -------------------------- */
  /* Pagination
 -------------------------- */
  /* Popover
 -------------------------- */
  /* Tooltip
  -------------------------- */
  /* Tag
  -------------------------- */
  /* Dropdown
  -------------------------- */
  /* Badge
  -------------------------- */
  /* Card
  --------------------------*/
  /* Slider
  --------------------------*/
  /* Steps
  --------------------------*/
  /* Menu
  --------------------------*/
  /* Rate
  --------------------------*/
  /* DatePicker
  --------------------------*/
  /* Loading
  --------------------------*/
  /* Scrollbar
  --------------------------*/
  /* Carousel
  --------------------------*/
  /* Collapse
  --------------------------*/
  /* Transfer
  --------------------------*/
}
.el-scrollbar {
  overflow: hidden;
  position: relative;
}
.el-scrollbar:hover .el-scrollbar__bar, .el-scrollbar:active .el-scrollbar__bar, .el-scrollbar:focus .el-scrollbar__bar {
  opacity: 1;
  transition: opacity 340ms ease-out;
}
.el-scrollbar__wrap {
  overflow: scroll;
}
.el-scrollbar__wrap--hidden-default {}
.el-scrollbar__wrap--hidden-default::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.el-scrollbar__thumb {
  position: relative;
  display: block;
  width: 0;
  height: 0;
  cursor: pointer;
  border-radius: inherit;
  background-color: rgba(151, 171, 190, 0.3);
  transition: .3s background-color;
}
.el-scrollbar__thumb:hover {
  background-color: rgba(151, 171, 190, 0.5);
}
.el-scrollbar__bar {
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 1;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 120ms ease-out;
}
.el-scrollbar__bar.is-horizontal {
  height: 6px;
  left: 2px;
}
.el-scrollbar__bar.is-horizontal > div {
  height: 100%;
}
.el-scrollbar__bar.is-vertical {
  width: 6px;
  top: 2px;
}
.el-scrollbar__bar.is-vertical > div {
  width: 100%;
}

.time-select {
  margin: 5px 0;
  min-width: 0;
}

.time-select .el-picker-panel__content {
  max-height: 200px;
  margin: 0;
}

.time-select-item {
  padding: 8px 10px;
  font-size: 14px;
}

.time-select-item.selected:not(.disabled) {
  background-color: #2ba7e7;
  color: #fff
}

.time-select-item.selected:not(.disabled):hover {
  background-color: #2ba7e7;
}

.time-select-item.disabled {
  color: rgb(209, 221, 229);
  cursor: not-allowed;
}

.time-select-item:hover {
  background-color: #eff8f9;
  cursor: pointer;
}
:root {
  /* Transition
  -------------------------- */
  /* Colors
  -------------------------- */
  /* Link
  -------------------------- */
  /* Border
  -------------------------- */
  /* Box-shadow
  -------------------------- */
  /* Fill
  -------------------------- */
  /* Font
  -------------------------- */
  /* Size
  -------------------------- */
  /* z-index
  -------------------------- */
  /* Disable base
  -------------------------- */
  /* Icon
  -------------------------- */
  /* Checkbox
  -------------------------- */
  /* Radio
  -------------------------- */
  /* Select
  -------------------------- */
  /* Alert
  -------------------------- */
  /* Message Box
  -------------------------- */
  /* Message
  -------------------------- */
  /* Notification
  -------------------------- */
  /* Input
  -------------------------- */
  /* Cascader
  -------------------------- */
  /* Group
  -------------------------- */
  /* Tab
  -------------------------- */
  /* Button
  -------------------------- */
  /* cascader
  -------------------------- */
  /* Switch
 -------------------------- */
  /* Dialog
 -------------------------- */
  /* Table
 -------------------------- */
  /* Pagination
 -------------------------- */
  /* Popover
 -------------------------- */
  /* Tooltip
  -------------------------- */
  /* Tag
  -------------------------- */
  /* Dropdown
  -------------------------- */
  /* Badge
  -------------------------- */
  /* Card
  --------------------------*/
  /* Slider
  --------------------------*/
  /* Steps
  --------------------------*/
  /* Steps
  --------------------------*/
  /* Rate
  --------------------------*/
  /* DatePicker
  --------------------------*/
  /* Loading
  --------------------------*/
  /* Scrollbar
  --------------------------*/
  /* Carousel
  --------------------------*/
  /* Collapse
  --------------------------*/
}