halleyx-ui-framework 1.0.4

package/dist/src/assets/styles/source_content.scss

@@ -0,0 +1,14 @@
+.feature-title{
+    color: #606266;
+  }
+  .feature-content{
+        font-size: 0.875rem;
+      line-height: 1.25rem;
+      code{
+            margin: 0;
+      border-radius: 4px;
+      padding: .15rem .5rem;
+      color: #303133;
+      background-color: #f5f7fa;
+      }
+  }

package/dist/src/assets/styles/speeddial.scss

@@ -0,0 +1,200 @@
+@keyframes pop-in {
+    0% { 
+        transform: scale(0);
+    }
+    100% { 
+        transform: scale(1);
+    }
+}
+@keyframes pop-out {
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(0);
+    }
+}
+
+@mixin circle($size) {
+  display: inline-block;  
+  border-radius: 50%;
+  @if $size == small {
+    width: 38px;
+    height: 38px;
+    font-size: var(--hlx-icon-size-sm);
+    line-height: 60px;
+  }
+  @else if $size == tiny {
+    width: 38px;
+    height: 38px;
+    font-size: var(--hlx-icon-size-sm);
+    line-height: 38px;
+  }
+}
+
+.speed-dial {
+    text-align: center;
+    display: inline-block;
+    width: 38px;
+    font-family: var(--hlx-font-type-content);
+    div,
+    div:hover,
+    div:active,
+    div:visited
+    div:focus 
+    {
+        text-decoration: none;
+    }
+    .toggle {
+        cursor: pointer;
+        @include circle(small);
+        display: flex;
+        background: var(--hlx-color-primary);
+        border: none;
+        margin: 8px 0;
+        .circle{
+            i{
+
+                color: #fff;
+            }
+        }
+    }
+    &:hover .dials .circle {
+        display: flex;
+        animation: pop-in .3s ease both;
+    }
+    .dials {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .circle {
+            cursor: pointer;
+            @include circle(tiny);
+            display: flex;
+            margin: 8px 0;
+            transform: scale(0);
+            background: #fff;
+            border: 1px solid var(--hlx-color-primary);
+            display: none;
+            // animation: pop-out .3s ease both;
+            &:hover{
+                background: var(--hlx-color-primary-light);
+                border: 1px solid var(--hlx-color-primary-dark);
+                i{
+
+                    color: var(--hlx-color-primary-dark)
+                }
+            }
+        }
+        .circle.pop-in {
+            animation: pop-in .3s ease both;
+            &:hover{
+                background: var(--hlx-color-primary-light);
+                border: 1px solid var(--hlx-color-primary-dark);
+                i{
+
+                    color: var(--hlx-color-primary-dark)
+                }
+            }
+        }
+        @for $i from 0 through 6 {
+             li:nth-child(#{$i}) a { 
+                 animation-delay: $i * 0.1s; 
+             }
+        }
+    }
+}
+.speed-dial-horizontal {
+    font-family: var(--hlx-font-type-content);
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    div,
+    div:hover,
+    div:active,
+    div:visited
+    div:focus 
+    {
+        text-decoration: none;
+    }
+    .toggle {
+        cursor: pointer;
+        @include circle(small);
+        display: flex;
+        background: var(--hlx-color-primary);
+        border: none;
+        margin: 8px 8px 8px 0;
+        .circle{
+            i{
+
+                color: #fff;
+            }
+        }
+    }
+    &:hover .dials .circle {
+        display: flex;
+        animation: pop-in .3s ease both;
+    }
+    .dials {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        .circle {
+            cursor: pointer;
+            @include circle(tiny);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 8px;
+            transform: scale(0);
+            background: #fff;
+            border: 1px solid var(--hlx-color-primary);
+            display: none;
+            animation: pop-out .3s ease both;
+            &:hover{
+                background: var(--hlx-color-primary-light);
+                border: 1px solid var(--hlx-color-primary-dark);
+                i{
+
+                    color: var(--hlx-color-primary-dark)
+                }
+            }
+        }
+        .circle.pop-in {
+            animation: pop-in .3s ease both;
+            &:hover{
+                background: var(--hlx-color-primary-light);
+                border: 1px solid var(--hlx-color-primary-dark);
+                i{
+
+                    color: var(--hlx-color-primary-dark)
+                }
+            }
+        }
+        @for $i from 0 through 6 {
+             li:nth-child(#{$i}) a { 
+                 animation-delay: $i * 0.1s; 
+             }
+        }
+    }
+}
+
+.ic{
+    color: #fff !important;
+    font-size: var(--hlx-icon-size-sm) !important;
+}
+
+.ico{
+    i{
+        color: var(--hlx-color-primary);
+        font-size:var(--hlx-icon-size-sm);
+    }
+}

