kitchen-simulator 5.0.0-test.17 → 5.0.0-test.19

package/src/components/login/style.scss

@@ -0,0 +1,260 @@
+$white: #ffffff;
+
+$text: #74708d;
+$text-lighten: #c0bdd0;
+$text-darken: #615d7c;
+$text-darken-more: #514d6a;
+
+$gray: #d2d9e5;
+$gray-lighten: #eef0f4;
+$gray-lighten-more: #f2f4f8;
+$gray-lighten-more-more: #f9fafc;
+$gray-darken: #b8beca;
+$gray-border: #e4e9f0;
+
+$black: #0e0b20;
+$black-lighten: #222034;
+$black-lighten-more: #393749;
+
+$blue: #0088ff;
+$blue-darken: #0072d6;
+$orange: #f2a654;
+$yellow: yellow;
+
+$menuBg: #001529;
+$menuBg-darken: #000c17;
+
+// Accent colors
+$default: #acb7bf;
+$primary: #0190fe;
+$secondary: #6a7a84;
+$success: #46be8a;
+$info: #0887c9;
+$warning: #f39834;
+$danger: #fb434a;
+
+// Font Family
+$base__font-family: 'Nunito Sans', sans-serif !important;
+
+// Font Size
+$base__font-size: 13 !default;
+
+// Convert value rem() sass mixin
+@function rem($px, $base: $base__font-size) {
+  @return #{floor(($px/$base) * 100) / 100}rem; // to REMs
+  // comment code above and uncomment below for change REMs to PXs
+  //@return #{$px}px;
+}
+
+// Transitions
+@mixin transition-fast() {
+  transition: all 0.05s ease-in-out;
+}
+@mixin transition-middle() {
+  transition: all 0.1s ease-in-out;
+}
+@mixin transition-slow() {
+  transition: all 0.2s ease-in-out;
+}
+@mixin transition-very-slow() {
+  transition: all 0.4s ease-in-out;
+}
+@mixin transition-color() {
+  transition: color 0.2s ease-in-out;
+}
+
+// Responsive utils
+$xxl-min-width: 1600px;
+$xxl-max-width: 1599px;
+$xl-min-width: 1200px;
+$xl-max-width: 1199px;
+$md-min-width: 992px;
+$md-max-width: 991px;
+$sm-min-width: 768px;
+$sm-max-width: 767px;
+$xs-min-width: 576px;
+$xs-max-width: 575px;
+
+.login {
+  background-size: cover;
+  background-color: $gray-lighten-more;
+  background-position: center center;
+
+  &--fullscreen {
+    position: fixed;
+    z-index: 20000;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
+
+  &__block {
+    padding: rem(80) rem(40) rem(80);
+    margin-bottom: rem(70);
+    width: 100%;
+    align-self: center;
+    position: relative;
+    z-index: 2;
+
+    @media (max-width: $md-max-width) {
+      padding: rem(40) rem(20) rem(80);
+    }
+
+    &__inner {
+      min-width: rem(300);
+      max-width: rem(500);
+      margin: 0 auto;
+      padding: rem(50) rem(40) rem(20);
+      border-radius: 10px;
+      overflow: hidden;
+      background-color: $white;
+      position: relative;
+    }
+    &__form {
+      position: relative;
+      z-index: 2;
+    }
+    &__promo {
+      padding: 0 0 rem(60);
+      max-width: rem(800);
+      font-size: rem(16);
+      line-height: rem(26);
+      text-align: center;
+      margin: 0 auto;
+    }
+
+    &__sidebar {
+      display: none;
+    }
+
+    @media (min-width: $md-min-width) {
+      &--extended {
+        .login__block__inner {
+          max-width: rem(800);
+          padding: rem(80) rem(80) rem(50);
+        }
+
+        .login__block__form {
+          margin-right: rem(300);
+        }
+
+        .login__block__sidebar {
+          display: block;
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          width: rem(300);
+          padding: rem(80) rem(40);
+          color: $white;
+          background: $black-lighten;
+
+          &__item {
+            padding-left: rem(20);
+            border-left: 2px solid $text;
+            margin-bottom: rem(20);
+            color: $text;
+          }
+          &__title {
+            margin-bottom: rem(20);
+            line-height: 1.5;
+          }
+          &__place {
+            font-size: rem(14);
+            font-weight: bold;
+            position: absolute;
+            z-index: 2;
+            bottom: rem(40);
+            left: rem(40);
+          }
+        }
+      }
+    }
+  }
+
+  &__header {
+    align-self: flex-start;
+    width: 100%;
+    color: $white;
+    padding: rem(40);
+
+    @media (max-width: $md-max-width) {
+      padding: rem(40) rem(20) rem(40);
+    }
+
+    &__logo {
+      img {
+        max-width: rem(150);
+        max-height: rem(50);
+      }
+    }
+    &__menu {
+      text-align: right;
+      margin-top: rem(10);
+
+      @media (max-width: $md-max-width) {
+        text-align: left;
+      }
+
+      ul {
+        font-size: rem(16);
+        li {
+          margin-right: rem(20);
+          text-transform: uppercase;
+          &:last-child {
+            margin-right: 0;
+          }
+          &.active {
+            a {
+              border-bottom: 1px solid rgba($white, 0.5);
+            }
+          }
+          a {
+            color: $white !important;
+            line-height: 1.4;
+            display: inline-block;
+            margin-right: rem(10);
+            font-weight: bold;
+            &:hover {
+              border-bottom: 1px solid rgba($white, 0.5);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &__footer {
+    align-self: flex-end;
+    width: 100%;
+    color: white;
+    padding: rem(40);
+
+    @media (max-width: $md-max-width) {
+      padding: rem(40) rem(20) rem(40);
+    }
+
+    ul {
+      margin-bottom: 0;
+      li {
+        margin-right: rem(20);
+        text-transform: uppercase;
+        &:last-child {
+          margin-right: 0;
+        }
+        a {
+          color: $white;
+          opacity: 0.7;
+          line-height: 1.4;
+          display: inline-block;
+          margin-right: rem(10);
+          &:hover {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/molecules/slider/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Slider as BaseSlider } from 'infinite-react-carousel';
+
+import * as S from './styles';
+import './styles.scss';
+
+const Slider = ({ children }) => {
+  return (
+    <BaseSlider arrows={false} dots={true}>
+      {children}
+    </BaseSlider>
+  );
+};
+
+export default Slider;

package/src/components/molecules/slider/styles.scss

@@ -0,0 +1,3 @@
+.carousel-dots li.carousel-dots-active button:before {
+  color: #fff;
+}

package/src/components/myprojects/export.js

@@ -0,0 +1,5 @@
+import MyProjects from './index';
+
+export default {
+  MyProjects
+};