wonder-image 1.2.0

package/src/build/frontend/css/class/position.css

@@ -0,0 +1,351 @@
+/* Position */
+.p-r { position: relative !important; }
+.p-a { position: absolute !important; }
+.p-f { position: fixed !important; }
+.p-u { position: unset !important; }
+
+/* Float */
+.f-start { float: left !important; }
+.f-end { float: right !important; }
+.f-none { float: none !important; }
+
+/* Absolut position */
+.top { top: 0 !important; }
+.end {
+float: right !important;
+right: 0 !important;
+}
+.bottom { bottom: 0 !important; }
+.start {
+float: left !important;
+left: 0 !important;
+}
+
+/* Center element */
+.center {
+position: absolute;
+margin: 0 !important;
+top: 50% !important;
+left: 50% !important;
+transform: translate(-50%,-50%) !important;
+}
+.c-h{
+margin-top: 0 !important;
+margin-bottom: 0 !important;
+top: 50% !important;
+transform: translateY(-50%) !important;
+}
+.c-w{
+margin-left: 0 !important;
+margin-right: 0 !important;
+left: 50% !important;
+transform: translateX(-50%) !important;
+}
+
+/* Format */
+.f-1-1{
+width: 100%;
+padding-top: 100%;
+}
+.f-1-2{
+width: 100%;
+padding-top: calc(100% * 2);
+}
+.f-2-1{
+width: 100%;
+padding-top: calc(100% / 2);
+}
+.f-2-3{
+width: 100%;
+padding-top: calc((100% / 2) * 3);
+}
+.f-3-2{
+width: 100%;
+padding-top: calc((100% / 3) * 2);
+}
+.f-1-3{
+width: 100%;
+padding-top: calc((100% / 1) * 3);
+}
+.f-3-1{
+width: 100%;
+padding-top: calc((100% / 3) * 1);
+}
+.f-16-9{
+width: 100%;
+padding-top: calc((100% / 16) * 9);
+}
+.f-9-16{
+width: 100%;
+padding-top: calc((100% / 9) * 16);
+}    
+
+/* Display */
+.d-block { display: block !important; }
+.d-none { display: none !important; }
+.d-flex { display: flex !important; }
+.d-grid { display: grid !important; }
+.d-table { display: table !important; }
+.d-inline { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+.d-inline-flex { display: inline-flex !important; }
+.d-inline-table { display: inline-table !important; }
+
+/* Justify */
+.j-content-start { justify-content: start; }
+.j-content-center { justify-content: center; }
+.j-content-end { justify-content: end; }
+
+.j-self-start { justify-self: start; }
+.j-self-center { justify-self: center; }
+.j-self-end { justify-self: end; }
+
+/* Flex position */
+.flex-wrap { flex-wrap: wrap; }
+.flex-wrap-reverse { flex-wrap: wrap-reverse; }
+
+@media (max-width: 1000px) {
+/* Position */
+.p-t-r { position: relative !important; }
+.p-t-a { position: absolute !important; }
+.p-t-f { position: fixed !important; }
+.p-t-u { position: unset !important; }
+
+/* Float */
+.f-t-start { float: left !important; }
+.f-t-end { float: right !important; }
+.f-t-none { float: none !important; }
+
+/* Absolut position */
+.t-top-off { top: unset !important; }
+.t-end-off { right: unset !important; }
+.t-bottom-off { bottom: unset !important; }
+.t-start-off { left: unset !important; }
+
+.t-top { top: 0 !important; }
+.t-end {
+float: right !important;
+right: 0 !important;
+}
+.t-bottom { bottom: 0 !important; }
+.t-start {
+float: left !important;
+left: 0 !important;
+}
+
+/* Center element */
+.t-center-off {
+position: absolute;
+margin: 0 !important;
+top: 0% !important;
+left: 0% !important;
+transform: none !important;
+}
+.t-c-h-off {
+margin-top: 0 !important;
+margin-bottom: 0 !important;
+top: 0% !important;
+transform: none !important;
+}
+.t-c-w-off {
+margin-left: 0 !important;
+margin-right: 0 !important;
+left: 0% !important;
+transform: none !important;
+}
+
+.t-center {
+position: absolute;
+margin: 0 !important;
+top: 50% !important;
+left: 50% !important;
+transform: translate(-50%,-50%) !important;
+}
+.t-c-h {
+margin-top: 0 !important;
+margin-bottom: 0 !important;
+top: 50% !important;
+transform: translateY(-50%) !important;
+}
+.t-c-w {
+margin-left: 0 !important;
+margin-right: 0 !important;
+left: 50% !important;
+transform: translateX(-50%) !important;
+}
+
+/* Format */
+.f-t-1-1{
+width: 100%;
+padding-top: 100%;
+}
+.f-t-1-2{
+width: 100%;
+padding-top: calc(100% * 2);
+}
+.f-t-2-1{
+width: 100%;
+padding-top: calc(100% / 2);
+}
+.f-t-2-3{
+width: 100%;
+padding-top: calc((100% / 2) * 3);
+}
+.f-t-3-2{
+width: 100%;
+padding-top: calc((100% / 3) * 2);
+}
+.f-t-1-3{
+width: 100%;
+padding-top: calc((100% / 1) * 3);
+}
+.f-t-3-1{
+width: 100%;
+padding-top: calc((100% / 3) * 1);
+}
+.f-t-16-9{
+width: 100%;
+padding-top: calc((100% / 16) * 9);
+}
+.f-t-9-16{
+width: 100%;
+padding-top: calc((100% / 9) * 16);
+}
+
+/* Justify */
+.j-t-content-start { justify-content: start; }
+.j-t-content-center { justify-content: center; }
+.j-t-content-end { justify-content: end; }
+
+.j-t-self-start { justify-self: start; }
+.j-t-self-center { justify-self: center; }
+.j-t-self-end { justify-self: end; }
+
+/* Flex position */
+.flex-t-wrap { flex-wrap: wrap; }
+.flex-t-wrap-reverse { flex-wrap: wrap-reverse; }
+
+}
+
+@media (max-width: 768px) {
+/* Position */
+.p-p-r { position: relative !important; }
+.p-p-a { position: absolute !important; }
+.p-p-f { position: fixed !important; }
+.p-p-u { position: unset !important; }
+
+/* Float */
+.f-p-start { float: left !important; }
+.f-p-end { float: right !important; }
+.f-p-none { float: none !important; }
+
+/* Absolut position */
+.p-top-off { top: unset !important; }
+.p-end-off { right: unset !important; }
+.p-bottom-off { bottom: unset !important; }
+.p-start-off { left: unset !important; }
+
+.p-top { top: 0 !important; }
+.p-end {
+float: right !important;
+right: 0 !important;
+}
+.p-bottom { bottom: 0 !important; }
+.p-start {
+float: left !important;
+left: 0 !important;
+}
+
+/* Center element */
+.p-center-off {
+position: absolute;
+margin: 0 !important;
+top: 0% !important;
+left: 0% !important;
+transform: translate(-0%,-0%) !important;
+}
+.p-c-h-off {
+margin-top: 0 !important;
+margin-bottom: 0 !important;
+top: 0% !important;
+transform: translateY(0%) !important;
+}
+.p-c-w-off {
+margin-left: 0 !important;
+margin-right: 0 !important;
+left: 0% !important;
+transform: translateX(-0%) !important;
+}
+
+.p-center {
+position: absolute;
+margin: 0 !important;
+top: 50% !important;
+left: 50% !important;
+transform: translate(-50%,-50%) !important;
+}
+.p-c-h{
+margin-top: 0 !important;
+margin-bottom: 0 !important;
+top: 50% !important;
+transform: translateY(-50%) !important;
+}
+.p-c-w{
+margin-left: 0 !important;
+margin-right: 0 !important;
+left: 50% !important;
+transform: translateX(-50%) !important;
+}
+
+/* Format */
+.f-p-1-1{
+width: 100%;
+padding-top: 100%;
+}
+.f-p-1-2{
+width: 100%;
+padding-top: calc(100% * 2);
+}
+.f-p-2-1{
+width: 100%;
+padding-top: calc(100% / 2);
+}
+.f-p-2-3{
+width: 100%;
+padding-top: calc((100% / 2) * 3);
+}
+.f-p-3-2{
+width: 100%;
+padding-top: calc((100% / 3) * 2);
+}
+.f-p-1-3{
+width: 100%;
+padding-top: calc((100% / 1) * 3);
+}
+.f-p-3-1{
+width: 100%;
+padding-top: calc((100% / 3) * 1);
+}
+.f-p-16-9{
+width: 100%;
+padding-top: calc((100% / 16) * 9);
+}
+.f-p-9-16{
+width: 100%;
+padding-top: calc((100% / 9) * 16);
+}   
+
+/* Justify */
+.j-p-content-start { justify-content: start; }
+.j-p-content-center { justify-content: center; }
+.j-p-content-end { justify-content: end; }
+
+.j-p-self-start { justify-self: start; }
+.j-p-self-center { justify-self: center; }
+.j-p-self-end { justify-self: end; }
+
+/* Flex position */
+.flex-p-wrap { flex-wrap: wrap; }
+.flex-p-wrap-reverse { flex-wrap: wrap-reverse; }
+
+}

package/src/build/frontend/css/class/resize.css

@@ -0,0 +1,24 @@
+.tablet-none,
+.phone-none { display: block; }
+
+th.phone-none,
+th.tablet-none,
+td.phone-none,
+td.tablet-none {
+display: table-cell;
+}
+.pc-none { display: none !important; }
+
+@media (max-width: 1000px) {
+.pc-none { display: block !important; }
+.tablet-none { display: none !important; }
+}
+
+@media (max-width: 768px) {
+.pc-none { display: block !important; }
+.phone-none { display: none !important; }
+th.pc-none,
+td.pc-none {
+display: table-cell !important;
+}
+}

package/src/build/frontend/css/class/section.css

@@ -0,0 +1,41 @@
+section,
+footer {
+position: relative;
+float: left;
+width: 100%;
+padding: calc(var(--spacer) * 10) 0;
+overflow: hidden;
+}
+.content {
+width: calc(100% - 80px);
+max-width: 1200px;
+left: 50%;
+transform: translateX(-50%);
+}
+.content.content-medium { 
+max-width: 700px; 
+}
+.content.content-little { 
+max-width: 500px; 
+}
+.content.content-small { 
+max-width: 400px; 
+}
+section.full-page { 
+height: 100%; 
+padding: 0;
+}
+section.full-page .content { 
+height: calc(100% - 80px);
+margin: calc(var(--spacer) * 10) 0;
+}
+section.intro {
+margin-top: var(--header-height); 
+}
+section.full-page.intro { 
+height: calc(100% - var(--header-height));
+}
+
+@media (max-width: 768px) {
+.content { width: calc(100% - calc(var(--spacer) * 10)); }
+}

package/src/build/frontend/css/class/text.css

@@ -0,0 +1,244 @@
+/* H1,H2,H3,H4,H5,H6 */
+h1,h2,h3,h4,h5,h6, a, p, i {
+margin: 0;
+padding: 0;
+font-size: unset;
+font-weight: unset;
+color: currentColor;
+}
+
+a { cursor: pointer; }
+
+code {
+background: var(--secondary-color-40);
+color: var(--secondary-color-100);
+padding: 4px;
+border-radius: var(--button-border-radius);
+}
+
+.title-big {
+width: 100%;
+font-size: var(--title-big-font-size) !important;
+line-height: var(--title-big-line-height) !important;
+font-family: var(--title-big-font-family) !important;
+font-weight: var(--title-big-font-weight) !important;
+}
+.title {
+width: 100%;
+font-size: var(--title-font-size) !important;
+line-height: var(--title-line-height) !important;
+font-family: var(--title-font-family) !important;
+font-weight: var(--title-font-weight) !important;
+}
+.subtitle {
+width: 100%;
+font-size: var(--subtitle-font-size) !important;
+line-height: var(--subtitle-line-height) !important;
+font-family: var(--subtitle-font-family) !important;
+font-weight: var(--subtitle-font-weight) !important;
+}
+.text {
+width: 100%;
+font-size: var(--text-font-size) !important;
+line-height: var(--text-line-height) !important;
+font-family: var(--text-font-family) !important;
+font-weight: var(--text-font-weight) !important;
+}
+.text-small {
+width: 100%;
+font-size: var(--text-small-font-size) !important;
+line-height: var(--text-small-line-height) !important;
+font-family: var(--text-small-font-family) !important;
+font-weight: var(--text-small-font-weight) !important;
+}
+
+/* Align */
+.a-c { text-align: center !important; }
+.a-l { text-align: left !important; }
+.a-r { text-align: right !important; }
+
+/* Font weight */
+.fw-100 { font-weight: 100 !important; }
+.fw-200 { font-weight: 200 !important; }
+.fw-300 { font-weight: 300 !important; }
+.fw-400 { font-weight: 400 !important; }
+.fw-500 { font-weight: 500 !important; }
+.fw-600 { font-weight: 600 !important; }
+.fw-700 { font-weight: 700 !important; }
+.fw-800 { font-weight: 800 !important; }
+.fw-900 { font-weight: 900 !important; }
+
+/* Decoration */
+.tx-none { text-decoration: none !important; }
+.tx-underline { text-decoration: underline !important; }
+.tx-upper { text-transform: uppercase !important; }
+
+/* Max line */
+.max-line-1 {
+display: -webkit-box;
+-webkit-line-clamp: 1;
+-webkit-box-orient: vertical;  
+overflow: hidden;
+}
+.max-line-2 {
+display: -webkit-box;
+-webkit-line-clamp: 2;
+-webkit-box-orient: vertical;  
+overflow: hidden;
+}
+.max-line-3 {
+display: -webkit-box;
+-webkit-line-clamp: 3;
+-webkit-box-orient: vertical;  
+overflow: hidden;
+}
+.max-line-4 {
+display: -webkit-box;
+-webkit-line-clamp: 4;
+-webkit-box-orient: vertical;  
+overflow: hidden;
+}
+.max-line-5 {
+display: -webkit-box;
+-webkit-line-clamp: 5;
+-webkit-box-orient: vertical;  
+overflow: hidden;
+}
+.max-line-6 {
+display: -webkit-box;
+-webkit-line-clamp: 6;
+-webkit-box-orient: vertical;  
+overflow: hidden;
+}
+.max-line-7 {
+display: -webkit-box;
+-webkit-line-clamp: 7;
+-webkit-box-orient: vertical;  
+overflow: hidden;
+}
+.max-line-8 {
+display: -webkit-box;
+-webkit-line-clamp: 8;
+-webkit-box-orient: vertical;  
+overflow: hidden;
+}
+.max-line-9 {
+display: -webkit-box;
+-webkit-line-clamp: 9;
+-webkit-box-orient: vertical;  
+overflow: hidden;
+}
+.max-line-10 {
+display: -webkit-box;
+-webkit-line-clamp: 10;
+-webkit-box-orient: vertical;  
+overflow: hidden;
+}
+.max-line-11 {
+display: -webkit-box;
+-webkit-line-clamp: 11;
+-webkit-box-orient: vertical;  
+overflow: hidden;
+}
+.max-line-12 {
+display: -webkit-box;
+-webkit-line-clamp: 12;
+-webkit-box-orient: vertical;  
+overflow: hidden;
+}
+
+@media (max-width: 1000px) {
+.t-title-big {
+width: 100%;
+font-size: var(--title-big-font-size) !important;
+line-height: var(--title-big-line-height) !important;
+font-family: var(--title-big-font-family) !important;
+font-weight: var(--title-big-font-weight) !important;
+}
+.t-title {
+width: 100%;
+font-size: var(--title-font-size) !important;
+line-height: var(--title-line-height) !important;
+font-family: var(--title-font-family) !important;
+font-weight: var(--title-font-weight) !important;
+}
+.t-subtitle {
+width: 100%;
+font-size: var(--subtitle-font-size) !important;
+line-height: var(--subtitle-line-height) !important;
+font-family: var(--subtitle-font-family) !important;
+font-weight: var(--subtitle-font-weight) !important;
+}
+.t-text {
+width: 100%;
+font-size: var(--text-font-size) !important;
+line-height: var(--text-line-height) !important;
+font-family: var(--text-font-family) !important;
+font-weight: var(--text-font-weight) !important;
+}
+.t-text-small {
+width: 100%;
+font-size: var(--text-small-font-size) !important;
+line-height: var(--text-small-line-height) !important;
+font-family: var(--text-small-font-family) !important;
+font-weight: var(--text-small-font-weight) !important;
+}
+/* Font weight */
+.fw-t-100 { font-weight: 100 !important; }
+.fw-t-200 { font-weight: 200 !important; }
+.fw-t-300 { font-weight: 300 !important; }
+.fw-t-400 { font-weight: 400 !important; }
+.fw-t-500 { font-weight: 500 !important; }
+.fw-t-600 { font-weight: 600 !important; }
+.fw-t-700 { font-weight: 700 !important; }
+.fw-t-800 { font-weight: 800 !important; }
+.fw-t-900 { font-weight: 900 !important; }
+}
+
+@media (max-width: 768px) {
+.p-title-big {
+width: 100%;
+font-size: var(--title-big-font-size) !important;
+line-height: var(--title-big-line-height) !important;
+font-family: var(--title-big-font-family) !important;
+font-weight: var(--title-big-font-weight) !important;
+}
+.p-title {
+width: 100%;
+font-size: var(--title-font-size) !important;
+line-height: var(--title-line-height) !important;
+font-family: var(--title-font-family) !important;
+font-weight: var(--title-font-weight) !important;
+}
+.p-subtitle {
+width: 100%;
+font-size: var(--subtitle-font-size) !important;
+line-height: var(--subtitle-line-height) !important;
+font-family: var(--subtitle-font-family) !important;
+font-weight: var(--subtitle-font-weight) !important;
+}
+.p-text {
+width: 100%;
+font-size: var(--text-font-size) !important;
+line-height: var(--text-line-height) !important;
+font-family: var(--text-font-family) !important;
+font-weight: var(--text-font-weight) !important;
+}
+.p-text-small {
+width: 100%;
+font-size: var(--text-small-font-size) !important;
+line-height: var(--text-small-line-height) !important;
+font-family: var(--text-small-font-family) !important;
+font-weight: var(--text-small-font-weight) !important;
+}
+/* Font weight */
+.fw-p-100 { font-weight: 100 !important; }
+.fw-p-200 { font-weight: 200 !important; }
+.fw-p-300 { font-weight: 300 !important; }
+.fw-p-400 { font-weight: 400 !important; }
+.fw-p-500 { font-weight: 500 !important; }
+.fw-p-600 { font-weight: 600 !important; }
+.fw-p-700 { font-weight: 700 !important; }
+.fw-p-800 { font-weight: 800 !important; }
+.fw-p-900 { font-weight: 900 !important; }
+}

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

@@ -0,0 +1,42 @@
+.wi-alert {
+position: fixed;
+width: 300px;
+top: var(--alert-top);
+right: -100%;
+background: var(--alert-bg);
+color: var(--alert-tx);
+border-radius: var(--alert-border-radius);
+border: var(--alert-border-width) solid var(--alert-border-color);
+font-size: 16px;
+line-height: 16px;
+box-sizing: border-box;
+pointer-events: auto;
+z-index: 999;
+transition: 1s;
+}
+.wi-alert.wi-show {
+right: var(--alert-right);
+}
+.wi-alert .wi-alert-header,
+.wi-alert .wi-alert-body {
+position: relative;
+float: left;
+width: 100%;
+padding: calc(var(--spacer) * 3); 
+box-sizing: border-box;
+}
+.wi-alert .wi-alert-header i,
+.wi-alert .wi-alert-header b {
+position: relative;
+float: left;
+}
+.wi-alert .wi-alert-header .wi-alert-icon {
+margin-right: 8px;
+}
+.wi-alert .wi-alert-header .wi-alert-close {
+float: right;
+cursor: pointer;
+}
+.wi-alert .wi-alert-body {
+border-top: var(--alert-border-width) solid var(--alert-border-color);
+}