wonder-image 1.2.0

package/src/build/frontend/css/components/button.css

@@ -0,0 +1,107 @@
+/* Button */
+.btn-group,
+.badge-group {
+display: flex !important;
+flex-wrap: wrap !important;
+width: 100%;
+gap: calc(var(--spacer) * 2);
+}
+
+.btn {
+position: relative;
+float: left;
+width: auto;
+padding: 10px 12px !important;
+border-width: var(--button-border-width);
+border-style: solid;
+border-radius: var(--button-border-radius);
+box-sizing: border-box !important;
+text-decoration: none !important;
+font-size: var(--button-font-size) !important;
+font-weight: var(--button-font-weight) !important;
+line-height: var(--button-line-height) !important;
+transition: .3s;
+cursor: pointer;
+-webkit-touch-callout: none !important;
+-webkit-user-select: none !important;
+-khtml-user-select: none !important;
+-moz-user-select: none !important;
+-ms-user-select: none !important;
+user-select: none !important; 
+}
+.btn.btn-lg {
+padding: 16px !important;
+}
+.btn.btn-sm {
+padding: 5px 6px !important;
+}
+.btn:hover {
+text-decoration: none !important;
+}
+.btn.wi-submit {
+border-radius: var(--input-border-radius) !important;
+}
+.btn:disabled {
+opacity: .6;
+cursor: not-allowed;
+}
+
+
+/* Button icon */
+.btn.btn-icon {
+padding: 10px !important;
+width: calc(var(--button-line-height) + (var(--button-border-width) * 2) + 20px) !important;
+text-align: center !important;
+}
+.btn.btn-icon-right i,
+.btn.btn-arrow i,
+.btn.btn-icon-left i {
+position: relative;
+float: left;
+height: var(--button-line-height);
+font-size: var(--button-line-height);
+line-height: var(--button-line-height);
+transition: .3s;
+}
+.btn.btn-arrow i,
+.btn.btn-icon-right i {
+float: right;
+margin-left: 6px;
+}
+.btn.btn-icon-left i {
+margin-right: 6px;
+}
+.btn.btn-arrow:hover {
+padding-right: 7px !important;
+}
+.btn.btn-arrow:hover i {
+margin-left: 11px;
+}
+
+
+/* Badge */
+.badge {
+position: relative;
+float: left;
+width: auto;
+font-size: var(--badge-font-size) !important;
+font-weight: var(--badge-font-weight) !important;
+line-height: var(--badge-line-height) !important;
+padding: 3px 6px;
+border-width: var(--badge-border-width) !important;
+border-style: solid;
+border-radius: var(--badge-border-radius);
+text-decoration: none;
+box-sizing: border-box !important;
+-webkit-touch-callout: none !important;
+-webkit-user-select: none !important;
+-khtml-user-select: none !important;
+-moz-user-select: none !important;
+-ms-user-select: none !important;
+user-select: none !important; 
+}
+.badge.badge-icon {
+padding: 3px !important;
+width: calc(var(--badge-line-height) + (var(--badge-border-width) * 2) + 6px) !important;
+text-align: center !important;
+}

package/src/build/frontend/css/components/dropdown.css

