open_fresk 0.1.1

data/app/assets/stylesheets/open_fresk/components/_checkout.scss

@@ -0,0 +1,142 @@
+/* Variables */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  height: 100vh;
+  width: 100vw;
+}
+
+form {
+  width: 30vw;
+  min-width: 500px;
+  align-self: center;
+  box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
+  0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
+  border-radius: 7px;
+  padding: 40px;
+}
+
+.hidden {
+  display: none;
+}
+
+#payment-message {
+  color: rgb(105, 115, 134);
+  font-size: 16px;
+  line-height: 20px;
+  padding-top: 12px;
+  text-align: center;
+}
+
+#payment-element {
+  margin-bottom: 24px;
+}
+
+/* Buttons and links */
+button {
+  background: #5469d4;
+  font-family: Arial, sans-serif;
+  color: #ffffff;
+  border-radius: 4px;
+  border: 0;
+  padding: 12px 16px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  display: block;
+  transition: all 0.2s ease;
+  box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
+  width: 100%;
+}
+button:hover {
+  filter: contrast(115%);
+}
+button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* spinner/processing state, errors */
+.spinner,
+.spinner:before,
+.spinner:after {
+  border-radius: 50%;
+}
+.spinner {
+  color: #ffffff;
+  font-size: 22px;
+  text-indent: -99999px;
+  margin: 0px auto;
+  position: relative;
+  width: 20px;
+  height: 20px;
+  box-shadow: inset 0 0 0 2px;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+.spinner:before,
+.spinner:after {
+  position: absolute;
+  content: "";
+}
+.spinner:before {
+  width: 10.4px;
+  height: 20.4px;
+  background: #5469d4;
+  border-radius: 20.4px 0 0 20.4px;
+  top: -0.2px;
+  left: -0.2px;
+  -webkit-transform-origin: 10.4px 10.2px;
+  transform-origin: 10.4px 10.2px;
+  -webkit-animation: loading 2s infinite ease 1.5s;
+  animation: loading 2s infinite ease 1.5s;
+}
+.spinner:after {
+  width: 10.4px;
+  height: 10.2px;
+  background: #5469d4;
+  border-radius: 0 10.2px 10.2px 0;
+  top: -0.1px;
+  left: 10.2px;
+  -webkit-transform-origin: 0px 10.2px;
+  transform-origin: 0px 10.2px;
+  -webkit-animation: loading 2s infinite ease;
+  animation: loading 2s infinite ease;
+}
+
+@-webkit-keyframes loading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes loading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  form {
+    width: 80vw;
+    min-width: initial;
+  }
+}

data/app/assets/stylesheets/open_fresk/components/_cursors.scss

@@ -0,0 +1,35 @@
+.cursor-alias {cursor: alias;}
+.cursor-all-scroll {cursor: all-scroll;}
+.cursor-auto {cursor: auto;}
+.cursor-cell {cursor: cell;}
+.cursor-context-menu {cursor: context-menu;}
+.cursor-col-resize {cursor: col-resize;}
+.cursor-copy {cursor: copy;}
+.cursor-crosshair {cursor: crosshair;}
+.cursor-default {cursor: default;}
+.cursor-e-resize {cursor: e-resize;}
+.cursor-ew-resize {cursor: ew-resize;}
+.cursor-grab {cursor: -webkit-grab; cursor: grab;}
+.cursor-grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
+.cursor-help {cursor: help;}
+.cursor-move {cursor: move;}
+.cursor-n-resize {cursor: n-resize;}
+.cursor-ne-resize {cursor: ne-resize;}
+.cursor-nesw-resize {cursor: nesw-resize;}
+.cursor-ns-resize {cursor: ns-resize;}
+.cursor-nw-resize {cursor: nw-resize;}
+.cursor-nwse-resize {cursor: nwse-resize;}
+.cursor-no-drop {cursor: no-drop;}
+.cursor-none {cursor: none;}
+.cursor-not-allowed {cursor: not-allowed;}
+.cursor-pointer {cursor: pointer;}
+.cursor-progress {cursor: progress;}
+.cursor-row-resize {cursor: row-resize;}
+.cursor-s-resize {cursor: s-resize;}
+.cursor-se-resize {cursor: se-resize;}
+.cursor-sw-resize {cursor: sw-resize;}
+.cursor-text {cursor: text;}
+.cursor-w-resize {cursor: w-resize;}
+.cursor-wait {cursor: wait;}
+.cursor-zoom-in {cursor: zoom-in;}
+.cursor-zoom-out {cursor: zoom-out;}

