@seafile/seafile-calendar 1.0.1-beta.4 → 1.0.2-alpha.1

package/assets/index.css

@@ -60,7 +60,7 @@
 .rc-calendar-input {
   border: 1px solid transparent;
   width: 100%;
-  color: #666;
+  color: #333;
   cursor: text;
   line-height: 1.5;
   outline: 0;
@@ -69,6 +69,16 @@
 .rc-calendar-input-invalid {
   border-color: red;
 }
+.rc-calendar-input:-ms-input-placeholder {
+  color: #808080;
+  font-weight: 600;
+  opacity: 1;
+}
+.rc-calendar-input::placeholder {
+  color: #808080;
+  font-weight: 600;
+  opacity: 1;
+}
 .rc-calendar-clear-btn {
   z-index: 9999;
   position: absolute;
@@ -219,7 +229,6 @@
   line-height: 1.5;
   /* Layout wrappers */
   /* Top inputs row */
-  /* Shared header text input */
   /* Date grid area */
   /* Right time panel */
   /* Footer */
@@ -236,79 +245,55 @@
 }
 .rc-calendar-date-panel {
   display: block;
-  min-width: 288px;
+  min-width: 260px;
 }
 .rc-calendar-inputs {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: stretch;
       align-items: stretch;
-  border-bottom: 1px solid #eee;
 }
 .rc-calendar-date-input-col {
   -ms-flex: 1 1 auto;
       flex: 1 1 auto;
 }
 .rc-calendar-time-input-col {
-  width: 122px;
+  width: 90px;
   border-left: 1px solid #eee;
 }
 .rc-calendar-date-input,
-.rc-calendar-time-input-outer {
+.rc-calendar-time-input {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
       align-items: center;
   height: 100%;
+  padding: 12px 12px 0 12px;
 }
-.rc-calendar-date-input {
-  padding: 10px;
-}
-.rc-calendar-time-input-outer {
-  padding: 10px;
-  width: 100%;
-}
-.rc-calendar-date-input input {
+.rc-calendar-date-input input,
+.rc-calendar-time-input input {
   height: 30px;
   width: 100%;
-  padding: 4px 10px;
+  padding: 4px 6px;
   border: 1px solid #eee;
   border-radius: 3px;
   line-height: 1.5;
 }
-.rc-calendar-date-input input:focus {
-  border-color: #1991eb;
-  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
-  outline: none;
-}
-.rc-calendar-text-input {
-  height: 30px;
-  display: inline-block;
-  width: 100%;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 6px;
-  border: 1px solid #eee;
-  background: #fff;
-  color: #666;
-  line-height: 1.5;
-  transition: border 0.3s, background 0.3s, box-shadow 0.3s;
-}
-.rc-calendar-text-input:focus {
+.rc-calendar-date-input input:focus,
+.rc-calendar-time-input input:focus {
   border-color: #1991eb;
   box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
   outline: none;
 }
 .rc-calendar-header {
-  padding: 0 10px;
-  height: 40px;
-  line-height: 40px;
+  padding: 0 12px;
+  height: 48px;
+  line-height: 24px;
   text-align: center;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
-  border-bottom: 1px solid #eee;
 }
 .rc-calendar-header > a {
   font-weight: 600;
@@ -327,6 +312,7 @@
   left: 25px;
 }
 .rc-calendar-prev-month-btn:after {
+  width: 20px;
   content: '‹';
 }
 .rc-calendar-next-month-btn {
@@ -334,6 +320,7 @@
   right: 25px;
 }
 .rc-calendar-next-month-btn:after {
+  width: 20px;
   content: '›';
 }
 .rc-calendar-year-select,
@@ -344,13 +331,13 @@
   font-weight: 600;
   color: #212529;
   padding: 0 8px;
-  line-height: 40px;
+  line-height: 48px;
 }
 .rc-calendar-year-select:hover,
 .rc-calendar-month-select:hover,
 .rc-calendar-day-select:hover {
   cursor: pointer;
-  color: #ed7109;
+  color: #ff7600;
 }
 .rc-calendar-year-select.rc-calendar-time-status:hover,
 .rc-calendar-month-select.rc-calendar-time-status:hover,
@@ -362,36 +349,41 @@
 .rc-calendar-next-month-btn,
 .rc-calendar-prev-year-btn,
 .rc-calendar-next-year-btn {
+  width: 20px;
+  height: 20px;
   position: absolute;
-  top: 0;
+  top: 12px;
   cursor: pointer;
   color: #999;
   font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
-  padding: 0 5px;
   font-size: 16px;
-  display: inline-block;
-  line-height: 40px;
+  display: -ms-flexbox;
+  display: flex;
+  line-height: 18px;
+  border-radius: 4px;
 }
 .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: #ed7109;
+  background-color: #f5f5f5;
 }
 .rc-calendar-next-year-btn {
   right: 0;
 }
 .rc-calendar-next-year-btn:after {
+  width: 20px;
   content: '»';
 }
 .rc-calendar-prev-year-btn {
   left: 0;
 }
 .rc-calendar-prev-year-btn:after {
+  width: 20px;
   content: '«';
 }
 .rc-calendar-body {
-  padding: 8px 18px;
+  padding: 0 12px;
   height: 268px;
 }
 .rc-calendar table {
@@ -412,8 +404,8 @@
 }
 .rc-calendar-column-header {
   line-height: 18px;
-  height: 36px;
-  width: 36px;
+  height: 32px;
+  width: 32px;
   text-align: center;
 }
 .rc-calendar-column-header-inner {
@@ -425,122 +417,106 @@
   display: none;
 }
 .rc-calendar-cell {
-  height: 36px;
-  padding: 0;
+  width: 32px;
+  height: auto;
 }
 .rc-calendar-date {
   display: block;
-  margin: 0 auto;
   color: #212529;
   border-radius: 4px;
-  width: 24px;
-  height: 24px;
+  width: 32px;
+  height: 32px;
   padding: 0;
   background: transparent;
-  line-height: 24px;
+  line-height: 32px;
   text-align: center;
 }
 .rc-calendar-date:hover {
-  background: #fcecd9;
+  background: #f5f5f5;
+  border-radius: 50%;
   cursor: pointer;
 }
 .rc-calendar-selected-date .rc-calendar-date {
   background: #ff9800;
+  border-radius: 50%;
   color: #fff;
 }
 .rc-calendar-selected-date .rc-calendar-date:hover {
   background: #ff9800;
+  border-radius: 50%;
 }
 .rc-calendar-disabled-cell .rc-calendar-date {
   cursor: not-allowed;
-  color: #bcbcbc;
-  background: #f3f3f3;
-  border-radius: 0;
-  width: auto;
-}
-.rc-calendar-disabled-cell .rc-calendar-date:hover {
-  background: #f3f3f3;
-}
-.rc-calendar-disabled-cell-first-of-row .rc-calendar-date {
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.rc-calendar-disabled-cell-last-of-row .rc-calendar-date {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
 }
 .rc-calendar-last-month-cell .rc-calendar-date,
 .rc-calendar-next-month-btn-day .rc-calendar-date {
   color: #bbb;
 }
 .rc-calendar-today .rc-calendar-date {
-  position: relative;
-}
-.rc-calendar-today .rc-calendar-date::before {
-  content: '';
-  background: #ff9800;
-  position: absolute;
-  width: 4px;
-  height: 4px;
+  border: 1px solid #ff9800;
   border-radius: 50%;
-  left: 45%;
-  bottom: 0%;
-  display: inline-block;
 }
 .rc-calendar-right-panel {
   height: inherit;
   border-left: 1px solid #eee;
 }
-.rc-calendar-right-panel-time-header {
-  height: 40px;
-  line-height: 40px;
-  text-align: center;
-  font-weight: 600;
-  color: #212529;
-  border-bottom: 1px solid #eee;
+.rc-calendar-right-panel-header {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex-align: center;
+      align-items: center;
 }
 .rc-calendar-right-panel-body {
   height: 268px;
   display: -ms-flexbox;
   display: flex;
-  padding: 4px;
+  padding: 8px 4px;
   scrollbar-color: auto;
 }
 .rc-calendar-right-panel-col {
   overflow-y: auto;
 }
-.rc-calendar-right-panel-col:last-child {
-  border-left: 1px solid #eee;
-}
 .rc-calendar-right-panel-col ul {
   list-style: none;
   margin: 0;
   padding: 4px;
 }
 .rc-calendar-right-panel-item {
-  width: 48px;
-  height: 28px;
-  line-height: 28px;
-  text-align: center;
+  width: 32px;
+  height: 32px;
+  padding: 4px 0;
   cursor: pointer;
+}
+.rc-calendar-right-panel-item-text {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  text-align: center;
+  line-height: 24px;
   color: #212529;
   font-weight: 400;
   border-radius: 3px;
 }
-.rc-calendar-right-panel-item:hover {
-  background: rgba(255, 152, 0, 0.1);
+.rc-calendar-right-panel-item-text:hover {
+  background: #f5f5f5;
   color: #212529;
 }
 .rc-calendar-right-panel-item-selected,
 .rc-calendar-right-panel-item-selected:hover {
   background: #ff9800;
-  border-radius: 3px;
+  border-radius: 4px;
   color: #fff;
 }
 .rc-calendar-right-panel-col::-webkit-scrollbar {
   width: 0;
   height: 0;
 }
+.rc-calendar-right-panel-item-current {
+  border: 1px solid #ff9800;
+  border-radius: 4px;
+}
 .rc-calendar-footer {
   border-top: 1px solid #eee;
   padding: 8px 0;
@@ -565,13 +541,13 @@
 .rc-calendar-time-picker-btn {
   display: inline-block;
   text-align: center;
-  color: #ed7109;
+  color: #ed7107;
 }
 .rc-calendar-today-btn:hover,
 .rc-calendar-ok-btn:hover,
 .rc-calendar-time-picker-btn:hover {
   cursor: pointer;
-  color: #f09f4f;
+  color: #ff7600;
 }
 .rc-calendar-today-btn-disabled,
 .rc-calendar-ok-btn-disabled,
@@ -582,24 +558,6 @@
   padding-left: 0;
   font-weight: 600;
 }
-.rc-calendar-time-input {
-  height: 30px;
-  position: relative;
-  display: inline-block;
-  margin: 0 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  border: 1px solid #eee;
-  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: 100%;
-}
-.rc-calendar-time-input:focus {
-  border-color: #1991eb;
-  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
-}
 .rc-calendar-time-panel {
   left: 0;
   top: 0;
@@ -670,7 +628,7 @@
   top: 0;
   bottom: 0;
   right: auto;
-  width: 288px;
+  width: 260px;
   background: #ffffff;
   z-index: 10;
   position: absolute;
@@ -687,35 +645,52 @@
   display: none;
 }
 .rc-calendar-month-panel-header {
-  padding: 0 10px;
-  height: 34px;
-  line-height: 30px;
+  height: 48px;
+  line-height: 48px;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex-align: center;
+      align-items: center;
   position: relative;
   text-align: center;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #eee;
 }
 .rc-calendar-month-panel-header > a {
-  font-weight: bold;
-  display: inline-block;
-  padding: 4px 5px;
-  text-align: center;
-  width: 30px;
-  color: #212529;
-}
-.rc-calendar-month-panel-header > a:hover {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex-align: center;
+      align-items: center;
   cursor: pointer;
-  color: #ed7109;
+}
+.rc-calendar-month-panel-year-select:hover {
+  color: #ff7600;
 }
 .rc-calendar-month-panel-prev-year-btn,
 .rc-calendar-month-panel-next-year-btn {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  color: #999;
   position: absolute;
-  top: 0;
+  top: 12px;
+}
+.rc-calendar-month-panel-prev-year-btn:hover,
+.rc-calendar-month-panel-next-year-btn:hover {
+  background-color: #f5f5f5;
+}
+.rc-calendar-month-panel-next-year-btn {
+  right: 16px;
 }
 .rc-calendar-month-panel-next-year-btn:after {
+  width: 20px;
   content: '»';
 }
 .rc-calendar-month-panel-prev-year-btn {
@@ -723,9 +698,10 @@
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  left: 0;
+  left: 16px;
 }
 .rc-calendar-month-panel-prev-year-btn:after {
+  width: 20px;
   content: '«';
 }
 .rc-calendar-month-panel .rc-calendar-month-panel-year-select {
@@ -739,7 +715,6 @@
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  right: 0;
 }
 .rc-calendar-month-panel-body {
   -ms-flex: 1;
@@ -772,12 +747,11 @@
   text-align: center;
 }
 .rc-calendar-month-panel-cell .rc-calendar-month-panel-month:hover {
-  color: #212529;
-  background: #fcecd9;
+  background: #f5f5f5;
   cursor: pointer;
 }
 .rc-calendar-month-panel-cell-disabled .rc-calendar-month-panel-month {
-  color: #bfbfbf;
+  color: #bbb;
 }
 .rc-calendar-month-panel-cell-disabled .rc-calendar-month-panel-month:hover {
   background: white;
@@ -788,7 +762,7 @@
   color: #fff;
 }
 .rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month:hover {
-  background: #f09f3f;
+  background: #ff7600;
   color: #fff;
 }
 .rc-calendar-month-header-wrap {
@@ -800,7 +774,7 @@
   top: 0;
   bottom: 0;
   right: auto;
-  width: 288px;
+  width: 260px;
   background: #ffffff;
   z-index: 10;
   position: absolute;
@@ -817,41 +791,49 @@
   display: none;
 }
 .rc-calendar-year-panel-header {
-  padding: 0 10px;
-  height: 34px;
-  line-height: 30px;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex-align: center;
+      align-items: center;
+  height: 48px;
   position: relative;
   text-align: center;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #eee;
 }
 .rc-calendar-year-panel-header > a {
-  height: 100%;
-  font-weight: bold;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-pack: center;
       justify-content: center;
   -ms-flex-align: center;
       align-items: center;
-  padding: 4px 5px;
   text-align: center;
-  width: 30px;
-  color: #212529;
-}
-.rc-calendar-year-panel-header > a:hover {
   cursor: pointer;
-  color: #ed7109;
+}
+.rc-calendar-year-panel-decade-select:hover {
+  color: #ff7600;
 }
 .rc-calendar-year-panel-prev-decade-btn,
 .rc-calendar-year-panel-next-decade-btn {
+  width: 20px;
+  height: 20px;
   position: absolute;
-  top: 0;
+  top: 12px;
+  border-radius: 4px;
+  color: #999;
+}
+.rc-calendar-year-panel-prev-decade-btn:hover,
+.rc-calendar-year-panel-next-decade-btn:hover {
+  background-color: #f5f5f5;
 }
 .rc-calendar-year-panel-next-decade-btn:after {
+  width: 20px;
   content: '»';
 }
 .rc-calendar-year-panel-prev-decade-btn {
@@ -859,9 +841,10 @@
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  left: 0;
+  left: 16px;
 }
 .rc-calendar-year-panel-prev-decade-btn:after {
+  width: 20px;
   content: '«';
 }
 .rc-calendar-year-panel .rc-calendar-year-panel-decade-select {
@@ -875,7 +858,7 @@
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  right: 0;
+  right: 16px;
 }
 .rc-calendar-year-panel-body {
   -ms-flex: 1;
@@ -900,7 +883,7 @@
   width: 46px;
   margin: 0 auto;
   color: #212529;
-  border-radius: 4px 4px;
+  border-radius: 4px;
   height: 36px;
   padding: 0;
   background: transparent;
@@ -909,7 +892,7 @@
 }
 .rc-calendar-year-panel-year:hover {
   color: #212529;
-  background: #fcecd9;
+  background: #f5f5f5;
   cursor: pointer;
 }
 .rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year {
@@ -925,7 +908,7 @@
   top: 0;
   bottom: 0;
   right: auto;
-  width: 288px;
+  width: 260px;
   background: #ffffff;
   z-index: 10;
   position: absolute;
@@ -939,9 +922,8 @@
   display: none;
 }
 .rc-calendar-decade-panel-header {
-  padding: 0 10px;
-  height: 34px;
-  line-height: 34px;
+  height: 48px;
+  line-height: 48px;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-pack: center;
@@ -954,51 +936,45 @@
    -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #eee;
 }
 .rc-calendar-decade-panel-header > a {
-  height: 100%;
-  font-weight: bold;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-pack: center;
       justify-content: center;
   -ms-flex-align: center;
       align-items: center;
-  padding: 1px 5px;
-  text-align: center;
-  width: 30px;
   color: #212529;
-}
-.rc-calendar-decade-panel-header > a:hover {
   cursor: pointer;
-  color: #ed7109;
 }
 .rc-calendar-decade-panel-prev-century-btn,
 .rc-calendar-decade-panel-next-century-btn {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  color: #999;
   position: absolute;
-  top: 0;
+  top: 12px;
+}
+.rc-calendar-decade-panel-prev-century-btn:hover,
+.rc-calendar-decade-panel-next-century-btn:hover {
+  background-color: #f5f5f5;
+}
+.rc-calendar-decade-panel-next-century-btn {
+  right: 16px;
 }
 .rc-calendar-decade-panel-next-century-btn:after {
+  width: 20px;
   content: '»';
 }
 .rc-calendar-decade-panel-prev-century-btn {
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  left: 0;
+  left: 16px;
 }
 .rc-calendar-decade-panel-prev-century-btn:after {
+  width: 20px;
   content: '«';
 }
-.rc-calendar-decade-panel-next-century-btn {
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  right: 0;
-}
 .rc-calendar-decade-panel-body {
   -ms-flex: 1;
       flex: 1;
@@ -1033,7 +1009,7 @@
   text-align: center;
 }
 .rc-calendar-decade-panel-decade:hover {
-  background: #fcecd9;
+  background: #f5f5f5;
   cursor: pointer;
 }
 .rc-calendar-decade-panel-selected-cell .rc-calendar-decade-panel-decade {
@@ -1041,7 +1017,7 @@
   color: #fff;
 }
 .rc-calendar-decade-panel-selected-cell .rc-calendar-decade-panel-decade:hover {
-  background: #f09f3f;
+  background: #ff7600;
   color: #fff;
 }
 .rc-calendar-decade-panel-last-century-cell .rc-calendar-decade-panel-decade,