@@ -0,0 +1,118 @@
+.wi-box,
+.wi-dropdown-box {
+width: 100%;
+padding: 16px;
+box-sizing: border-box;
+background: #ffffff;
+border-radius: var(--button-border-radius);
+border-color: var(--dropdown-border-color);
+border-style: solid;
+border-width: var(--dropdown-border-width);
+}
+.wi-dropdown-box .wi-dropdown-title {
+width: 100%;
+height: var(--line-height);
+line-height: var(--line-height);
+font-size: var(--font-size);
+transition: .3s;
+color: var(--modal-tx);
+cursor: pointer;
+-webkit-touch-callout: none !important;
+-webkit-user-select: none !important;
+-khtml-user-select: none !important;
+-moz-user-select: none !important;
+-ms-user-select: none !important;
+user-select: none !important; 
+}
+.wi-dropdown-box .wi-dropdown-title i {
+position: relative;
+float: right;
+height: var(--line-height);
+line-height: var(--line-height);
+font-size: var(--font-size);
+opacity: .7;
+color: var(--modal-tx);
+transition: .3s;
+}
+.wi-dropdown-box .wi-dropdown-title i:hover {
+opacity: 1;
+}
+
+.wi-dropdown-box .wi-dropdown-content {
+width: 100%;
+max-height: 0px;
+display: flex;
+flex-direction: column;
+box-sizing: border-box;
+overflow: hidden;
+transition-delay: 1s, 250ms;
+transition: .3s;
+}
+.wi-dropdown-box.wi-show > .wi-dropdown-title {
+margin-bottom: 16px;
+}
+.wi-dropdown-box.wi-show > .wi-dropdown-content {
+max-height: 1000vh;
+overflow: visible;
+}
+
+.wi-dropdown-btn.wi-show:first-child:after {
+content: "";
+position: absolute;
+float: left;
+width: 100%;
+left: 0;
+height: calc(100% + var(--spacer));
+}
+.wi-dropdown-btn .wi-dropdown-list {
+position: absolute;
+float: right;
+right: 0;
+top: 100%;
+min-width: 160px;
+max-height: 0;
+border-radius: var(--button-border-radius);
+padding: 0px 0px;
+background: var(--dropdown-bg);
+border-color: var(--dropdown-border-color);
+border-style: solid;
+border-top-width: 0px;
+border-right-width: var(--dropdown-border-width);
+border-bottom-width: 0px;
+border-left-width: var(--dropdown-border-width);
+overflow: hidden;
+transition: .3s;
+z-index: 101;
+}
+.wi-dropdown-btn.wi-show .wi-dropdown-list {
+max-height: 100vh;
+padding: calc(var(--spacer) * 2);
+margin-top: calc(var(--spacer) * 1);
+border-top-width: var(--dropdown-border-width);
+border-bottom-width: var(--dropdown-border-width);
+overflow: visible;
+}
+.wi-dropdown-btn .wi-dropdown-list .wi-dropdown-item {
+position: relative;
+float: left;
+width: 100%;
+font-size: var(--text-font-size);
+line-height: var(--text-line-height);
+padding: calc(var(--spacer) * 2) calc(var(--spacer) * 2);
+border-radius: calc(var(--button-border-radius) / 2);
+text-decoration: none;
+color: var(--dropdown-tx);
+background: transparent;
+transition: .3s;
+box-sizing: border-box;
+}
+.wi-dropdown-btn .wi-dropdown-list .wi-dropdown-item:hover {
+background: var(--dropdown-bg-hover);
+}
+.wi-dropdown-btn .wi-dropdown-list .wi-dropdown-divider {
+position: relative;
+float: left;
+width: 100%;
+border-top: 1px solid var(--dropdown-border-color);
+margin: calc(var(--spacer) * 2) 0;
+}

package/src/build/frontend/css/components/form/address.css

@@ -0,0 +1,26 @@
+.pac-container {
+font-family: var(--input-tx-family);
+background: var(--input-bg-color);
+border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
+border: var(--input-border-bottom) solid var(--input-border-focus);
+margin-top: calc(0px - var(--input-border-bottom));
+}
+.pac-logo::after,
+.pac-icon {
+display: none;
+}
+.pac-item-query {
+font-size: 14px;
+}
+.pac-item {
+font-size: 14px;
+line-height: 14px;
+padding: 12px 16px;
+cursor: pointer;
+text-overflow: ellipsis;
+overflow: hidden;
+white-space: nowrap;
+text-align: left;
+border-top: 1px solid #e6e6e6;
+color: var(--input-tx-color);;
+}

package/src/build/frontend/css/components/form/checkbox.css

@@ -0,0 +1,65 @@
+.wi-input-container.checkbox .wi-label {
+position: relative;
+float: left;
+top: 0;
+left: 0;
+width: calc(100% - var(--input-border-left) - var(--input-border-right));
+margin-left: var(--input-border-left);
+margin-right: var(--input-border-right);
+margin-top: 0;
+height: 16px;
+font-size: 16px;
+line-height: 16px;
+}
+.wi-input-container .wi-checkbox-list {
+width: calc(100% - 32px - var(--input-border-left) - var(--input-border-right));
+padding: 0px calc(16px + var(--input-border-right)) 0px calc(16px + var(--input-border-left));
+}
+.wi-input-container .wi-checkbox-container {
+width: 100%;
+margin-top: calc(var(--spacer) * 4);
+}
+.wi-input-container .wi-checkbox-container:first-child {
+margin: 0;
+}
+.wi-input-container .wi-checkbox-container .wi-checkbox {
+width: 24px;
+height: 24px;
+line-height: 24px;
+border-radius: var(--input-border-radius);
+border: var(--input-border-bottom) solid var(--input-border-color);
+background: var(--input-bg-color);
+transition: .1s;
+cursor: pointer;
+}
+.wi-input-container .wi-checkbox-container .wi-checkbox:hover {
+border: var(--input-border-bottom) solid var(--input-border-focus);
+}
+.wi-input-container .wi-checkbox-container .wi-checkbox:checked {
+border: var(--input-border-bottom) solid var(--input-border-focus);
+}
+.wi-input-container .wi-checkbox-container .wi-checkbox-label {
+width: calc(100% - 30px);
+margin-left: 6px;
+margin-top: calc((24px - var(--text-line-height)) / 2);
+line-height: var(--text-line-height);
+font-size: var(--text-font-size);
+font-weight: var(--text-font-weight);
+cursor: pointer;
+} 
+.wi-input-container .wi-checkbox-container .wi-checkbox-icon {
+position: absolute;
+width: calc(22px + (var(--input-border-bottom) * 2));
+height: calc(22px + (var(--input-border-bottom) * 2));
+line-height: calc(22px + (var(--input-border-bottom) * 2));
+text-align: center;
+color: var(--input-border-focus);
+font-size: 13px;
+pointer-events: none;
+z-index: 2;
+transition: .1s;
+opacity: 0;
+}
+.wi-input-container .wi-checkbox-container:has(.wi-checkbox:checked) .wi-checkbox-icon {
+opacity: 1;
+}

