@wayke-se/components-react 2.16.0 → 3.0.0-beta.2

package/www/ecom.css

@@ -0,0 +1,60 @@
+/* Custom Ecom CSS (Optional) */
+/* This file contains custom styling to overwrite wayke-ecom default styling */
+
+/* Timeline */
+.wayke-ecom [data-ecom-timeline] .timeline-indicator {
+  background-color: #ff5a1c;
+  border-color: #ff5a1c;
+}
+
+.wayke-ecom [data-ecom-timeline] .timeline-item.is-active:before {
+  background-color: #ff5a1c;
+}
+
+.wayke-ecom [data-ecom-timeline] .timeline-item.is-stepped+.timeline-item-step:before {
+  background-color: #ff5a1c;
+}
+
+.wayke-ecom [data-ecom-timeline] .timeline-item.is-stepped + .timeline-item-step .timeline-indicator {
+  border-color: #ff5a1c;
+}
+
+/* Link */
+
+.wayke-ecom [data-ecom-link] {
+  color: #ff5a1c;
+}
+
+.wayke-ecom button[data-ecom-link] {
+  color: #ff5a1c;
+}
+
+/* Button */
+
+.wayke-ecom [data-ecom-button] {
+  border-radius: 3px !important;
+  background-color: #ff5a1c !important;
+  color: #fff !important;
+}
+
+.wayke-ecom [data-ecom-button~=light] {
+  background-color: #ebebeb !important;
+  color: #ff5a1c !important;
+}
+
+/* Spinner */
+
+.wayke-ecom [data-ecom-spinner] .spinner {
+  border-color: #ff5a1c;
+  border-bottom-color: transparent;
+}
+
+/* Option List */
+.wayke-ecom [data-ecom-optionlist] .option-list-action-title {
+  color: #ff5a1c;
+}
+
+/* Cart */
+.wayke-ecom [data-ecom-cart] .cart-seller {
+  color: #ff5a1c;
+}

package/www/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="se">
+  <head>
+    <title>Wayke Components React</title>
+
+    <meta charset="UTF-8">
+    <meta name="description" content="Wayke Components React">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="theme-color" content="#fff">
+
+    <link rel="stylesheet" href="ecom.css">
+    <link rel="stylesheet" href="theme.css">
+    <link rel="stylesheet" href="index-dev.css">
+
+    <style>
+      html {
+        font-size: 100%;
+        -webkit-text-size-adjust: 100%;
+      }
+
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="index-dev.js"></script>
+  </body>
+</html>

package/www/theme.css

@@ -0,0 +1,83 @@
+/*
+  Theme Setting
+  This file contains theme settings.
+  Change the properties of each class to customize the design.
+
+  The following styling could be applied:
+  - Brand color
+  - Font Regular (and other font-related settings)
+  - Font Bold (and other font-related settings)
+*/
+
+/*** Brand color ***/
+
+/*
+  - Primary (background-color)
+  Used to add primary background-color to elements. Should also include
+  a color for text placed on top of the primary color. Be sure to pick
+  a text color with good contrast.
+*/
+.wayke__theme.wayke__color--primary-bg {
+  background-color: #ff5a1c;
+  color: #fff;
+}
+
+/*
+  - Primary (color)
+  Used to add primary color to text. Make sure to add the same color as
+  in the background-color selector above.
+*/
+.wayke__theme.wayke__color--primary-text {
+  color: #ff5a1c;
+}
+
+/*
+  - Secondary (background-color)
+  Used to add secondary background-color to elements. Should also include
+  a color for text placed on top of the primary color. Be sure to pick
+  a text color with good contrast.
+*/
+.wayke__theme.wayke__color--secondary-bg {
+  background-color: #ebebeb;
+  color: #ff5a1c;
+}
+
+/*
+  - Accent (background-color)
+  Used to add accent background-color to elements. Should also include
+  a color for text placed on top of the primary color. Be sure to pick
+  a text color with good contrast.
+*/
+.wayke__theme.wayke__color--accent-bg {
+  background-color: #f8f8f8;
+  color: #000;
+}
+
+/*** Font ***/
+
+/*
+  - Regular
+  This is the regular font used on most text elements. It is recommended
+  to use a light (font-weight: 300) or regular (font-weight: 400) font
+  for this type.
+*/
+.wayke__theme.wayke__font--regular {
+  font-family: sans-serif;
+  font-weight: 300;
+  font-style: normal;
+  font-stretch: normal;
+  letter-spacing: 0.02em;
+}
+
+/*
+  - Bold
+  This font will be applied to headings and some other elements using
+  the same styling.
+*/
+.wayke__theme.wayke__font--bold {
+  font-family: sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  font-stretch: normal;
+  letter-spacing: 0.02em;
+}

package/assets/default.css

@@ -1 +0,0 @@
-@charset 'UTF-8';.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}.slick-loading .slick-list{background:#fff url(ajax-loader.gif) center center no-repeat}@font-face{font-family:slick;font-weight:400;font-style:normal;src:url(fonts/slick.eot);src:url(fonts/slick.eot?#iefix) format('embedded-opentype'),url(fonts/slick.woff) format('woff'),url(fonts/slick.ttf) format('truetype'),url(fonts/slick.svg#slick) format('svg')}.slick-next,.slick-prev{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:20px;height:20px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0;background:0 0}.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;background:0 0}.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}.slick-next:before,.slick-prev:before{font-family:slick;font-size:20px;line-height:1;opacity:.75;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-prev{left:-25px}[dir=rtl] .slick-prev{right:-25px;left:auto}.slick-prev:before{content:'←'}[dir=rtl] .slick-prev:before{content:'→'}.slick-next{right:-25px}[dir=rtl] .slick-next{right:auto;left:-25px}.slick-next:before{content:'→'}[dir=rtl] .slick-next:before{content:'←'}.slick-dotted.slick-slider{margin-bottom:30px}.slick-dots{position:absolute;bottom:-25px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:0 0}.slick-dots li button:focus,.slick-dots li button:hover{outline:0}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}.slick-dots li button:before{font-family:slick;font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'•';text-align:center;opacity:.25;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-dots li.slick-active button:before{opacity:.75;color:#000}

package/assets/fonts/slick.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by Fontastic.me</metadata>
-<defs>
-<font id="slick" horiz-adv-x="512">
-<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
-<missing-glyph horiz-adv-x="512" />
-
-<glyph unicode="&#8594;" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
-<glyph unicode="&#8592;" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
-<glyph unicode="&#8226;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
-<glyph unicode="&#97;" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
-</font></defs></svg>