Change datePicker less file to scss file

diff --git a/wcfsetup/install/files/style/datePicker.less b/wcfsetup/install/files/style/datePicker.less
deleted file mode 100644 (file)
index 3e63170..0000000
--- a/wcfsetup/install/files/style/datePicker.less
+++ /dev/null
@@ -1,136 +0,0 @@
-.inputAddon > .inputDatePicker {
-       background-color: @wcfInputBackgroundColor !important;
-       cursor: pointer;
-       flex: 0 1 150px;
-       min-width: 150px;
-}
-
-.datePicker {
-       background-color: @wcfDropdownBackgroundColor;
-       border: 1px solid @wcfDropdownBorderColor;
-       border-radius: 3px;
-       color: @wcfDropdownColor;
-       opacity: 0;
-       position: absolute;
-       transition: visibility .3s linear .3s, opacity .3s linear;
-       visibility: hidden;
-       width: 240px;
-       z-index: 450;
-       
-       .boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
-       
-       &.active {
-               opacity: 1;
-               transition-delay: 0s;
-               visibility: visible;
-       }
-       
-       &.datePickerTime > footer {
-               display: block;
-       }
-       
-       > .elementPointer {
-               border-color: @wcfDropdownBorderColor transparent;
-               border-style: solid;
-               border-width: 0 8px 8px;
-               
-               > span {
-                       border-color: @wcfDropdownBackgroundColor transparent;
-                       border-style: solid;
-                       border-width: 0 6px 6px;
-                       left: -6px;
-                       position: absolute;
-                       top: 2px;
-               }
-               
-               &.flipVertical {
-                       border-width: 8px 8px 0;
-                       
-                       > span {
-                               border-width: 6px 6px 0;
-                       }
-               }
-       }
-       
-       > header,
-       > footer {
-               padding: @wcfGapSmall;
-               position: relative;
-               text-align: center;
-       }
-       
-       > header > a {
-               display: none;
-               position: absolute;
-               top: 50%;
-               transform: translateY(-50%);
-               
-               &.active {
-                       display: block;
-               }
-               
-               &.previous {
-                       left: @wcfGapSmall;
-               }
-               
-               &.next {
-                       right: @wcfGapSmall;
-               }
-       }
-       
-       > ul {
-               border-top: 1px solid @wcfDropdownBorderColor;
-               
-               // hide borders
-               margin: 0 -1px -1px 0;
-               
-               > li {
-                       display: flex;
-                       
-                       > a,
-                       > span {
-                               border: 1px solid @wcfDropdownBorderColor;
-                               border-width: 0 1px 1px 0;
-                               display: block;
-                               flex: 1;
-                               padding: @wcfGapTiny 0;
-                               text-align: center;
-                       }
-                       
-                       > a {
-                               background-color: @wcfContainerAccentBackgroundColor;
-                               color: @wcfColor;
-                               
-                               &:hover {
-                                       text-decoration: none;
-                               }
-                               
-                               &.active,
-                               &:not(.otherMonth):hover {
-                                       background-color: @wcfContainerHoverBackgroundColor;
-                               }
-                               
-                               &.otherMonth {
-                                       background-color: @wcfContainerBackgroundColor;
-                                       color: @wcfDimmedColor;
-                                       cursor: default;
-                               }
-                       }
-                       
-                       > span {
-                               background-color: @wcfTabularBoxBackgroundColor;
-                               border-right-color: @wcfTabularBoxBackgroundColor;
-                               color: @wcfTabularBoxColor;
-                               font-size: .85rem;
-                               text-transform: uppercase;
-                               
-                               .textShadow(@wcfTabularBoxBackgroundColor);
-                       }
-               }
-       }
-       
-       > footer {
-               display: none;
-       }
-       
-}

diff --git a/wcfsetup/install/files/style/ui/datePicker.scss b/wcfsetup/install/files/style/ui/datePicker.scss
new file mode 100644 (file)
index 0000000..237b29c
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/datePicker.scss
@@ -0,0 +1,137 @@
+// TODO: overhaul file
+
+.inputAddon > .inputDatePicker {
+       // TODO: background-color: @wcfInputBackgroundColor !important;
+       cursor: pointer;
+       flex: 0 1 150px;
+       min-width: 150px;
+}
+
+.datePicker {
+       background-color: $wcfDropdownBackground;
+       border: 1px solid $wcfDropdownBorder;
+       border-radius: 3px;
+       color: $wcfDropdownText;
+       opacity: 0;
+       position: absolute;
+       transition: visibility .3s linear .3s, opacity .3s linear;
+       visibility: hidden;
+       width: 240px;
+       z-index: 450;
+       
+       @include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
+       
+       &.active {
+               opacity: 1;
+               transition-delay: 0s;
+               visibility: visible;
+       }
+       
+       &.datePickerTime > footer {
+               display: block;
+       }
+       
+       > .elementPointer {
+               border-color: $wcfDropdownBorder transparent;
+               border-style: solid;
+               border-width: 0 8px 8px;
+               
+               > span {
+                       border-color: $wcfDropdownBackground transparent;
+                       border-style: solid;
+                       border-width: 0 6px 6px;
+                       left: -6px;
+                       position: absolute;
+                       top: 2px;
+               }
+               
+               &.flipVertical {
+                       border-width: 8px 8px 0;
+                       
+                       > span {
+                               border-width: 6px 6px 0;
+                       }
+               }
+       }
+       
+       > header,
+       > footer {
+               padding: $wcfGapSmall;
+               position: relative;
+               text-align: center;
+       }
+       
+       > header > a {
+               display: none;
+               position: absolute;
+               top: 50%;
+               transform: translateY(-50%);
+               
+               &.active {
+                       display: block;
+               }
+               
+               &.previous {
+                       left: $wcfGapSmall;
+               }
+               
+               &.next {
+                       right: $wcfGapSmall;
+               }
+       }
+       
+       > ul {
+               border-top: 1px solid $wcfDropdownBorder;
+               
+               // hide borders
+               margin: 0 -1px -1px 0;
+               
+               > li {
+                       display: flex;
+                       
+                       > a,
+                       > span {
+                               border: 1px solid $wcfDropdownBorder;
+                               border-width: 0 1px 1px 0;
+                               display: block;
+                               flex: 1;
+                               padding: $wcfGapTiny 0;
+                               text-align: center;
+                       }
+                       
+                       > a {
+                               // TODO: background-color: @wcfContainerAccentBackgroundColor;
+                               // TODO: color: @wcfColor;
+                               
+                               &:hover {
+                                       text-decoration: none;
+                               }
+                               
+                               &.active,
+                               &:not(.otherMonth):hover {
+                                       // TODO:        background-color: @wcfContainerHoverBackgroundColor;
+                               }
+                               
+                               &.otherMonth {
+                                       // TODO:        background-color: @wcfContainerBackgroundColor;
+                                       // TODO: color: @wcfDimmedColor;
+                                       cursor: default;
+                               }
+                       }
+                       
+                       > span {
+                               // TODO: background-color: @wcfTabularBoxBackgroundColor;
+                               // TODO: border-right-color: @wcfTabularBoxBackgroundColor;
+                               // TODO: color: @wcfTabularBoxColor;
+                               font-size: .85rem;
+                               text-transform: uppercase;
+                               
+                               // TODO: .textShadow(@wcfTabularBoxBackgroundColor);
+                       }
+               }
+       }
+       
+       > footer {
+               display: none;
+       }
+}