sample-piral 1.0.0-pre.2296 → 1.0.1-beta.5640

package/app/styles.12ced89d.css

@@ -1,564 +0,0 @@
-html, body, #app, .app-container {
-  width: 100%;
-  min-height: 100%;
-  background: white; }
-
-html, body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  font-family: 'Roboto', sans-serif; }
-
-a {
-  text-decoration: none;
-  color: #56aa1c; }
-  a:hover {
-    color: #407e15; }
-
-.pi-modal {
-  display: none;
-  position: fixed;
-  z-index: 3;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background: rgba(0, 0, 0, 0.4);
-  animation: fade-in 0.4s; }
-  .pi-modal .pi-modal-dialog {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    max-width: 90%;
-    max-height: 90%;
-    margin: auto;
-    background: #fefefe;
-    animation: fade-in 0.4s; }
-
-body.pi-modal-open {
-  height: 100vh;
-  overflow-y: hidden;
-  padding-right: 15px;
-  position: fixed; }
-  body.pi-modal-open .pi-modal {
-    display: block; }
-
-.text-right {
-  text-align: right; }
-
-.language-picker {
-  position: relative;
-  margin: 4px 8px 0 0; }
-  .language-picker .current {
-    cursor: pointer; }
-  .language-picker ul {
-    display: none;
-    background: #f5f5f6;
-    border: none;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    border-radius: 3px 0 3px 3px;
-    background-clip: padding-box;
-    margin-bottom: 5px;
-    position: absolute;
-    top: 100%;
-    right: 0; }
-    .language-picker ul li {
-      cursor: pointer;
-      border-bottom: 1px solid #ebebeb;
-      padding: 10px 20px;
-      margin: 0;
-      outline: 0;
-      color: #7d8086;
-      display: flex;
-      flex-direction: row;
-      align-items: center; }
-      .language-picker ul li span {
-        padding-left: 8px; }
-      .language-picker ul li:hover {
-        background: rgba(235, 235, 235, 0.9);
-        color: #737881; }
-    .language-picker ul.open {
-      display: block; }
-
-.language-icon {
-  height: 16px;
-  width: 16px; }
-
-@keyframes fade-in {
-  from {
-    opacity: 0; }
-  to {
-    opacity: 1; } }
-
-.app-container {
-  flex: 1;
-  position: relative; }
-
-.pi-notifications {
-  position: fixed;
-  display: flex;
-  align-items: flex-end;
-  flex-direction: column;
-  right: 2em;
-  bottom: 2em; }
-  .pi-notifications .pi-item {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    text-align: left;
-    padding: 0.8em;
-    background-color: white;
-    max-width: 500px;
-    position: relative;
-    box-shadow: 1px 7px 14px -5px rgba(0, 0, 0, 0.2); }
-    .pi-notifications .pi-item + .pi-notifications .pi-item {
-      margin-top: 1em; }
-    .pi-notifications .pi-item.success:before {
-      background-color: #2BDE3F; }
-    .pi-notifications .pi-item.error:before {
-      background-color: #e7431a; }
-    .pi-notifications .pi-item.info:before {
-      background-color: #1D72F3; }
-    .pi-notifications .pi-item.warning:before {
-      background-color: #FFC007; }
-    .pi-notifications .pi-item:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 2px; }
-    .pi-notifications .pi-item .pi-details {
-      flex: 1; }
-      .pi-notifications .pi-item .pi-details .pi-title {
-        color: #3e3e3e;
-        font-weight: 700;
-        margin-top: 0;
-        margin-bottom: 8px; }
-      .pi-notifications .pi-item .pi-details .pi-description {
-        font-size: 14px;
-        margin-top: 0;
-        margin-bottom: 0;
-        color: #878787; }
-    .pi-notifications .pi-item .pi-close {
-      width: 14px;
-      cursor: pointer;
-      height: 14px;
-      fill: #878787;
-      margin-left: 1.2em;
-      background: url("/close.bb892b1b.svg") no-repeat center center; }
-  @media screen and (max-width: 650px) {
-    .pi-notifications {
-      right: 0;
-      left: 0;
-      bottom: 0; }
-      .pi-notifications .pi-item {
-        max-width: 100%;
-        width: 100%; } }
-
-.app-container, #app {
-  display: flex;
-  flex-direction: column; }
-
-.app-content {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  padding: 0 2em; }
-
-.app-title {
-  display: flex;
-  position: relative;
-  align-items: center; }
-
-.app-header {
-  display: flex;
-  flex-direction: row;
-  padding: 0 2em;
-  margin-bottom: 1em;
-  align-items: center;
-  justify-content: space-between;
-  background: #abcdef;
-  position: relative;
-  z-index: 2; }
-  .app-header h1 {
-    white-space: nowrap;
-    font-size: 2rem; }
-  @media screen and (max-width: 650px) {
-    .app-header {
-      padding: 0 1em; }
-      .app-header h1 {
-        display: none; } }
-
-.pi-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 1; }
-
-.app-footer {
-  font-size: 0.8em;
-  padding: 1em 0;
-  background: #d6e7f7;
-  display: flex;
-  flex-direction: row; }
-  .app-footer .pi-menu {
-    margin: 0 auto;
-    max-width: 1000px;
-    column-width: 300px;
-    display: block; }
-    .app-footer .pi-menu .pi-item {
-      display: block;
-      padding: 1em 2em; }
-
-.app-menu {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  padding: 0;
-  margin: 0;
-  width: 300px;
-  max-width: 100%;
-  background: #ebf3fb;
-  transform: translateX(-100%);
-  transition: all 0.1s ease;
-  padding-top: 85px;
-  z-index: 1; }
-  .app-menu.is-open {
-    transform: none;
-    box-shadow: 30px 0px 30px -30px rgba(0, 0, 0, 0.2); }
-  .app-menu .app-menu-content {
-    overflow-y: auto;
-    height: 100%; }
-  .app-menu .pi-menu {
-    display: flex;
-    flex-direction: column;
-    list-style: none; }
-    .app-menu .pi-menu > .pi-item {
-      flex: 1;
-      margin: 1px 0; }
-      .app-menu .pi-menu > .pi-item > a {
-        display: block;
-        border-left: 5px solid #abcdef;
-        padding: 1em; }
-        .app-menu .pi-menu > .pi-item > a:hover {
-          border-left-color: #559adf; }
-
-.pi-spinner {
-  position: relative;
-  width: 50px;
-  height: 50px;
-  font-size: 0; }
-  .pi-spinner:before, .pi-spinner:after {
-    content: "";
-    display: block;
-    position: absolute;
-    border-width: 4px;
-    border-style: solid;
-    border-radius: 50%; }
-
-@keyframes rotate-animation {
-  0% {
-    transform: rotate(0deg); }
-  100% {
-    transform: rotate(360deg); } }
-
-@keyframes anti-rotate-animation {
-  0% {
-    transform: rotate(0deg); }
-  100% {
-    transform: rotate(-360deg); } }
-  .pi-spinner:before {
-    width: 42px;
-    height: 42px;
-    border-bottom-color: #56aa1c;
-    border-right-color: #56aa1c;
-    border-top-color: rgba(86, 170, 28, 0);
-    border-left-color: rgba(86, 170, 28, 0);
-    top: 0;
-    left: 0;
-    animation: rotate-animation 1s linear 0s infinite; }
-  .pi-spinner:after {
-    width: 29.4px;
-    height: 29.4px;
-    border-bottom-color: #56aa1c;
-    border-right-color: #56aa1c;
-    border-top-color: rgba(86, 170, 28, 0);
-    border-left-color: rgba(86, 170, 28, 0);
-    top: 6.3px;
-    left: 6.3px;
-    animation: anti-rotate-animation 0.85s linear 0s infinite; }
-
-.pi-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column; }
-
-.pi-dashboard {
-  flex: 1;
-  position: relative;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, 70px);
-  grid-template-rows: repeat(auto-fit, 70px);
-  grid-gap: 10px;
-  overflow: visible; }
-  .pi-dashboard .pi-tile {
-    display: flex;
-    position: relative; }
-    .pi-dashboard .pi-tile.small {
-      grid-column: span 1;
-      grid-row: span 1;
-      width: 70px;
-      height: 70px; }
-    .pi-dashboard .pi-tile.medium {
-      grid-column: span 2;
-      grid-row: span 2;
-      width: 150px;
-      height: 150px; }
-    .pi-dashboard .pi-tile.wide {
-      grid-column: span 4;
-      grid-row: span 2;
-      width: 310px;
-      height: 150px; }
-    .pi-dashboard .pi-tile.large {
-      grid-column: span 4;
-      grid-row: span 4;
-      width: 310px;
-      height: 310px; }
-    .pi-dashboard .pi-tile:hover {
-      outline: rgba(29, 29, 29, 0.1) solid 4px; }
-
-.pi-search {
-  position: relative;
-  flex: 1;
-  display: flex;
-  justify-content: center; }
-  .pi-search input[type=search] {
-    font-size: 1em;
-    border: 1px solid transparent;
-    background-color: #f1f1f1;
-    padding: 10px;
-    font-size: 16px;
-    max-width: 80%;
-    width: 250px;
-    box-sizing: border-box;
-    transition: width ease 0.1s; }
-    @media screen and (max-width: 450px) {
-      .pi-search input[type=search] {
-        width: 100px; } }
-  .pi-search:focus-within input[type=search] {
-    width: 90%;
-    max-width: 90%; }
-    .pi-search:focus-within input[type=search] + .pi-details:not(:empty) {
-      display: block;
-      opacity: 1; }
-  .pi-search .pi-details {
-    display: none;
-    opacity: 0;
-    position: absolute;
-    z-index: 2;
-    top: 100%;
-    width: 90%;
-    box-sizing: border-box;
-    background: #f0f0f0;
-    padding: 1px;
-    transition: all 0.1s 0.1s ease; }
-  .pi-search .pi-item {
-    display: block;
-    padding: 10px;
-    cursor: pointer;
-    background-color: white;
-    border-bottom: 1px solid #d4d4d4; }
-  .pi-search .pi-item:hover {
-    background-color: #e9e9e9; }
-  .pi-search .pi-center {
-    padding: 30px;
-    background-color: white; }
-
-.form-row {
-  margin: 1em; }
-  .form-row label {
-    display: block;
-    margin-bottom: 0.2em; }
-  .form-row input {
-    padding: 0.3rem;
-    font-size: 1rem; }
-  .form-row button {
-    padding: 0.5em 1em;
-    border: 1px solid black;
-    font-weight: bold;
-    border-radius: 4px;
-    cursor: pointer; }
-  .form-row button:disabled {
-    border: 1px solid #ccc;
-    color: #ccc;
-    cursor: default; }
-
-.pi-error > img {
-  width: 600px;
-  max-width: 100%;
-  margin: 1em 0; }
-
-.pi-error .pi-title {
-  color: #56aa1c;
-  display: block;
-  font-size: 1.5em; }
-
-.pi-error .pi-description {
-  display: block;
-  margin: 0.5em 0; }
-
-.pi-error .pi-details {
-  display: block;
-  margin: 0.5em 0;
-  color: #3e3e3e;
-  font-size: 0.8em; }
-
-.app-user {
-  position: relative; }
-  .app-user .app-user-avatar {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    cursor: pointer; }
-    .app-user .app-user-avatar img {
-      position: relative;
-      overflow: hidden;
-      width: 32px;
-      min-width: 32px;
-      height: 32px;
-      border-radius: 50% !important;
-      vertical-align: middle;
-      border-style: none;
-      box-sizing: border-box;
-      line-height: 1;
-      margin-right: 0.5em; }
-    .app-user .app-user-avatar::after {
-      display: inline-block;
-      box-sizing: border-box;
-      height: 8px;
-      width: 8px;
-      border-style: solid;
-      border-color: black;
-      border-width: 0px 2px 2px 0px;
-      position: relative;
-      transform: rotate(45deg);
-      transition: opacity 150ms ease-in-out;
-      content: ''; }
-  .app-user .app-user-details {
-    display: none;
-    list-style: none;
-    position: absolute;
-    background: white;
-    padding: 0;
-    right: 0;
-    border: 1px solid #ececec;
-    border-radius: 3px;
-    top: 40px;
-    cursor: default; }
-    .app-user .app-user-details li {
-      display: block;
-      padding: 10px;
-      max-width: 300px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      text-align: right; }
-      .app-user .app-user-details li > a {
-        display: block; }
-      .app-user .app-user-details li.sep {
-        border-bottom: 1px solid #ccc;
-        padding: 0; }
-      .app-user .app-user-details li .user-name {
-        font-weight: bold;
-        color: #666;
-        display: block;
-        font-size: 0.6em; }
-    .app-user .app-user-details:before, .app-user .app-user-details:after {
-      content: '';
-      display: block;
-      position: absolute;
-      bottom: 100%;
-      width: 0;
-      height: 0; }
-    .app-user .app-user-details:before {
-      right: 27px;
-      border: 6px solid transparent;
-      border-bottom-color: #ececec; }
-    .app-user .app-user-details:after {
-      right: 28px;
-      border: 5px solid transparent;
-      border-bottom-color: #fff; }
-  .app-user.is-open img {
-    opacity: 0.8; }
-  .app-user.is-open .app-user-details {
-    display: block; }
-  .app-user.is-open::after {
-    opacity: 0.2; }
-
-.hamburger {
-  padding: 15px 0;
-  display: inline-block;
-  cursor: pointer;
-  transition-property: opacity, filter;
-  transition-duration: 0.15s;
-  transition-timing-function: linear;
-  font: inherit;
-  color: inherit;
-  text-transform: none;
-  background-color: transparent;
-  border: 0;
-  margin: 0;
-  overflow: visible;
-  transform: scale(0.6); }
-  .hamburger:hover {
-    opacity: 0.7; }
-  .hamburger.is-active:hover {
-    opacity: 0.7; }
-  .hamburger.is-active .hamburger-inner,
-  .hamburger.is-active .hamburger-inner::before,
-  .hamburger.is-active .hamburger-inner::after {
-    background-color: #000; }
-
-.hamburger-box {
-  width: 40px;
-  height: 24px;
-  display: inline-block;
-  position: relative; }
-
-.hamburger-inner {
-  display: block;
-  top: 50%;
-  margin-top: -2px; }
-  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
-    width: 40px;
-    height: 4px;
-    background-color: #000;
-    border-radius: 4px;
-    position: absolute;
-    transition-property: transform;
-    transition-duration: 0.15s;
-    transition-timing-function: ease; }
-  .hamburger-inner::before, .hamburger-inner::after {
-    content: "";
-    display: block; }
-  .hamburger-inner::before {
-    top: -10px; }
-  .hamburger-inner::after {
-    bottom: -10px; }
-
-.hamburger--arrow.is-active .hamburger-inner::before {
-  transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
-
-.hamburger--arrow.is-active .hamburger-inner::after {
-  transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); }
-
-
-/*# sourceMappingURL=/styles.12ced89d.css.map */

package/app/styles.12ced89d.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["styles/_layout.scss","styles/index.scss","styles/_burger.scss"],"names":[],"mappings":"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","file":"styles.12ced89d.css","sourceRoot":"../../../../src/samples/sample-piral/src","sourcesContent":["html, body, #app, .app-container {\n  width: 100%;\n  min-height: 100%;\n  background: $bg-color;\n}\n\nhtml, body {\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  font-family: 'Roboto', sans-serif;\n}\n\na {\n  text-decoration: none;\n  color: $basic-dark-color;\n\n  &:hover {\n    color: darken($color: $basic-dark-color, $amount: 10%)\n  }\n}\n\n.pi-modal {\n  display: none;\n  position: fixed;\n  z-index: 3;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: rgba(0, 0, 0, 0.4);\n  animation: fade-in 0.4s;\n\n  .pi-modal-dialog {\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    top: 0;\n    max-width: 90%;\n    max-height: 90%;\n    margin: auto;\n    background: #fefefe;\n    animation: fade-in 0.4s;\n  }\n}\n\nbody.pi-modal-open {\n  height: 100vh;\n  overflow-y: hidden;\n  padding-right: 15px;\n  position: fixed;\n\n  .pi-modal {\n    display: block;\n  }\n}\n\n.text-right {\n  text-align: right;\n}\n\n.language-picker {\n  position: relative;\n  margin: 4px 8px 0 0;\n\n  .current {\n    cursor: pointer;\n  }\n\n  ul {\n    display: none;\n    background: #f5f5f6;\n    border: none;\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n    border-radius: 3px 0 3px 3px;\n    background-clip: padding-box;\n    margin-bottom: 5px;\n    position: absolute;\n    top: 100%;\n    right: 0;\n\n    li {\n      cursor: pointer;\n      border-bottom: 1px solid #ebebeb;\n      padding: 10px 20px;\n      margin: 0;\n      outline: 0;\n      color: #7d8086;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n\n      span {\n        padding-left: 8px;\n      }\n\n      &:hover {\n        background: rgba(235, 235, 235, 0.9);\n        color: #737881;\n      }\n    }\n\n    &.open {\n      display: block;\n    }\n  }\n}\n\n.language-icon {\n  height: 16px;\n  width: 16px;\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.app-container {\n  flex: 1;\n  position: relative;\n}\n\n.pi-notifications {\n  position: fixed;\n  display: flex;\n  align-items: flex-end;\n  flex-direction: column;\n  right: 2em;\n  bottom: 2em;\n\n  .pi-item {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    text-align: left;\n    padding: 0.8em;\n    background-color: $bg-color;\n    max-width: 500px;\n    position: relative;\n    box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2);\n\n    &+& {\n      margin-top: 1em;\n    }\n\n    &.success:before {\n      background-color: #2BDE3F;\n    }\n\n    &.error:before {\n      background-color: #e7431a;\n    }\n\n    &.info:before {\n      background-color: #1D72F3;\n    }\n\n    &.warning:before {\n      background-color: #FFC007;\n    }\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 2px;\n    }\n\n    .pi-details {\n      flex: 1;\n\n      .pi-title {\n        color: #3e3e3e;\n        font-weight: 700;\n        margin-top: 0;\n        margin-bottom: 8px;\n      }\n\n      .pi-description {\n        font-size: 14px;\n        margin-top: 0;\n        margin-bottom: 0;\n        color: #878787;\n      }\n    }\n\n    .pi-close {\n      width: 14px;\n      cursor: pointer;\n      height: 14px;\n      fill: #878787;\n      margin-left: 1.2em;\n      background: url('../images/close.svg') no-repeat center center;\n    }\n  }\n\n  @media screen and (max-width: $breakpoint-tablet) {\n    right: 0;\n    left: 0;\n    bottom: 0;\n\n    .pi-item {\n      max-width: 100%;\n      width: 100%;\n    }\n  }\n}\n\n.app-container, #app {\n  display: flex;\n  flex-direction: column;\n}\n\n.app-content {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding: 0 2em;\n}\n\n.app-title {\n  display: flex;\n  position: relative;\n  align-items: center;\n}\n\n.app-header {\n  display: flex;\n  flex-direction: row;\n  padding: 0 2em;\n  margin-bottom: 1em;\n  align-items: center;\n  justify-content: space-between;\n  background: $header-color;\n  position: relative;\n  z-index: 2;\n\n  h1 {\n    white-space: nowrap;\n    font-size: 2rem;\n  }\n\n  @media screen and (max-width: $breakpoint-tablet) {\n    padding: 0 1em;\n\n    h1 {\n      display: none;\n    }\n  }\n}\n\n.pi-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n}\n\n.app-footer {\n  font-size: 0.8em;\n  padding: 1em 0;\n  background: $footer-color;\n  display: flex;\n  flex-direction: row;\n\n  .pi-menu {\n    margin: 0 auto;\n    max-width: 1000px;\n    column-width: 300px;\n    display: block;\n\n    .pi-item {\n      display: block;\n      padding: 1em 2em;\n    }\n  }\n}\n\n.app-menu {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  padding: 0;\n  margin: 0;\n  width: 300px;\n  max-width: 100%;\n  background: lighten($header-color, 15%);\n  transform: translateX(-100%);\n  transition: all 0.1s ease;\n  padding-top: 85px;\n  z-index: 1;\n\n  &.is-open {\n    transform: none;\n    box-shadow: $menu-shadow-size 0px $menu-shadow-size (-$menu-shadow-size) rgba(0, 0, 0, 0.2);\n  }\n\n  .app-menu-content {\n    overflow-y: auto;\n    height: 100%;\n  }\n\n  .pi-menu {\n    display: flex;\n    flex-direction: column;\n    list-style: none;\n\n    > .pi-item {\n      flex: 1;\n      margin: 1px 0;\n\n      > a {\n        display: block;\n        border-left: 5px solid $header-color;\n        padding: 1em;\n\n        &:hover {\n          border-left-color: $menu-color;\n        }\n      }\n    }\n  }\n}\n\n.pi-spinner {\n  position: relative;\n  width: $basic-spinner-dimensions;\n  height: $basic-spinner-dimensions;\n  font-size: 0;\n\n  &:before,\n  &:after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    border-width: 4px;\n    border-style: solid;\n    border-radius: 50%;\n  }\n\n  @keyframes rotate-animation {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes anti-rotate-animation {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(-360deg);\n    }\n  }\n\n  &:before {\n    width: $main-spinner-dimensions;\n    height: $main-spinner-dimensions;\n    border-bottom-color: $basic-dark-color;\n    border-right-color: $basic-dark-color;\n    border-top-color: rgba($basic-dark-color, 0);\n    border-left-color: rgba($basic-dark-color, 0);\n    top: 0;\n    left: 0;\n    animation: rotate-animation 1s linear 0s infinite;\n  }\n\n  &:after {\n    width: $small-spinner-dimensions;\n    height: $small-spinner-dimensions;\n    border-bottom-color: $basic-dark-color;\n    border-right-color: $basic-dark-color;\n    border-top-color: rgba($basic-dark-color, 0);\n    border-left-color: rgba($basic-dark-color, 0);\n    top: ($main-spinner-dimensions - $small-spinner-dimensions) / 2;\n    left: ($main-spinner-dimensions - $small-spinner-dimensions) / 2;\n    animation: anti-rotate-animation 0.85s linear 0s infinite;\n  }\n}\n\n$tile-height: 70px;\n$tile-width: 70px;\n$tile-gap: 10px;\n\n.pi-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.pi-dashboard {\n  flex: 1;\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, $tile-width);\n  grid-template-rows: repeat(auto-fit, $tile-height);\n  grid-gap: $tile-gap;\n  overflow: visible;\n\n  .pi-tile {\n    display: flex;\n    position: relative;\n\n    &.small {\n      grid-column: span 1;\n      grid-row: span 1;\n      width: $tile-width;\n      height: $tile-height;\n    }\n\n    &.medium {\n      grid-column: span 2;\n      grid-row: span 2;\n      width: 2 * $tile-width + 1 * $tile-gap;\n      height: 2 * $tile-height + 1 * $tile-gap;\n    }\n\n    &.wide {\n      grid-column: span 4;\n      grid-row: span 2;\n      width: 4 * $tile-width + 3 * $tile-gap;\n      height: 2 * $tile-height + 1 * $tile-gap;\n    }\n\n    &.large {\n      grid-column: span 4;\n      grid-row: span 4;\n      width: 4 * $tile-width + 3 * $tile-gap;\n      height: 4 * $tile-height + 3 * $tile-gap;\n    }\n\n    &:hover {\n      outline: rgba(29, 29, 29, 0.1) solid 4px;\n    }\n  }\n}\n\n.pi-search {\n  position: relative;\n  flex: 1;\n  display: flex;\n  justify-content: center;\n\n  input[type=search] {\n    font-size: 1em;\n    border: 1px solid transparent;\n    background-color: #f1f1f1;\n    padding: 10px;\n    font-size: 16px;\n    max-width: 80%;\n    width: 250px;\n    box-sizing: border-box;\n    transition: width ease 0.1s;\n\n    @media screen and (max-width: $breakpoint-mobile) {\n      width: 100px;\n    }\n  }\n\n  &:focus-within input[type=search] {\n    width: 90%;\n    max-width: 90%;\n\n    & + .pi-details:not(:empty) {\n      display: block;\n      opacity: 1;\n    }\n  }\n\n  .pi-details {\n    display: none;\n    opacity: 0;\n    position: absolute;\n    z-index: 2;\n    top: 100%;\n    width: 90%;\n    box-sizing: border-box;\n    background: #f0f0f0;\n    padding: 1px;\n    transition: all 0.1s 0.1s ease;\n  }\n\n  .pi-item {\n    display: block;\n    padding: 10px;\n    cursor: pointer;\n    background-color: white;\n    border-bottom: 1px solid #d4d4d4;\n  }\n\n  .pi-item:hover {\n    background-color: #e9e9e9;\n  }\n\n  .pi-center {\n    padding: 30px;\n    background-color: white;\n  }\n}\n\n.form-row {\n  margin: 1em;\n\n  label {\n    display: block;\n    margin-bottom: 0.2em;\n  }\n\n  input {\n    padding: 0.3rem;\n    font-size: 1rem;\n  }\n\n  button {\n    padding: 0.5em 1em;\n    border: 1px solid black;\n    font-weight: bold;\n    border-radius: 4px;\n    cursor: pointer;\n  }\n\n  button:disabled {\n    border: 1px solid #ccc;\n    color: #ccc;\n    cursor: default;\n  }\n}\n\n.pi-error {\n  > img {\n    width: 600px;\n    max-width: 100%;\n    margin: 1em 0;\n  }\n\n  .pi-title {\n    color: $basic-dark-color;\n    display: block;\n    font-size: 1.5em;\n  }\n\n  .pi-description {\n    display: block;\n    margin: 0.5em 0;\n  }\n\n  .pi-details {\n    display: block;\n    margin: 0.5em 0;\n    color: #3e3e3e;\n    font-size: 0.8em;\n  }\n}\n\n.app-user {\n  position: relative;\n\n  .app-user-avatar {\n    display: flex;\n    align-items: center;\n    white-space: nowrap;\n    cursor: pointer;\n\n    img {\n      position: relative;\n      overflow: hidden;\n      width: 32px;\n      min-width: 32px;\n      height: 32px;\n      border-radius: 50% !important;\n      vertical-align: middle;\n      border-style: none;\n      box-sizing: border-box;\n      line-height: 1;\n      margin-right: 0.5em;\n    }\n\n    &::after {\n      display: inline-block;\n      box-sizing: border-box;\n      height: 8px;\n      width: 8px;\n      border-style: solid;\n      border-color: black;\n      border-width: 0px 2px 2px 0px;\n      position: relative;\n      transform: rotate(45deg);\n      transition: opacity 150ms ease-in-out;\n      content: '';\n    }\n  }\n\n  .app-user-details {\n    display: none;\n    list-style: none;\n    position: absolute;\n    background: white;\n    padding: 0;\n    right: 0;\n    border: 1px solid #ececec;\n    border-radius: 3px;\n    top: 40px;\n    cursor: default;\n\n    li {\n      display: block;\n      padding: 10px;\n      max-width: 300px;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      text-align: right;\n\n      & > a {\n        display: block;\n      }\n\n      &.sep {\n        border-bottom: 1px solid #ccc;\n        padding: 0;\n      }\n\n      .user-name {\n        font-weight: bold;\n        color: #666;\n        display: block;\n        font-size: 0.6em;\n      }\n    }\n\n    &:before, &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      bottom: 100%;\n      width: 0;\n      height: 0;\n    }\n\n    &:before {\n      right: 27px;\n      border: 6px solid transparent;\n      border-bottom-color: #ececec;\n    }\n\n    &:after {\n      right: 28px;\n      border: 5px solid transparent;\n      border-bottom-color: #fff;\n    }\n  }\n\n  &.is-open {\n    img {\n      opacity: 0.8;\n    }\n\n    .app-user-details {\n      display: block;\n    }\n\n    &::after {\n      opacity: 0.2;\n    }\n  }\n}\n","$bg-color: white;\n$basic-dark-color: #56aa1c;\n$header-color: #abcdef;\n$footer-color: lighten($header-color, 10%);\n$menu-color: darken($header-color, 20%);\n$border-width: 4px;\n$basic-spinner-dimensions: 50px;\n$main-spinner-dimensions: $basic-spinner-dimensions - $border-width * 2;\n$small-spinner-dimensions: $main-spinner-dimensions * 0.7;\n$menu-shadow-size: 30px;\n\n$hamburger-padding: 15px 0 !default;\n$hamburger-layer-width: 40px !default;\n$hamburger-layer-height: 4px !default;\n$hamburger-layer-spacing: 6px !default;\n$hamburger-layer-color: #000 !default;\n$hamburger-layer-border-radius: 4px !default;\n$hamburger-hover-opacity: 0.7 !default;\n$hamburger-active-layer-color: $hamburger-layer-color !default;\n$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;\n$hamburger-hover-use-filter: false !default;\n$hamburger-hover-filter: opacity(50%) !default;\n$hamburger-active-hover-filter: $hamburger-hover-filter !default;\n\n$breakpoint-mobile: 450px;\n$breakpoint-tablet: 650px;\n\n@import './layout';\n@import './burger';\n",".hamburger {\n  padding: $hamburger-padding;\n  display: inline-block;\n  cursor: pointer;\n\n  transition-property: opacity, filter;\n  transition-duration: 0.15s;\n  transition-timing-function: linear;\n\n  // Normalize (<button>)\n  font: inherit;\n  color: inherit;\n  text-transform: none;\n  background-color: transparent;\n  border: 0;\n  margin: 0;\n  overflow: visible;\n  transform: scale(0.6);\n\n  &:hover {\n    @if $hamburger-hover-use-filter == true {\n      filter: $hamburger-hover-filter;\n    }\n    @else {\n      opacity: $hamburger-hover-opacity;\n    }\n  }\n\n  &.is-active {\n    &:hover {\n      @if $hamburger-hover-use-filter == true {\n        filter: $hamburger-active-hover-filter;\n      }\n      @else {\n        opacity: $hamburger-active-hover-opacity;\n      }\n    }\n\n    .hamburger-inner,\n    .hamburger-inner::before,\n    .hamburger-inner::after {\n      background-color: $hamburger-active-layer-color;\n    }\n  }\n}\n\n.hamburger-box {\n  width: $hamburger-layer-width;\n  height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;\n  display: inline-block;\n  position: relative;\n}\n\n.hamburger-inner {\n  display: block;\n  top: 50%;\n  margin-top: $hamburger-layer-height / -2;\n\n  &,\n  &::before,\n  &::after {\n    width: $hamburger-layer-width;\n    height: $hamburger-layer-height;\n    background-color: $hamburger-layer-color;\n    border-radius: $hamburger-layer-border-radius;\n    position: absolute;\n    transition-property: transform;\n    transition-duration: 0.15s;\n    transition-timing-function: ease;\n  }\n\n  &::before,\n  &::after {\n    content: \"\";\n    display: block;\n  }\n\n  &::before {\n    top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;\n  }\n\n  &::after {\n    bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;\n  }\n}\n\n.hamburger--arrow.is-active {\n  .hamburger-inner {\n    &::before {\n      transform: translate3d($hamburger-layer-width * -0.2, 0, 0) rotate(-45deg) scale(0.7, 1);\n    }\n\n    &::after {\n      transform: translate3d($hamburger-layer-width * -0.2, 0, 0) rotate(45deg) scale(0.7, 1);\n    }\n  }\n}\n"]}