halleyx-ui-framework 11.7.80 → 11.7.81-beta.2

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

@@ -1,488 +0,0 @@
-// .switch-containerr-regular {
-//   //     width: -moz-fit-content;
-//   width: fit-content;
-//   // padding: 14px 16px 14px 16px;
-//   border: 1px solid var(--hlx-color-primary);
-//   box-sizing: border-box;
-//   border-radius: 8px;
-//   display: flex;
-//   flex-direction: row;
-//   height: 38px;
-//   .switch-item-regular input[type='radio'] {
-//     position: absolute;
-//     opacity: 0;
-//     width: 0;
-//     height: 0;
-//   }
-
-//   .switch-item-regular input[type='radio']:checked + label {
-//     background-color: #007aff;
-//     color: #fff;
-//   }
-
-//   .switch-item-regular {
-//     padding: 10px 14px 10px 14px;
-//     background: var(--hlx-color-white);
-//     text-align: center;
-//     cursor: pointer;
-//     border-radius: 7px;
-//     display: flex;
-//     flex-direction: row;
-//     align-items: center;
-//     justify-content: center;
-
-//     font-size: 14px;
-//     color: var(--hlx-text-color-primary);
-//     // width: 100%;
-
-//     .content-regular {
-//       display: flex;
-//       cursor: pointer;
-//       font-size: 14px;
-//       flex-direction: row;
-//       align-items: center;
-//       justify-content: center;
-//       i {
-//         font-size: var(--hlx-icon-size-sm);
-//         margin-right: 8px;
-//       }
-//     }
-//   }
-//   .noborder {
-//     border: none;
-//   }
-//   .border {
-//     border-right: 1px solid var(--hlx-color-primary);
-//     border-top-right-radius: 0px;
-//     border-bottom-right-radius: 0px;
-//     // border: none;
-//   }
-//   .selected-switch-regular {
-//     color: var(--hlx-color-white);
-//     background: var(--hlx-color-primary);
-//   }
-//   .noradius {
-//     border-radius: 0;
-//   }
-//   // .radius {
-//   // }
-//   .noleftradius {
-//     border-top-left-radius: 0px;
-//     border-bottom-left-radius: 0px;
-//   }
-// }
-// .switch-containerr-tab-top {
-//   //     width: -moz-fit-content;
-//   width: fit-content;
-//   // padding: 14px 16px 14px 16px;
-//   // border-top: 1px solid var(--hlx-border-color);
-//   box-sizing: border-box;
-//   border-radius: 6px;
-//   display: flex;
-//   flex-direction: row;
-//   height: 38px;
-//   .switch-item-tab-top {
-//     padding: 10px 14px 10px 14px;
-//     background: var(--hlx-color-white);
-//     text-align: center;
-//     cursor: pointer;
-//     border-radius: 6px;
-//     display: flex;
-//     flex-direction: row;
-//     align-items: center;
-//     justify-content: center;
-
-//     font-size: 14px;
-//     color: var(--hlx-text-color-primary);
-//     // width: 100%;
-
-//     .content-tab-top {
-//       display: flex;
-//       font-size: 14px;
-//       flex-direction: row;
-//       cursor: pointer;
-//       align-items: center;
-//       justify-content: center;
-//       i {
-//         font-size: var(--hlx-icon-size-sm);
-//         margin-right: 8px;
-//       }
-//       input[type='radio'] {
-//         position: absolute;
-//         opacity: 0;
-//         width: 0;
-//         height: 0;
-//       }
-//     }
-//   }
-//   .noborder {
-//     border: none;
-//   }
-//   // .border{
-//   //   border-right: 1px solid var(--hlx-color-primary);
-//   //   border-top-right-radius: 0px;
-//   //   border-bottom-right-radius: 0px;
-//   //   // border: none;
-//   // }
-//   .selected-switch-tab-top {
-//     color: var(--hlx-color-primary);
-//     border-top: 2px solid var(--hlx-color-primary);
-//     border-top-right-radius: 0px;
-//     border-top-left-radius: 0px;
-//     // background: var(--hlx-color-primary);
-//   }
-//   .noradius {
-//     border-radius: 0;
-//   }
-//   // .radius {
-//   // }
-//   .noleftradius {
-//     border-top-left-radius: 0px;
-//     border-bottom-left-radius: 0px;
-//   }
-// }
-// .switch-containerr-tab-bottom {
-//   //     width: -moz-fit-content;
-//   width: fit-content;
-//   // padding: 14px 16px 14px 16px;
-//   // border-bottom: 1px solid var(--hlx-border-color);
-//   box-sizing: border-box;
-//   border-radius: 6px;
-//   display: flex;
-//   flex-direction: row;
-//   height: 38px;
-//   .switch-item-tab-bottom {
-//     padding: 10px 14px 10px 14px;
-//     background: var(--hlx-color-white);
-//     text-align: center;
-//     cursor: pointer;
-//     // border-radius: 6px;
-//     display: flex;
-//     flex-direction: row;
-//     align-items: center;
-//     justify-content: center;
-
-//     font-size: 14px;
-//     color: var(--hlx-text-color-primary);
-//     border-bottom: 2px solid transparent;
-//     // width: 100%;
-
-//     .content-tab-bottom {
-//       display: flex;
-//       cursor: pointer;
-//       font-size: 14px;
-//       flex-direction: row;
-//       align-items: center;
-//       justify-content: center;
-//       i {
-//         font-size: var(--hlx-icon-size-sm);
-//         margin-right: 8px;
-//       }
-//       input[type='radio'] {
-//         position: absolute;
-//         opacity: 0;
-//         width: 0;
-//         height: 0;
-//       }
-//     }
-//   }
-//   .noborder {
-//     border: none;
-//   }
-//   // .border{
-//   //   border-right: 1px solid var(--hlx-color-primary);
-//   //   border-top-right-radius: 0px;
-//   //   border-bottom-right-radius: 0px;
-//   //   // border: none;
-//   // }
-//   .selected-switch-tab-bottom {
-//     color: var(--hlx-color-primary);
-//     border-bottom: 2px solid var(--hlx-color-primary);
-//     border-top-right-radius: 0px;
-//     border-top-left-radius: 0px;
-//   }
-//   .noradius {
-//     border-radius: 0;
-//   }
-//   // .radius {
-//   // }
-//   .noleftradius {
-//     border-top-left-radius: 0px;
-//     border-bottom-left-radius: 0px;
-//   }
-// }
-
-// .switchselectvalue {
-//   border: none;
-//   background-color: var(--hlx-color-primary) !important;
-//   color: var(--hlx-color-white) !important;
-// }
-.hlx-btn-switch-group {
-  .hlx-switch-btn {
-    outline: none !important;
-  }
-  .hlx-switch-btn {
-    font-family: var(--hlx-font-type-content);
-    display: inline-flex;
-    align-items: center;
-    letter-spacing: 0.14px;
-    // padding: 10px 14px;
-    padding: .5em .7em;
-    margin-bottom: 0;
-    font-size: 14px;
-    font-weight: 400;
-    // line-height: 1.42857143;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
-    -ms-touch-action: manipulation;
-    touch-action: manipulation;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    background-image: none;
-    border: 2px solid transparent;
-    border-radius: 4px;
-    // border-color: var(--hlx-color-primary);
-    border-color: var(--hlx-color-primary);
-    border-width: thin;
-    &.--border-bottom,
-    &.--border-top {
-      border-color: transparent;
-      border: none;
-      border-radius: 0 !important;
-      // border-width: unset;
-    }
-  }
-
-  & > .hlx-switch-btn:last-child:not(:first-child),
-  & > .dropdown-toggle:not(:first-child) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  & > .hlx-switch-btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
-    border-radius: 0;
-  }
-
-  & .hlx-switch-btn + .hlx-switch-btn,
-  & .hlx-switch-btn + &,
-  & & + .hlx-switch-btn,
-  & & + & {
-    margin-left: -1px;
-  }
-
-  .hlx-switch-btn-default {
-    color: var(--hlx-text-color-primary);
-    // background-color: #fff;
-    border-color: var(--hlx-color-primary);
-    border-width: thin;
-    &.--border-bottom,
-    &.--border-top {
-      border: 2px solid;
-      border-color: transparent;
-    }
-
-    &:hover,
-    &:focus {
-      color: var(--hlx-text-color-primary);
-      background-color: va(--hlx-text-color-secondary);
-      // border-color: #adadad;
-      -webkit-box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
-      box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
-      &.--border-bottom {
-        color: var(--hlx-color-primary) !important;
-        background-color: transparent !important;
-        -webkit-box-shadow: none;
-        box-shadow: none;
-        // border: 2px solid transparent;
-
-        // border-color: transparent;
-      }
-    }
-    &:focus {
-      -webkit-box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
-      box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
-    }
-    // &:focus {
-    //   color: var(--hlx-text-color-primary);
-    //   background-color: #e6e6e6;
-    //   border-color: #8c8c8c;
-    // }
-  }
-  .hlx-switch-btn:active {
-    background-image: none;
-    outline: 0;
-    -webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.125);
-    box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.125);
-    // border-width: thin;
-
-    &.--border-bottom {
-      -webkit-box-shadow: none;
-      box-shadow: none;
-      color: var(--hlx-color-primary) !important;
-      background-color: transparent !important;
-      // border-width: 2px;
-      // border-width: unset;
-
-      // border-bottom-color: var(--hlx-color-primary);
-    }
-  }
-  .hlx-switch-btn-read-only {
-    color: var(--hlx-text-color-primary);
-    // background-color: #fff;
-    border-color: var(--hlx-color-primary);
-    border-width: thin;
-    &.--border-bottom,
-    &.--border-top {
-      border: 2px solid;
-      border-color: transparent;
-      &:active{
-        color:inherit !important;
-      }
-    }
-
-    &:hover,
-    &:focus {
-      cursor: default;
-      color: var(--hlx-text-color-primary);
-      background-color: va(--hlx-text-color-secondary);
-      // border-color: #adadad;
-      -webkit-box-shadow: none;
-      box-shadow: none;
-      &.--border-bottom {
-        color: inherit !important;
-        background-color: transparent !important;
-        -webkit-box-shadow: none;
-        box-shadow: none;
-        // border: 2px solid transparent;
-
-        // border-color: transparent;
-      }
-    }
-    &:focus {
-      -webkit-box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
-      box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
-    }
-    // &:focus {
-    //   color: var(--hlx-text-color-primary);
-    //   background-color: #e6e6e6;
-    //   border-color: #8c8c8c;
-    // }
-  }
-
-
-
-  .hlx-switch-btn.focus,
-  .hlx-switch-btn:focus,
-  .hlx-switch-btn:hover {
-    color: var(--hlx-text-color-primary);
-    text-decoration: none;
-    z-index: 0;
-  }
-
-  &,
-  &-vertical {
-    position: relative;
-    display: flex;
-    flex-wrap: nowrap;
-
-    width: 100%;
-    // flex-wrap: wrap;
-    align-items: center;
-    align-content: center;
-  }
-
-  .hlx-switch-btn-default.active,
-  .hlx-switch-btn-default:active,
-  .open > .dropdown-toggle.hlx-switch-btn-default {
-    color: var(--hlx-text-color-primary);
-    // background-color: va(--hlx-text-color-secondary);
-  }
-
-  .hlx-switch-btn-active {
-    background-color: var(--hlx-color-primary) !important;
-    color: white;
-    // border-color: #265e4b;
-    border-width: thin;
-
-    z-index: 5;
-    &:focus {
-      box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.125);
-    }
-    &.--border-bottom {
-      border-width: unset;
-
-      color: var(--hlx-color-primary) !important;
-      background-color: transparent !important;
-      border-color: transparent !important ;
-      border-bottom-color: var(--hlx-color-primary) !important ;
-      // border-radius: 2.6px !important;
-      border-bottom-left-radius: 1.8px !important;
-      border-bottom-right-radius: 1.8px !important;
-      border: 2px solid;
-    }
-  }
-
-  .hlx-switch-btn-active:hover {
-    color: #fff;
-    background-color: var(--hlx-color-primary);
-    // border-color: #265e4b;
-    z-index: 5;
-    &.--border-bottom {
-      color: var(--hlx-color-primary) !important;
-      background-color: transparent !important;
-      border-color: transparent;
-    }
-  }
-  .hlx-switch-btn-active.focus,
-  .hlx-switch-btn-active:focus {
-    color: white;
-    background-color: var(--hlx-color-primary);
-    // border-color: #265e4b;
-    &.--border-bottom {
-      color: var(--hlx-color-primary) !important;
-      background-color: transparent !important;
-      border-color: transparent;
-    }
-  }
-  & > .hlx-switch-btn:first-child:not(:last-child):not(.dropdown-toggle) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  & > .hlx-switch-btn:first-child {
-    margin-left: 0;
-  }
-  &-vertical > .hlx-switch-btn,
-  & > .hlx-switch-btn {
-    position: relative;
-    float: left;
-  }
-
-  & > .hlx-switch-btn:first-child:not(:last-child):not(.dropdown-toggle) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  & > .hlx-switch-btn:first-child {
-    margin-left: 0;
-  }
-
-  .hlx-switch-btn.active.focus,
-  .hlx-switch-btn.active:focus,
-  .hlx-switch-btn.focus,
-  .hlx-switch-btn:active.focus,
-  .hlx-switch-btn:active:focus,
-  .hlx-switch-btn:focus {
-    outline: thin dotted;
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
-  }
-
-  & > .hlx-switch-btn.active,
-  & > .hlx-switch-btn:active,
-  & > .hlx-switch-btn:focus {
-    z-index: 2;
-  }
-}