package/src/build/frontend/css/components/form/date.css

@@ -0,0 +1,133 @@
+.wi-input-container.daterange .wi-daterange-to,
+.wi-input-container.datetimerange .wi-datetimerange-to {
+position: absolute;
+width: 95px;
+top: 0;
+border-color: transparent;
+left: calc(110px);
+background: none;
+}
+.wi-input-container.datetimerange .wi-datetimerange-to {
+width: 130px;
+left: calc(145px);
+}
+.wi-input-container.daterange span.wi-input-text,
+.wi-input-container.datetimerange span.wi-input-text {
+position: absolute;
+top: calc(var(--input-border-top) + 28px);
+left: calc(90px + 16px + var(--input-border-left));
+width: 16px;
+height: 16px;
+line-height: 16px;
+font-size: 16px;
+text-align: center;
+color: var(--input-tx-color);
+}
+.wi-input-container.datetimerange span.wi-input-text {
+left: calc(127.5px + 16px + var(--input-border-left));
+}
+
+/* Date Picker */
+#ui-datepicker-div {
+font-family: var(--input-tx-family);
+background: var(--input-bg-color);
+border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
+border: var(--input-border-bottom) solid var(--input-border-focus);
+margin-top: calc(0px - var(--input-border-bottom));
+}
+#ui-datepicker-div .ui-datepicker-header {
+width: 100%;
+height: 30px;
+line-height: 30px;
+padding: 0;
+background: none;
+border: none;
+}
+#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title {
+width: calc(100% - 60px);
+height: 30px;
+line-height: 30px;
+margin: 0 30px;
+color: var(--input-label-color);
+}
+#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title select{
+width: auto;
+line-height: 30px;
+color:  var(--input-label-color);
+}
+#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title select.ui-datepicker-month{ margin-left: 5px; }
+#ui-datepicker-div .ui-datepicker-header .ui-corner-all {
+top: 0;
+width: 30px;
+height: 30px;
+color: var(--input-label-color);
+border-radius: 0;
+}
+#ui-datepicker-div .ui-datepicker-header .ui-corner-all:hover{
+color: var(--input-label-color);
+border: none;
+background: none;
+cursor: pointer;
+}
+#ui-datepicker-div .ui-datepicker-header .ui-corner-all.ui-datepicker-next { right: 0; }
+#ui-datepicker-div .ui-datepicker-header .ui-corner-all.ui-datepicker-prev { left: 0; }
+#ui-datepicker-div .ui-datepicker-calendar th { 
+padding: 2px;
+color: var(--input-label-color);
+}
+#ui-datepicker-div .ui-datepicker-calendar td { 
+border: none; 
+padding: 2px;
+}
+
+#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-highlight {
+background: var(--input-date-default);
+color: #ffffff;
+}
+#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active {
+background: var(--input-date-active);
+color: #ffffff;
+}
+#ui-datepicker-div .ui-datepicker-calendar td a {
+border: none;
+text-align: center;
+border-radius: var(--input-date-border-radius);
+background: var(--input-date-bg);
+}
+
+#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-hover { opacity: .8; }
+#ui-datepicker-div .ui-datepicker-calendar td span {
+border: none;
+text-align: center;
+}
+
+#ui-datepicker-div .ui-timepicker-div {
+width: 100%;
+margin-bottom: .4em;
+}
+#ui-datepicker-div .ui_tpicker_time_label {
+line-height: 26px;
+}
+#ui-datepicker-div .ui-timepicker-div .ui_tpicker_hour,
+#ui-datepicker-div .ui-timepicker-div .ui_tpicker_minute {
+position: relative;
+float: left;
+margin-left: 5px;
+}
+#ui-datepicker-div .ui-timepicker-div .ui_tpicker_minute:before {
+display: none;
+}
+#ui-datepicker-div .ui-timepicker-div .ui_tpicker_hour select,
+#ui-datepicker-div .ui-timepicker-div .ui_tpicker_minute select {
+width: 35px;
+font-size: 16px;
+line-height: 16px;
+padding: 5px;
+border: 1px solid var(--input-border-focus);
+border-radius: var(--input-border-radius);
+background: transparent;
+text-align: center;
+}
+#ui-datepicker-div .ui-datepicker-buttonpane {
+display: none;
+}