package/dist/src/assets/styles/stepControl.scss

@@ -0,0 +1,76 @@
+#hlx-step-controler-005.stepper-control-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  .stepper {
+    user-select: none;
+    border-radius: 8px;
+    // box-shadow: 1px 1px 9px -5.7px;
+    display: inline-block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &:hover {
+      cursor: pointer;
+    }
+    &.next-stepper {
+      width: 24px;
+      height: 24px;
+      // box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px,
+      //   rgba(0, 0, 0, 0.24) 0px 1px 2px;
+      box-shadow: 0 1px 9px -2px;
+      &:hover:not(.limited) {
+        border: 1px solid var(--hlx-color-primary-dark);
+      }
+      &.limited {
+        border: 1px solid var(--hlx-border-color);
+        cursor: default;
+        i {
+          color: var(--hlx-border-color);
+        }
+      }
+      i {
+        color: var(--hlx-color-primary);
+      }
+    }
+    &.counter {
+      width: 38px;
+      font-size: var(--hlx-font-content-size-sm);
+      height: 38px;
+      box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 6px,
+        rgba(0, 0, 0, 0.23) 0px 3px 6px;
+      background: var(--hlx-color-primary-dark);
+      .current-page {
+        color: white !important;
+        // font-weight: bolder;
+      }
+    }
+    &.prev-stepper {
+      width: 24px;
+      height: 24px;
+      box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px,
+        rgba(0, 0, 0, 0.24) 0px 1px 2px;
+      display: flex;
+      z-index: 100;
+      justify-content: center;
+      align-items: center;
+      &:hover:not(.limited) {
+        border: 1px solid var(--hlx-color-primary-dark);
+      }
+      &.limited {
+        cursor: default;
+
+        border: 1px solid var(--hlx-border-color);
+        i {
+          color: var(--hlx-border-color);
+        }
+      }
+      i {
+        color: var(--hlx-color-primary);
+      }
+    }
+  }
+}

package/dist/src/assets/styles/style.css