data/app/assets/stylesheets/open_fresk/components/_dropdown_toggle.scss

@@ -0,0 +1,9 @@
+.dropdown-toggle[aria-expanded="true"]:after {
+  transform: rotate(180deg);
+}
+.dropdown-toggle:after {
+  transition: 0.3s;
+}
+.dropdown-toggle::after {
+  content: "\25BC"; /* Unicode for a downward-pointing triangle */
+}

data/app/assets/stylesheets/open_fresk/components/_form.scss

@@ -0,0 +1,22 @@
+.form-control {
+  border-radius: 12px !important;
+  background-color: #f1f1f1 !important;
+  padding: 0.7rem !important;
+  border: none !important;
+}
+
+.form-control-sm {
+  border-radius: 8px !important;
+  background-color: #f1f1f1 !important;
+  padding: 0.6rem 0.5rem !important;
+  border: none !important;
+}
+
+.border-right-0 {
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
+
+.form-control:disabled, .form-control[readonly] {
+  color: $secondary;
+}

data/app/assets/stylesheets/open_fresk/components/_google_maps_autocomplete.scss

@@ -0,0 +1,3 @@
+.pac-container {
+  z-index: 10000 !important;
+}

data/app/assets/stylesheets/open_fresk/components/_hamburger_button.scss

@@ -0,0 +1,41 @@
+.navbar-toggler {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  padding: 0;
+}
+.line {
+  fill: none;
+  stroke: black;
+  stroke-width: 6;
+  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
+    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.line1 {
+  stroke-dasharray: 60 207;
+  stroke-width: 6;
+}
+.line2 {
+  stroke-dasharray: 60 60;
+  stroke-width: 6;
+}
+.line3 {
+  stroke-dasharray: 60 207;
+  stroke-width: 6;
+}
+.opened .line1 {
+  stroke-dasharray: 90 207;
+  stroke-dashoffset: -134;
+  stroke-width: 6;
+}
+.opened .line2 {
+  stroke-dasharray: 1 60;
+  stroke-dashoffset: -30;
+  stroke-width: 6;
+}
+.opened .line3 {
+  stroke-dasharray: 90 207;
+  stroke-dashoffset: -134;
+  stroke-width: 6;
+}

data/app/assets/stylesheets/open_fresk/components/_header.scss

@@ -0,0 +1,57 @@
+@media (max-width: 991.98px) {
+  .offcanvas-collapse {
+    position: fixed;
+    top: 50px; /* Height of navbar */
+    bottom: 0;
+    right: 100%;
+    width: 100%;
+    padding-right: 1rem;
+    padding-left: 1rem;
+    padding-top: 1rem;
+    overflow-y: auto;
+    visibility: hidden;
+    background-color: #ffffff;
+    border-top: 1px solid #e9ecef;
+    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
+    z-index: 100;
+  }
+  .offcanvas-collapse.open {
+    visibility: visible;
+    transform: translateX(100%);
+  }
+}
+
+.nav-scroller {
+  position: relative;
+  z-index: 2;
+  height: 2.75rem;
+  overflow-y: hidden;
+}
+
+.nav-scroller .nav {
+  display: flex;
+  flex-wrap: nowrap;
+  padding-bottom: 1rem;
+  margin-top: -1px;
+  overflow-x: auto;
+  color: rgba(255, 255, 255, 0.75);
+  text-align: center;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+}
+
+.nav-underline .nav-link {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  font-size: 0.875rem;
+  color: #6c757d;
+}
+
+.nav-underline .nav-link:hover {
+  color: #007bff;
+}
+
+.nav-underline .active {
+  font-weight: 500;
+  color: #343a40;
+}

data/app/assets/stylesheets/open_fresk/components/_iframe.scss

@@ -0,0 +1,26 @@
+.iframe_fullscreen {
+  position:fixed;
+  left:0;
+  bottom: 0px;
+  right:0;
+  width:100%;
+  border:none;
+  margin: 0;
+  padding: 0;
+  overflow:hidden;
+  z-index:999;
+}
+
+.iframe-top-60 {
+  top: 60px;
+  height: calc(100% - 60px);
+}
+
+.iframe-top-160 {
+  top: 160px;
+  height: calc(100% - 160px);
+}
+
+.on_top_of_iframe {
+  z-index: 1000;
+}

data/app/assets/stylesheets/open_fresk/components/_index.scss

@@ -0,0 +1,22 @@
+@import "accordion";
+@import "btn";
+@import "btn_toggle";
+@import "card";
+@import "cursors";
+@import "dropdown_toggle";
+@import "form";
+@import "hamburger_button";
+@import "header";
+@import "iframe";
+@import "nav_pills";
+@import "pagination";
+@import "progress_bar";
+@import "slider";
+@import "slim_select";
+@import "timeline";
+@import "tooltip";
+@import "transformation";
+@import "range";
+@import "nps_progress_bar";
+@import "select_input";
+@import "radio_button";

data/app/assets/stylesheets/open_fresk/components/_nav_pills.scss

@@ -0,0 +1,26 @@
+  .nav,
+  .nav-pills {
+    font-weight: 700;
+    .nav-link.active {
+      margin: 0px 5px;
+      color: $primary !important;
+      background-color: #fff !important;
+      border-bottom: 2px solid $primary;
+      border-radius: 0px !important;
+    }
+    .nav-link.active:hover {
+      background-color: $primary !important;
+      color: #fff !important;
+    }
+    .nav-link:not(.active) {
+      margin: 0px 5px;
+      background-color: #fff;
+      color: rgba($secondary, 0.8) !important;
+      border-bottom: 2px solid rgba($secondary, 0.8);
+      border-radius: 0px !important;
+    }
+    .nav-link:not(.active):hover {
+      background-color: rgba($secondary, 0.2) !important;
+      color: $secondary !important;
+    }
+  }

data/app/assets/stylesheets/open_fresk/components/_nps_progress_bar.scss

@@ -0,0 +1,97 @@
+.wrapper-nps {
+  height: 1em;
+  width: 100%;
+}
+
+.progress-nps {
+  height: 1em;
+  width: 100%;
+  background-color: $primary;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  border-radius: 15px;
+}
+
+.nps-score {
+  background-color: $primary;
+  border-radius: 5px;
+  color: white;
+  display: inline-block;
+  position: relative;
+  transform: translateX(-50%);
+}
+
+.nps-score::after {
+  content: "";
+  position: absolute;
+  left: 43%;
+  display : inline-block;
+  height : 0;
+  width : 0;
+  border-top : 14px solid $primary;
+  border-right : 8px solid transparent;
+  border-left : 7px solid transparent;
+  top: 75%;
+  z-index: 2;
+}
+
+.nps-middle {
+  content: "";
+  position: absolute;
+  height: 2em;
+  width: 3.5px;
+  border-radius: 15px;
+  background-color: $secondary;
+  left: 50%;
+  z-index: 1;
+}
+
+.blind {
+  background-color: #CACED2;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  min-width: 50%;
+}
+
+.blind.right {
+  left: 50%;
+  transform-origin: left top;
+  border-top-right-radius: 15px;
+  border-bottom-right-radius: 15px;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -1%;
+    width: 2%;
+    height: 100%;
+    background-color: $primary;
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+  }
+  &.no-before::before{
+    display:none;
+  }
+}
+
+.blind.left {
+  transform-origin: left top;
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 99%;
+    width: 2%;
+    height: 100%;
+    background-color: $primary;
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+  }
+  &.no-before::before{
+    display:none;
+  }
+}

data/app/assets/stylesheets/open_fresk/components/_pagination.scss

@@ -0,0 +1,11 @@
+.pagination {
+  .page-link {
+    color: $primary;
+  }
+  .page-item.active .page-link {
+      z-index: 3;
+      color: #fff;
+      background-color: $primary;
+      border-color: $primary;
+  }
+}

data/app/assets/stylesheets/open_fresk/components/_progress_bar.scss

@@ -0,0 +1,17 @@
+.progress {
+  #first-section {
+    border-right: solid white;
+    border-width: medium;
+  }
+
+  #last-section {
+    border-left: solid white;
+    border-width: medium;
+  }
+
+  .middle-section {
+    border-right: solid white;
+    border-left: solid white;
+    border-width: medium;
+  }
+}

data/app/assets/stylesheets/open_fresk/components/_radio_button.scss

@@ -0,0 +1,25 @@
+input[type="radio"].checked_radio_button:checked + label {
+  background-color: $primary;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+input[type="radio"].checked_radio_button:not(:checked) + label {
+  background-color: #fff;
+  color: $secondary;
+  border-color: $secondary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+input[type="radio"].checked_radio_button:disabled + label {
+  background-color: #fff;
+  color: $secondary;
+  border-color: $secondary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}