chowa/es/calendar/style/full.css

UI component library based on React

/**
 * @license chowa v1.1.3
 *
 * Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
.cw-full-calendar {
  padding: 18px;
  margin: 0;
  box-sizing: border-box;
  position: relative; }

.cw-full-calendar-toolbar {
  margin: 0 0 16px 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden; }

.cw-full-calendar-mode-selector {
  float: left; }

.cw-full-calendar-changer {
  float: right; }
  .cw-full-calendar-changer > :first-child {
    margin-right: 8px; }

.cw-full-calendar-date {
  margin: 0 auto;
  padding: 0;
  line-height: 32px;
  color: #616a6e;
  font-size: 20px;
  font-weight: 400;
  text-align: center; }

.cw-full-calendar-mode-wrapper {
  margin: 16px 0 0 0;
  padding: 0;
  box-sizing: border-box; }

.cw-full-calendar-header {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 48px;
  line-height: 48px;
  border: 1px solid #e6ecf5;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  font-size: 12px;
  color: #616a6e;
  font-weight: 500;
  text-align: center; }

.cw-full-calendar-header-title {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  flex: 0 0 14.28571%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.cw-full-calendar-body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #e6ecf5;
  border-left: 1px solid #e6ecf5;
  border-right: 1px solid #e6ecf5;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px; }

.cw-full-calendar-row-wrapper {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden; }
  .cw-full-calendar-row-wrapper + .cw-full-calendar-row-wrapper {
    border-top: 1px solid #e6ecf5; }

.cw-full-calendar-row-content {
  margin: 35px 0 0 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: auto; }

.cw-full-calendar-mode-year .cw-full-calendar-row-content {
  min-height: 142px;
  max-height: 175px; }

.cw-full-calendar-mode-month .cw-full-calendar-row-content {
  min-height: 77px;
  max-height: 145px; }

.cw-full-calendar-row-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  z-index: 1; }

.cw-full-calendar-mode-detail-wrapper {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  position: relative; }

.cw-full-calendar-mode-year .cw-full-calendar-mode-detail-wrapper {
  flex: 0 0 33.33333%; }
  .cw-full-calendar-mode-year .cw-full-calendar-mode-detail-wrapper + .cw-full-calendar-mode-detail-wrapper {
    border-left: 1px solid #e6ecf5; }

.cw-full-calendar-mode-month .cw-full-calendar-mode-detail-wrapper {
  flex: 0 0 14.28571%; }
  .cw-full-calendar-mode-month .cw-full-calendar-mode-detail-wrapper + .cw-full-calendar-mode-detail-wrapper {
    border-left: 1px solid #e6ecf5; }

.cw-full-calendar-mode-detail {
  margin: 0;
  padding: 7px 16px;
  box-sizing: border-box;
  height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between; }

.cw-full-calendar-num {
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #616a6e;
  flex: none;
  box-sizing: border-box; }

.cw-full-calendar-dark {
  color: #888da8; }

.cw-full-calendar-active {
  background-color: #7774e7;
  display: inline-block;
  margin: -3px -6px 0 0;
  padding: 0 6px;
  height: 28px;
  line-height: 28px;
  color: #fff;
  border-radius: 14px;
  text-align: center; }

.cw-full-calendar-row-events {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 5;
  position: relative;
  border-spacing: 0;
  box-sizing: border-box;
  border-collapse: collapse;
  table-layout: fixed;
  pointer-events: none; }
  .cw-full-calendar-row-events td {
    margin: 0;
    padding: 0;
    overflow: hidden; }

.cw-full-calendar-row-event {
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  margin: 5px 0;
  padding: 0 14px;
  pointer-events: all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.cw-full-calendar-row-event-begin {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  margin-left: 5px; }

.cw-full-calendar-row-event-end {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  margin-right: 5px; }

.cw-full-calendar-time-widget {
  margin: 0;
  padding: 0;
  width: 60px;
  height: 48px;
  flex: none; }

.cw-full-calendar-week-title-wrapper {
  margin: 0;
  padding: 0;
  flex: auto;
  display: flex;
  flex-direction: row; }

.cw-full-calendar-mode-week .cw-full-calendar-body {
  height: 660px;
  overflow-x: hidden;
  overflow-y: auto; }

.cw-full-calendar-content-wrapper {
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box; }

.cw-full-calendar-axis-wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden; }

.cw-full-calendar-x-axis {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 44px;
  z-index: 1;
  box-sizing: border-box;
  position: relative; }
  .cw-full-calendar-x-axis:before {
    content: '';
    position: absolute;
    left: 0;
    top: 22px;
    right: 0;
    border-top: 1px dashed #e6ecf5; }
  .cw-full-calendar-x-axis + .cw-full-calendar-x-axis {
    border-top: 1px solid #e6ecf5; }

.cw-full-calendar-time {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 60px;
  height: 44px;
  border-right: 1px solid #e6ecf5;
  color: #888da8;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  display: block; }

.cw-full-calendar-y-axis-wrapper {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box; }

.cw-full-calendar-y-axis {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 44px;
  width: 100%; }

.cw-full-calendar-time-content {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 60px;
  display: flex;
  align-items: stretch;
  flex-direction: row;
  z-index: 5; }

.cw-full-calendar-column-wrapper {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  flex: 0 0 14.28571%;
  overflow-x: auto;
  overflow-y: hidden; }
  .cw-full-calendar-column-wrapper:not(:last-child) {
    border-right: 1px solid #e6ecf5; }

.cw-full-calendar-mode-day .cw-full-calendar-column-wrapper {
  flex: 0 0 100%; }

.cw-full-calendar-column-events {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  height: 100%;
  box-sizing: border-box; }

.cw-full-calendar-column-events-wrapper {
  margin: 0 5px;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  flex: none;
  width: 30px; }

.cw-full-calendar-col-event {
  font-size: 12px;
  width: 30px;
  margin: 0;
  padding: 6px 0;
  position: absolute;
  left: 0;
  box-sizing: border-box;
  writing-mode: vertical-lr;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.cw-full-calendar-col-event-begin {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px; }

.cw-full-calendar-col-event-end {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px; }

.cw-full-calendar-col-span-0 {
  height: 0px; }

.cw-full-calendar-col-index-0 {
  top: 0px; }

.cw-full-calendar-col-span-1 {
  height: 22px; }

.cw-full-calendar-col-index-1 {
  top: 22px; }

.cw-full-calendar-col-span-2 {
  height: 44px; }

.cw-full-calendar-col-index-2 {
  top: 44px; }

.cw-full-calendar-col-span-3 {
  height: 66px; }

.cw-full-calendar-col-index-3 {
  top: 66px; }

.cw-full-calendar-col-span-4 {
  height: 88px; }

.cw-full-calendar-col-index-4 {
  top: 88px; }

.cw-full-calendar-col-span-5 {
  height: 110px; }

.cw-full-calendar-col-index-5 {
  top: 110px; }

.cw-full-calendar-col-span-6 {
  height: 132px; }

.cw-full-calendar-col-index-6 {
  top: 132px; }

.cw-full-calendar-col-span-7 {
  height: 154px; }

.cw-full-calendar-col-index-7 {
  top: 154px; }

.cw-full-calendar-col-span-8 {
  height: 176px; }

.cw-full-calendar-col-index-8 {
  top: 176px; }

.cw-full-calendar-col-span-9 {
  height: 198px; }

.cw-full-calendar-col-index-9 {
  top: 198px; }

.cw-full-calendar-col-span-10 {
  height: 220px; }

.cw-full-calendar-col-index-10 {
  top: 220px; }

.cw-full-calendar-col-span-11 {
  height: 242px; }

.cw-full-calendar-col-index-11 {
  top: 242px; }

.cw-full-calendar-col-span-12 {
  height: 264px; }

.cw-full-calendar-col-index-12 {
  top: 264px; }

.cw-full-calendar-col-span-13 {
  height: 286px; }

.cw-full-calendar-col-index-13 {
  top: 286px; }

.cw-full-calendar-col-span-14 {
  height: 308px; }

.cw-full-calendar-col-index-14 {
  top: 308px; }

.cw-full-calendar-col-span-15 {
  height: 330px; }

.cw-full-calendar-col-index-15 {
  top: 330px; }

.cw-full-calendar-col-span-16 {
  height: 352px; }

.cw-full-calendar-col-index-16 {
  top: 352px; }

.cw-full-calendar-col-span-17 {
  height: 374px; }

.cw-full-calendar-col-index-17 {
  top: 374px; }

.cw-full-calendar-col-span-18 {
  height: 396px; }

.cw-full-calendar-col-index-18 {
  top: 396px; }

.cw-full-calendar-col-span-19 {
  height: 418px; }

.cw-full-calendar-col-index-19 {
  top: 418px; }

.cw-full-calendar-col-span-20 {
  height: 440px; }

.cw-full-calendar-col-index-20 {
  top: 440px; }

.cw-full-calendar-col-span-21 {
  height: 462px; }

.cw-full-calendar-col-index-21 {
  top: 462px; }

.cw-full-calendar-col-span-22 {
  height: 484px; }

.cw-full-calendar-col-index-22 {
  top: 484px; }

.cw-full-calendar-col-span-23 {
  height: 506px; }

.cw-full-calendar-col-index-23 {
  top: 506px; }

.cw-full-calendar-col-span-24 {
  height: 528px; }

.cw-full-calendar-col-index-24 {
  top: 528px; }

.cw-full-calendar-col-span-25 {
  height: 550px; }

.cw-full-calendar-col-index-25 {
  top: 550px; }

.cw-full-calendar-col-span-26 {
  height: 572px; }

.cw-full-calendar-col-index-26 {
  top: 572px; }

.cw-full-calendar-col-span-27 {
  height: 594px; }

.cw-full-calendar-col-index-27 {
  top: 594px; }

.cw-full-calendar-col-span-28 {
  height: 616px; }

.cw-full-calendar-col-index-28 {
  top: 616px; }

.cw-full-calendar-col-span-29 {
  height: 638px; }

.cw-full-calendar-col-index-29 {
  top: 638px; }

.cw-full-calendar-col-span-30 {
  height: 660px; }

.cw-full-calendar-col-index-30 {
  top: 660px; }

.cw-full-calendar-col-span-31 {
  height: 682px; }

.cw-full-calendar-col-index-31 {
  top: 682px; }

.cw-full-calendar-col-span-32 {
  height: 704px; }

.cw-full-calendar-col-index-32 {
  top: 704px; }

.cw-full-calendar-col-span-33 {
  height: 726px; }

.cw-full-calendar-col-index-33 {
  top: 726px; }

.cw-full-calendar-col-span-34 {
  height: 748px; }

.cw-full-calendar-col-index-34 {
  top: 748px; }

.cw-full-calendar-col-span-35 {
  height: 770px; }

.cw-full-calendar-col-index-35 {
  top: 770px; }

.cw-full-calendar-col-span-36 {
  height: 792px; }

.cw-full-calendar-col-index-36 {
  top: 792px; }

.cw-full-calendar-col-span-37 {
  height: 814px; }

.cw-full-calendar-col-index-37 {
  top: 814px; }

.cw-full-calendar-col-span-38 {
  height: 836px; }

.cw-full-calendar-col-index-38 {
  top: 836px; }

.cw-full-calendar-col-span-39 {
  height: 858px; }

.cw-full-calendar-col-index-39 {
  top: 858px; }

.cw-full-calendar-col-span-40 {
  height: 880px; }

.cw-full-calendar-col-index-40 {
  top: 880px; }

.cw-full-calendar-col-span-41 {
  height: 902px; }

.cw-full-calendar-col-index-41 {
  top: 902px; }

.cw-full-calendar-col-span-42 {
  height: 924px; }

.cw-full-calendar-col-index-42 {
  top: 924px; }

.cw-full-calendar-col-span-43 {
  height: 946px; }

.cw-full-calendar-col-index-43 {
  top: 946px; }

.cw-full-calendar-col-span-44 {
  height: 968px; }

.cw-full-calendar-col-index-44 {
  top: 968px; }

.cw-full-calendar-col-span-45 {
  height: 990px; }

.cw-full-calendar-col-index-45 {
  top: 990px; }

.cw-full-calendar-col-span-46 {
  height: 1012px; }

.cw-full-calendar-col-index-46 {
  top: 1012px; }

.cw-full-calendar-col-span-47 {
  height: 1034px; }

.cw-full-calendar-col-index-47 {
  top: 1034px; }

.cw-full-calendar-col-span-48 {
  height: 1056px; }

.cw-full-calendar-col-index-48 {
  top: 1056px; }

.cw-full-calendar-day-header-title {
  flex: auto;
  text-align: center;
  margin: 0;
  padding: 0; }

.cw-full-calendar-event-info {
  background-color: #f3f9ff;
  color: #1890ff; }

.cw-full-calendar-event-primary {
  background-color: #e1e1fa;
  color: #7774e7; }

.cw-full-calendar-event-danger {
  background-color: #fef4f4;
  color: #f5222d; }

.cw-full-calendar-event-success {
  background-color: #f1fceb;
  color: #52c41a; }

.cw-full-calendar-event-warning {
  background-color: #fff8eb;
  color: #faad14; }

.cw-full-calendar-contextmenu {
  position: absolute;
  z-index: 100;
  font-size: 12px;
  color: #616a6e;
  min-width: 108px;
  margin: 0;
  padding: 6px 0;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 3px; }

.cw-full-calendar-menu {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none; }

.cw-full-calendar-menu-item {
  margin: 0;
  padding: 0 12px;
  box-sizing: border-box;
  height: 26px;
  line-height: 26px;
  cursor: pointer;
  transition: all 0.2s ease-in-out; }
  .cw-full-calendar-menu-item:hover {
    background-color: #f7f6fe;
    color: #414a63; }

@media only screen and (max-width: 640px) {
  .cw-full-calendar {
    padding: 18px 0; }
  .cw-full-calendar-mode-selector {
    margin-bottom: 8px; }
  .cw-full-calendar-date {
    flex: left;
    margin-bottom: 8px; } }