feat: docs app

docs/app/blocks/components/live-example-block/live-example-block.component.scss

@@ -0,0 +1,170 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+
+  // TODO: move some variables in Nebular themes
+  // colors
+  $action-bg: white;
+  $action-fg: nb-theme(color-fg-heading-light);
+  $block-bg-default: #ebeff5;
+  $block-bg-cosmic: #2f296b;
+  $block-fg-cosmic: #7d838b;
+  $block-bg-corporate: #f1f5f8;
+
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 1rem 2.5rem 1.5rem;
+  border-radius: 0.5rem;
+  position: relative;
+
+  .header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1.875rem;
+  }
+
+  .title,
+  .actions {
+    margin-top: 0.5rem;
+  }
+
+  .title {
+    margin-right: 1rem;
+    font-weight: bold;
+    text-transform: capitalize;
+  }
+
+  .actions {
+    display: flex;
+    width: 100%;
+
+    .icon {
+      font-size: 0.95rem;
+    }
+  }
+
+  .action-item {
+    background-color: $action-bg;
+    border-radius: 0.375rem;
+    height: 100%;
+    line-height: 1;
+    border: none;
+    color: $action-fg;
+    padding: 0.5rem 1rem;
+    margin-left: 0.625rem;
+    cursor: pointer;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:hover, &:focus {
+      text-decoration: none;
+    }
+  }
+
+  .action-selector {
+    position: relative;
+
+    .action-item {
+      padding: 0;
+      color: transparent;
+    }
+
+    .icon {
+      color: $action-fg;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    /* Target IE9 - IE11 */
+    select::-ms-expand {
+      display: none;
+    }
+
+    select {
+      font-size: 0.875rem;
+      appearance: none;
+    }
+  }
+
+  &.theme-default {
+    background-color: $block-bg-default;
+  }
+
+  &.theme-cosmic {
+    background-color: $block-bg-cosmic;
+
+    .title {
+      color: white;
+    }
+    .action-item {
+      color: $block-fg-cosmic;
+    }
+  }
+
+  &.theme-corporate {
+    background-color: $block-bg-corporate;
+  }
+
+  .iframe-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  iframe {
+    width: 100%;
+    border: none;
+    transform: translateZ(0);
+
+    &.loading {
+      visibility: hidden;
+    }
+  }
+
+  .icon-loading {
+    animation: rotation 2s infinite linear;
+    color: $action-fg;
+    font-size: 1.5rem;
+    font-weight: normal;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  @-webkit-keyframes rotation {
+    from {
+      -webkit-transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(359deg);
+    }
+  }
+
+  @media screen and (min-width: 23em) {
+    .action-selector {
+      .action-item {
+        padding: 0.5rem 1rem;
+        color: $action-fg;
+      }
+      select.action-item {
+        padding: 0 2.5rem;
+      }
+
+      .icon {
+        left: 1.25rem;
+        transform: translate(0, -50%);
+      }
+    }
+
+    .actions {
+      width: auto;
+    }
+  }
+}
+