package/src/build/frontend/css/components/form/input.css

@@ -0,0 +1,176 @@
+/* Reset */
+button,
+input,
+select,
+textarea,
+label {
+position: relative;
+float: left;
+border: none;
+border-radius: 0;
+outline: none;
+-webkit-box-shadow: none;
+box-shadow: none;
+padding: 0;
+margin: 0;
+-webkit-appearance: none;
+-moz-appearance: none;
+appearance: none;
+font-family: var(--font-family);
+background: none;
+}
+
+/* Input */
+.wi-input-container {
+width: 100%;
+}
+.wi-input-container .wi-input {
+width: calc(100% - 32px - var(--input-border-left) - var(--input-border-right));
+height: 16px;
+line-height: 16px;
+padding: 28px 16px 12px 16px;
+font-size: 16px;
+font-family: var(--input-tx-family);
+font-weight: var(--input-tx-weight);
+border-radius: var(--input-border-radius);
+border-top: var(--input-border-top) solid var(--input-border-color);
+border-right: var(--input-border-right) solid var(--input-border-color);
+border-bottom: var(--input-border-bottom) solid var(--input-border-color);
+border-left: var(--input-border-left) solid var(--input-border-color);
+color: var(--input-tx-color);
+background: var(--input-bg-color);
+text-align: left;
+transition: .2s;
+}
+.wi-input-container.textarea .wi-input {
+resize: none;
+height: 40px;
+}
+
+/* Input submit */
+.wi-input-submit {
+line-height: 24px !important;
+padding: 16px !important;
+font-size: 16px !important;
+border-width: var(--input-border-bottom) !important;
+}
+
+/* Input error */
+.wi-input-container.input-error .wi-input {
+border-top: var(--input-border-top) solid var(--danger-color);
+border-right: var(--input-border-right) solid var(--danger-color);
+border-bottom: var(--input-border-bottom) solid var(--danger-color);
+border-left: var(--input-border-left) solid var(--danger-color);
+}
+
+
+/* Label */
+.wi-input-container .wi-label{
+position: absolute;
+float: left;
+top: var(--input-border-top);
+left: var(--input-border-left);
+width: calc(100% - 32px - var(--input-border-left) - var(--input-border-right));
+margin: 20px 16px;
+line-height: 16px;
+font-size: 16px;
+font-weight: var(--input-label-weight);
+color: var(--input-label-color);
+font-family: var(--input-tx-family);
+background: transparent;
+cursor: text;
+text-align: left;
+z-index: 3;
+transition: .3s;
+-webkit-touch-callout: none !important;
+-webkit-user-select: none !important;
+-khtml-user-select: none !important;
+-moz-user-select: none !important;
+-ms-user-select: none !important;
+user-select: none !important; 
+display: -webkit-box;
+-webkit-line-clamp: 1;
+-webkit-box-orient: vertical;  
+overflow: hidden;
+}
+.wi-input-container.compiled .wi-label {
+height: 12px;
+line-height: 12px;
+font-size: 12px;
+color: var(--input-label-focus-color);
+font-weight: var(--input-label-focus-weight);
+margin: 8px 16px;
+cursor: default;
+}
+
+/* Input icon */
+.wi-input-container.wi-input-icon-start .wi-input,
+.wi-input-container.wi-input-icon-end .wi-input {
+width: calc(100% - 66px - var(--input-border-left) - var(--input-border-right)); 
+}
+.wi-input-container.wi-input-icon-start .wi-input { padding-left: 50px; }
+.wi-input-container.wi-input-icon-end .wi-input { padding-right: 50px; }
+
+.wi-input-container.wi-input-icon-start .wi-label,
+.wi-input-container.wi-input-icon-end .wi-label {
+width: calc(100% - 66px - var(--input-border-left) - var(--input-border-right));
+}
+.wi-input-container.wi-input-icon-start .wi-label{ margin-left: 50px; }
+.wi-input-container.wi-input-icon-end .wi-label{ margin-right: 0; }
+
+.wi-input-container .wi-input-icon {
+position: absolute;
+top: var(--input-border-top);
+width: 22px;
+height: 28px;
+line-height: 28px;
+font-size: 20px;
+text-align: center;
+border-radius: var(--input-border-radius);
+color: var(--input-label-color);
+z-index: 9;
+}
+.wi-input-container.wi-input-icon-start .wi-input-icon { 
+left: var(--input-border-left);
+padding: 14px 12px 14px 16px; 
+}
+.wi-input-container.wi-input-icon-end .wi-input-icon { 
+right: var(--input-border-right);
+padding: 14px 16px 14px 12px; 
+}
+
+/* Input status */
+.wi-input-container .wi-input:disabled { background: var(--input-disabled-bg); }
+
+.wi-input-container .wi-input:focus,
+.wi-input-container .wi-input:valid,
+.wi-input-container .select-selected,
+.wi-input-container .select-items {
+border-color: var(--input-border-focus);
+}
+
+.wi-input-container.selector-show .wi-input {
+border-color: var(--input-border-focus);
+border-radius: var(--input-border-radius) var(--input-border-radius) var(--input-border-radius) 0;
+}
+
+.wi-input-container .alert-error {
+position: relative;
+float: left;
+width: calc(100% - var(--input-border-left) - var(--input-border-right));
+margin: 4px var(--input-border-left) 0px var(--input-border-right);
+font-size: 12px;
+line-height: 16px;
+height: 16px;
+text-align: left;
+font-weight: 300;
+color: var(--danger-color);
+}
+.wi-input-container .alert-error i {
+position: relative;
+float: left;
+font-size: 16px;
+margin-right: 8px;
+}
+.wi-input-container .alert-error { display: none; }
+.wi-input-container.input-error .alert-error { display: block; }

