@seafile/seafile-calendar 0.1.2-beta.0 → 1.0.0-alpha.0

package/assets/index.css

@@ -8,17 +8,13 @@
   display: none;
 }
 .rc-calendar-input-wrap {
+  width: 100%;
   position: relative;
-  padding: 6px;
-  border-bottom: 1px solid #e9e9e9;
 }
 .rc-calendar-input-wrap:after {
   content: '';
   clear: both;
 }
-.rc-calendar-date-input-wrap {
-  overflow: hidden;
-}
 .rc-calendar-time-picker {
   position: absolute;
   width: 100%;
@@ -87,7 +83,7 @@
   margin: 0;
 }
 .rc-calendar-clear-btn:after {
-  content: "x";
+  content: 'x';
   font-size: 12px;
   color: #aaa;
   display: inline-block;
@@ -209,11 +205,11 @@
 .rc-calendar {
   position: relative;
   outline: none;
-  font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans-serif;
+  font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
   width: -moz-fit-content;
   width: fit-content;
   list-style: none;
-  font-size: 12px;
+  font-size: 14px;
   text-align: left;
   background-color: #fff;
   border-radius: 3px;
@@ -221,28 +217,98 @@
   background-clip: padding-box;
   border: 1px solid #ccc;
   line-height: 1.5;
+  /* Layout wrappers */
+  /* Top inputs row */
+  /* Shared header text input */
+  /* Date grid area */
+  /* Right time panel */
+  /* Footer */
+}
+.rc-calendar-panel {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
 }
-.rc-calendar-date-panel,
 .rc-calendar-date-panel-container {
   display: -ms-flexbox;
   display: flex;
 }
-.rc-calendar-date-panel,
-.rc-calendar-panel {
-  position: relative;
-  outline: none;
+.rc-calendar-date-panel {
   display: block;
+  min-width: 288px;
 }
-.rc-calendar-week-number {
-  width: 286px;
+.rc-calendar-inputs {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: stretch;
+      align-items: stretch;
+  border-bottom: 1px solid #eee;
 }
-.rc-calendar-week-number-cell {
-  text-align: center;
+.rc-calendar-date-input-col {
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+}
+.rc-calendar-time-input-col {
+  width: 122px;
+  border-left: 1px solid #ccc;
+}
+.rc-calendar-date-input,
+.rc-calendar-time-input-outer {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  height: 100%;
+}
+.rc-calendar-date-input {
+  padding: 10px;
+}
+.rc-calendar-time-input-outer {
+  padding: 10px;
+  width: 100%;
+}
+.rc-calendar-date-input input {
+  height: 30px;
+  width: 100%;
+  padding: 4px 10px;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  line-height: 1.5;
+}
+.rc-calendar-date-input input:hover {
+  border-color: #ed7109;
+}
+.rc-calendar-date-input input:focus {
+  border-color: #ed7109;
+  box-shadow: 0 0 3px #ed7109;
+  outline: none;
+}
+.rc-calendar-text-input {
+  height: 30px;
+  display: inline-block;
+  width: 100%;
+  margin: 0;
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: 1px solid #d9d9d9;
+  background: #fff;
+  color: #666;
+  line-height: 1.5;
+  transition: border 0.3s, background 0.3s, box-shadow 0.3s;
+}
+.rc-calendar-text-input:hover {
+  border-color: #ed7109;
+}
+.rc-calendar-text-input:focus {
+  border-color: #ed7109;
+  box-shadow: 0 0 3px #ed7109;
+  outline: none;
 }
 .rc-calendar-header {
   padding: 0 10px;
-  height: 34px;
-  line-height: 30px;
+  height: 40px;
+  line-height: 40px;
   text-align: center;
   -moz-user-select: none;
    -ms-user-select: none;
@@ -251,46 +317,46 @@
   border-bottom: 1px solid #ccc;
 }
 .rc-calendar-header > a {
-  font-weight: bold;
+  font-weight: 600;
   display: inline-block;
-  padding: 0px 5px;
-  line-height: 34px;
+  padding: 0 5px;
+  line-height: 40px;
   text-align: center;
   width: 30px;
 }
 .rc-calendar-header > a:hover {
   cursor: pointer;
-  color: #f09f4f;
+  color: #ed7109;
 }
-.rc-calendar-header .rc-calendar-prev-month-btn {
+.rc-calendar-prev-month-btn {
   position: absolute;
   left: 25px;
 }
-.rc-calendar-header .rc-calendar-prev-month-btn:after {
+.rc-calendar-prev-month-btn:after {
   content: '‹';
 }
-.rc-calendar-header .rc-calendar-next-month-btn {
+.rc-calendar-next-month-btn {
   position: absolute;
   right: 25px;
 }
-.rc-calendar-header .rc-calendar-next-month-btn:after {
+.rc-calendar-next-month-btn:after {
   content: '›';
 }
 .rc-calendar-year-select,
 .rc-calendar-month-select,
 .rc-calendar-day-select {
   display: inline-block;
-  font-size: 12px;
-  font-weight: bold;
-  color: #666;
+  font-size: 14px;
+  font-weight: 600;
+  color: #212529;
   padding: 0 8px;
-  line-height: 34px;
+  line-height: 40px;
 }
 .rc-calendar-year-select:hover,
 .rc-calendar-month-select:hover,
 .rc-calendar-day-select:hover {
   cursor: pointer;
-  color: #f09f4f;
+  color: #ed7109;
 }
 .rc-calendar-year-select.rc-calendar-time-status:hover,
 .rc-calendar-month-select.rc-calendar-time-status:hover,
@@ -306,17 +372,17 @@
   top: 0;
   cursor: pointer;
   color: #999;
-  font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
+  font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
   padding: 0 5px;
   font-size: 16px;
   display: inline-block;
-  line-height: 34px;
+  line-height: 40px;
 }
 .rc-calendar-prev-month-btn:hover,
 .rc-calendar-next-month-btn:hover,
 .rc-calendar-prev-year-btn:hover,
 .rc-calendar-next-year-btn:hover {
-  color: #f09f4f;
+  color: #ed7109;
 }
 .rc-calendar-next-year-btn {
   right: 0;
@@ -331,67 +397,8 @@
   content: '«';
 }
 .rc-calendar-body {
-  padding: 9px 10px 10px;
-  height: 217px;
-}
-.rc-calendar-right-panel {
-  width: 68px;
-  height: inherit;
-}
-.rc-calendar-right-panel-header {
-  height: 34px;
-  line-height: 34px;
-}
-.rc-calendar-right-panel-header span {
-  transform: rotate(-90deg);
-}
-.rc-calendar-right-panel-body {
-  height: 217px;
-  border-left: 1px solid #ccc;
-  overflow-y: scroll;
-}
-.rc-calendar-right-panel-body ul {
-  list-style: none;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-.rc-calendar-right-panel-body ul li {
-  text-align: center;
-  padding: 8px 0;
-  cursor: pointer;
-}
-.rc-calendar-right-panel-body ul li:hover {
-  color: #e8bf6a;
-}
-.rc-calendar-right-panel-body .rc-calendar-selected-time {
-  color: #f09f3f;
-}
-.rc-calendar-right-panel-body::-webkit-scrollbar {
-  width: 0;
-}
-.rc-calendar-right-panel-footer {
-  height: 39px;
-  line-height: 34px;
-  border-left: 1px solid #ccc;
-}
-.rc-calendar-right-panel-footer span {
-  transform: rotate(90deg);
-}
-.rc-calendar-right-panel-header,
-.rc-calendar-right-panel-footer {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-pack: center;
-      justify-content: center;
-  cursor: pointer;
-  color: #999;
-  font-size: 16px;
-}
-.rc-calendar-right-panel-header span:after,
-.rc-calendar-right-panel-footer span:after {
-  content: '›';
+  padding: 8px 18px;
+  height: 268px;
 }
 .rc-calendar table {
   border-collapse: collapse;
@@ -411,30 +418,31 @@
 }
 .rc-calendar-column-header {
   line-height: 18px;
-  padding: 6px 0;
-  width: 33px;
+  height: 36px;
+  width: 36px;
   text-align: center;
 }
-.rc-calendar-column-header .rc-calendar-column-header-inner {
+.rc-calendar-column-header-inner {
   display: block;
   font-weight: normal;
+  color: #999;
 }
 .rc-calendar-week-number-header .rc-calendar-column-header-inner {
   display: none;
 }
 .rc-calendar-cell {
-  padding: 1px 0;
+  height: 36px;
 }
 .rc-calendar-date {
   display: block;
   margin: 0 auto;
-  color: #666;
-  border-radius: 4px 4px;
-  width: 26px;
-  height: 26px;
+  color: #212529;
+  border-radius: 4px;
+  width: 24px;
+  height: 24px;
   padding: 0;
   background: transparent;
-  line-height: 26px;
+  line-height: 24px;
   text-align: center;
 }
 .rc-calendar-date:hover {
@@ -442,17 +450,15 @@
   cursor: pointer;
 }
 .rc-calendar-selected-day .rc-calendar-date {
-  background: #fcecd9;
+  background: #ed7109;
+  color: #fff;
 }
 .rc-calendar-selected-date .rc-calendar-date {
-  background: #f09f3f;
+  background: #ed7109;
   color: #fff;
 }
 .rc-calendar-selected-date .rc-calendar-date:hover {
-  background: #f09f3f;
-}
-.rc-calendar-today .rc-calendar-date {
-  border: 1px solid #f09f3f;
+  background: #ed7109;
 }
 .rc-calendar-disabled-cell .rc-calendar-date {
   cursor: not-allowed;
@@ -476,34 +482,65 @@
 .rc-calendar-next-month-btn-day .rc-calendar-date {
   color: #bbb;
 }
-.rc-calendar-footer {
-  border-top: 1px solid #ccc;
-  padding: 10px 0;
+.rc-calendar-right-panel {
+  height: inherit;
+  border-left: 1px solid #ccc;
+}
+.rc-calendar-right-panel-time-header {
+  height: 40px;
+  line-height: 40px;
   text-align: center;
-  position: relative;
+  font-weight: 600;
+  color: #212529;
+  border-bottom: 1px solid #eee;
 }
-.rc-calendar-footer .rc-time-picker {
-  width: 90px;
+.rc-calendar-right-panel-body {
+  height: 268px;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 4px;
 }
-.rc-calendar-footer .rc-time-picker-input {
-  height: 24px;
+.rc-calendar-right-panel-col {
+  overflow-y: auto;
 }
-.rc-calendar-footer-show-ok {
-  text-align: right;
+.rc-calendar-right-panel-col:last-child {
+  border-left: 1px solid #eee;
 }
-.rc-calendar-footer-show-ok .rc-calendar-footer-btn {
-  padding-right: 12px;
+.rc-calendar-right-panel-col ul {
+  list-style: none;
+  margin: 0;
+  padding: 4px;
 }
-.rc-calendar-footer-show-ok .rc-calendar-time-picker-btn {
-  margin-left: 0;
-  padding: 0 12px;
+.rc-calendar-right-panel-item {
+  width: 48px;
+  height: 28px;
+  line-height: 28px;
+  text-align: center;
+  cursor: pointer;
+  color: #212529;
+  font-weight: 400;
+  border-radius: 3px;
 }
-.rc-calendar-footer-show-ok .rc-calendar-today-btn {
-  float: left;
-  padding-left: 12px;
+.rc-calendar-right-panel-item:hover {
+  background: rgba(237, 113, 9, 0.1);
 }
-.rc-calendar-footer-btn {
-  margin-top: 2px;
+.rc-calendar-right-panel-item-selected {
+  background: rgba(237, 113, 9, 0.1);
+  border-radius: 3px;
+  color: #212529;
+}
+.rc-calendar-right-panel-col::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+.rc-calendar-footer {
+  border-top: 1px solid #ccc;
+  padding: 8px 0;
+  text-align: center;
+  position: relative;
+}
+.rc-calendar-footer-show-ok {
+  text-align: right;
 }
 .rc-calendar-footer-btn:after {
   content: 'x';
@@ -520,7 +557,7 @@
 .rc-calendar-time-picker-btn {
   display: inline-block;
   text-align: center;
-  color: #f46830;
+  color: #ed7109;
 }
 .rc-calendar-today-btn:hover,
 .rc-calendar-ok-btn:hover,
@@ -533,34 +570,30 @@
 .rc-calendar-time-picker-btn-disabled {
   color: #bbb;
 }
-.rc-calendar-today-btn-disabled:hover,
-.rc-calendar-ok-btn-disabled:hover,
-.rc-calendar-time-picker-btn-disabled:hover {
-  color: #bbb;
-}
 .rc-calendar-today-btn {
-  padding-left: 10px;
+  padding-left: 0;
+  font-weight: 600;
 }
 .rc-calendar-time-input {
-  height: 25px;
+  height: 30px;
   position: relative;
   display: inline-block;
   margin: 0 0;
   padding: 4px 10px;
-  border-radius: 6px 6px;
+  border-radius: 3px;
   border: 1px solid #d9d9d9;
   background-color: #ffffff;
   color: #666;
   line-height: 1.5;
   transform: border 0.3s cubic-bezier(0.35, 0, 0.25, 1), background 0.3s cubic-bezier(0.35, 0, 0.25, 1), box-shadow 0.3s cubic-bezier(0.35, 0, 0.25, 1);
-  width: 40px;
+  width: 100%;
 }
 .rc-calendar-time-input:hover {
-  border-color: #f09f4f;
+  border-color: #ed7109;
 }
 .rc-calendar-time-input:focus {
-  border-color: #f09f4f;
-  box-shadow: 0 0 3px #f09f4f;
+  border-color: #ed7109;
+  box-shadow: 0 0 3px #ed7109;
 }
 .rc-calendar-time-panel {
   left: 0;