@@ -0,0 +1,252 @@
+/* .feature-title {
+  color: #606266;
+}
+
+.feature-content {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.feature-content code {
+  margin: 0;
+  border-radius: 4px;
+  padding: .15rem .5rem;
+  color: #303133;
+  background-color: #f5f7fa;
+}
+
+@font-face {
+  font-family: OpenSans;
+  src: url("~@/assets/fonts/OpenSans.ttf") format("opentype");
+}
+
+@font-face {
+  font-family: QuickSand;
+  src: url("~@/assets/fonts/Quicksand.ttf") format("opentype");
+}
+
+* {
+  font-family: OpenSans;
+}
+
+.primary-button {
+  cursor: pointer;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  height: 30px;
+  min-width: 65px;
+  padding: 0px 30px;
+  color: #f6f6f6;
+  border-radius: 17px;
+  background-color: #f97a19;
+  border: 2px solid #f97a19;
+  margin-left: 15px;
+}
+
+.primary-button:hover, .primary-button:active {
+  background-color: #f9ac19;
+  border: 2px solid #f9ac19;
+  padding: 0px 30px;
+}
+
+.primary-button:focus {
+  outline: 2px solid #f6f6f6;
+  -webkit-box-shadow: 0 0 1px 4px #2b96e4;
+          box-shadow: 0 0 1px 4px #2b96e4;
+}
+
+.secondary-button {
+  cursor: pointer;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  height: 30px;
+  min-width: 65px;
+  padding: 0px 20px;
+  color: #f97a19;
+  border-radius: 17px;
+  background-color: #f6f6f6;
+  border: 1px solid #f97a19;
+}
+
+.secondary-button:hover, .secondary-button:active {
+  background-color: #f6f6f6;
+  border: 1px solid #f9ac19;
+  padding: 0px  20px;
+  color: #f9ac19;
+}
+
+.secondary-button:focus {
+  outline: 2px solid #f6f6f6;
+  -webkit-box-shadow: 0 0 1px 4px #2b96e4;
+          box-shadow: 0 0 1px 4px #2b96e4;
+}
+
+.modal-primary-button {
+  cursor: pointer;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  height: 30px;
+  min-width: 55px;
+  padding: 0px 10px;
+  color: #565553;
+  background-color: #f9ac19;
+  border: none;
+  border-radius: 5px;
+  margin-left: 15px;
+}
+
+.modal-primary-button:hover, .modal-primary-button:active {
+  background-color: #f97a19;
+  padding: 0px 10px;
+}
+
+.modal-primary-button:focus {
+  outline: 1px solid #f6f6f6;
+}
+
+.modal-secondary-button {
+  cursor: pointer;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  height: 30px;
+  min-width: 55px;
+  padding: 0px 10px;
+  color: #565553;
+  background-color: #f6f6f6;
+  border: 1px solid #969393;
+  border-radius: 5px;
+}
+
+.modal-secondary-button:hover, .modal-secondary-button:active {
+  background-color: #f6f6f6;
+  border: 1px solid #f9ac19;
+  padding: 0px  10px;
+  color: #f9ac19;
+}
+
+.component-heading, .component-side-heading {
+  font-family: Quicksand;
+  margin: 50px 0 20px 0;
+}
+
+.component-side-heading {
+  margin: 30px 0 20px 0;
+  font-size: 18px ;
+}
+
+.component-description {
+  font-size: 14px;
+}
+
+.notes {
+  padding-left: 10px;
+  font-size: 14px;
+  width: 100%;
+  background-color: #FFF1D3;
+  border-left: 3px solid #f97a19;
+  border-radius: 5px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.notes .note-title {
+  font-weight: bold;
+}
+
+.notes .note-body {
+  margin-left: 10px;
+  word-spacing: 2px;
+}
+
+.component-example {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  margin: 40px 0;
+  border: 1px solid #d6d8d3;
+  border-radius: 5px;
+}
+
+.component-example .example-body {
+  height: 100%;
+  padding: 20px;
+}
+
+.component-example .example-footer {
+  height: 40px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0 20px;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-top: 1px solid #d6d8d3;
+}
+
+.component-example .example-footer .icon-code-regular::before {
+  font-size: 18px;
+}
+
+.component-example .example-footer .icon {
+  font-size: 14px !important;
+  margin-left: 10px;
+  height: 30px;
+  width: 30px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  border-radius: 5px;
+}
+
+.component-example .example-footer .icon:hover {
+  cursor: pointer;
+  background-color: #FFF1D3;
+  color: #f9ac19;
+}
+
+.component-example .example-footer .active-icon {
+  margin-left: 10px;
+  height: 30px;
+  width: 30px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  border-radius: 5px;
+  background-color: #f9ac19;
+  color: #f6f6f6;
+}
+
+.component-example .example-footer .active-icon:hover {
+  cursor: pointer;
+  background-color: #FFF1D3;
+  color: #f9ac19;
+}
+
+.hljs {
+  font-size: 14px !important;
+} */
+/*# sourceMappingURL=style.css.map */

package/dist/src/assets/styles/style.css.map

@@ -0,0 +1,13 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "variables.scss",
+        "partials/_partials.scss",
+        "partials/_source_content.scss",
+        "partials/variables.scss",
+        "partials/_component_layout.scss"
+    ],
+    "names": [],
+    "file": "style.css"
+}