package/src/build/frontend/css/components/form/select.css

@@ -0,0 +1,69 @@
+.wi-input-container.wi-list-active  {
+z-index: 10;
+overflow: unset;
+}
+.wi-input-container.wi-list-active .wi-input {
+border-radius: var(--input-border-radius) var(--input-border-radius) 0 0;
+}
+.wi-input-container .wi-input-list {
+position: absolute;
+float: left;
+top: calc(56px + var(--input-border-top));
+width: calc(100% - var(--input-border-bottom) - var(--input-border-bottom));
+max-height: 0px;
+color: var(--input-tx-color);
+background: var(--input-bg-color);
+border-top: 0px solid var(--input-border-focus);
+border-left: var(--input-border-bottom) solid var(--input-border-focus);
+border-right: var(--input-border-bottom) solid var(--input-border-focus);
+border-bottom: 0px solid var(--input-border-focus);
+border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
+transition: .3s;
+overflow: hidden;
+z-index: 2;
+}
+.wi-input-container.wi-list-active .wi-input-list {
+border-top: var(--input-border-bottom) solid var(--input-border-focus);
+border-bottom: var(--input-border-bottom) solid var(--input-border-focus);
+max-height: 120px;
+overflow: scroll;
+z-index: 2;
+transition: .3s;
+}
+.wi-input-container.search-url.wi-list-active .wi-input-list {
+max-height: 200px;
+padding-bottom: 30px;
+}
+.wi-input-container .wi-input-list .wi-input-list-value,
+.wi-input-container .wi-input-list .wi-input-list-footer {
+width: calc(100% - 32px);
+font-size: 16px;
+height: auto;
+max-height: auto;
+line-height: 16px;
+padding: 8px 16px;
+cursor: pointer;
+background: var(--input-bg-color);
+transition: .3s;
+}
+.wi-input-container .wi-input-list .wi-input-list-footer {
+position: absolute;
+bottom: 0;
+border-top: var(--input-border-bottom) solid var(--input-border-focus);
+background: var(--input-select-hover);
+font-size: 14px;
+height: 14px;
+line-height: 14px;
+}
+.wi-input-container .wi-input-list .wi-input-list-value:hover {
+background: var(--input-select-hover);
+}
+.wi-input-container .wi-input-list .wi-input-list-value:last-child { 
+border: none 
+}
+.wi-input-container .wi-input.select-selected {
+cursor: pointer;
+}
+.wi-input-container .wi-input-list .same-as-selected {
+font-weight: 500;
+}