@saooti/octopus-sdk 1.0.0 → 1.1.1

package/src/assets/bootstrap_scss/_buttons.scss

@@ -1,291 +0,0 @@
-// stylelint-disable selector-no-qualifying-type
-
-// Buttons
-.btn {
-  display: inline-block;
-  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
-  @include transition($btn-transition);
-  
-  background: $octopus-light-secondary-color ;
-  border: 0;
-  border-radius: 50px;
-  font-size: 0.7rem;
-  cursor: pointer;
-  text-align: center;
-  transition: background .2s, border .2s, box-shadow .2s, color .2s;
-  vertical-align: middle;
-  white-space: nowrap;
-  color: black;
-  @media (max-width: 500px){
-    white-space: unset;
-  }
-  &:hover,
-  &:focus,
-  &:active,
-  &.active {
-    outline: none !important;
-    box-shadow: none;
-    text-decoration: none;
-  }
-  &:hover{
-    background: rgba($octopus-primary-color, 0.3) ;
-  }
-
-  &[disabled],
-  &:disabled,
-  &.disabled {
-    cursor: default;
-    opacity: .5;
-    pointer-events: none;
-  }
-
-  // Button Primary
-  &.btn-primary {
-    background: $octopus-third-color;
-    background: -moz-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-    background: -webkit-gradient(left top, right bottom, color-stop(0%, $octopus-third-color), color-stop(100%, $octopus-primary-color));
-    background: -webkit-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-    background: -o-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-    background: -ms-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-    background: linear-gradient(135deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d91f', endColorstr='#50b685', GradientType=1 );
-    border-color: $octopus-primary-color;
-    border-radius: 50px;
-    height: auto;
-    border-bottom: 0 solid transparent;
-    color: white !important;
-    &:focus,
-    &:hover {
-      background:$octopus-third-color;
-      background: -moz-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-      background: -webkit-gradient(left top, right bottom, color-stop(0%, $octopus-third-color), color-stop(100%, $octopus-primary-color));
-      background: -webkit-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-      background: -o-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-      background: -ms-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-      background: linear-gradient(135deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d91f', endColorstr='#4fcf91', GradientType=1 );
-      border: 0;
-    }
-    &:active,
-    &.active {
-      background: darken($octopus-primary-color, 4%);
-      border-color: darken($octopus-primary-color, 7%);
-    }
-  }
-  &.btn-light{
-    color: $octopus-primary-color;
-    background: transparent;
-  }
-  &.btn-auth{
-    &:focus,
-    &:hover {
-      background:$octopus-third-color;
-      background: -moz-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-      background: -webkit-gradient(left top, right bottom, color-stop(0%, $octopus-third-color), color-stop(100%, $octopus-primary-color));
-      background: -webkit-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-      background: -o-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-      background: -ms-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-      background: linear-gradient(135deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d91f', endColorstr='#4fcf91', GradientType=1 );
-      border: 0;
-    }
-    &:active,
-    &.active {
-      background: darken($octopus-primary-color, 4%);
-      border-color: darken($octopus-primary-color, 7%);
-    }
-  }
-//Button disable halo after click
-  .no-effect{
-  &:focus,
-    &:hover {
-      border-bottom: 0 !important;
-      outline: 0;
-      box-shadow: 0 0 0 0 transparent !important;
-    }
-  }
-  &.btn-underline{
-    background: none;
-    padding: 0;
-    margin: 0 2rem 1rem 0;
-    border-radius: 0;
-    @media (max-width: 600px) {
-      margin: 0 1rem 1rem 0;
-      font-size: 0.8em;
-    }
-  }
-
-  &.btn-arrow {
-    border-radius: 50px;
-    margin: 0.2rem;
-    width: 1.8rem;
-    height: 1.8rem;
-    background: $octopus-secondary-color;
-    padding: 0;
-    &:hover {
-      border: 0;
-      background: $octopus-secondary-color;
-    }
-  }
-
-  &.btn-link {
-    background: $octopus-secondary-color;
-    color: $octopus-primary-color;
-    font-weight: bold;
-    margin: 2rem;
-    width: fit-content;
-    align-self: center;
-    &:focus,
-    &:hover,
-    &:active,
-    &.active {
-      background: darken($octopus-secondary-color, 5%);
-      color: $octopus-primary-color;
-    }
-    @media (max-width: 500px){
-      margin: 0.3rem;
-    }
-  }
-
-  &.btn-linkPlus {
-    padding: 8px 16px;
-    font-size: 0.8rem;
-    border-radius: 50px;
-    background-color: #ddd;
-    color: #000;
-    box-shadow: none;
-    display: flex;
-    .saooti-plus{
-      line-height: 1.5 !important;
-      margin-left: 5px; 
-    }
-    &:focus,
-    &:hover,
-    &:active,
-    &.active {
-      background: $octopus-primary-color;
-      color: white;
-      border: 1px solid $octopus-primary-color;
-    }
-  }
-
-  &.btn-more{
-    background: $octopus-primary-color;
-    color: $octopus-background;
-    width: 2rem;
-    height: 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50px;
-    margin: 1rem;
-  }
-
-  &.btn-bigRound{
-    border: 1px #aaa solid;
-    background: none;
-    font-size: 3rem !important;
-    color: #666;
-    border-radius: 50%;
-    padding: 1rem;
-    margin-right: 1rem;
-    width: 5rem;
-    height: 5rem;
-  }
-
-  &.admin-button {
-    padding: 0.3rem;
-    height: 1.8rem;
-    width: 1.8rem;
-    font-size: 1rem;
-    display: inline-flex;
-    align-items: center;
-  }
-}
-
-
-.share-btn {
-  font-size: 1.3rem;
-  width: 2.5rem;
-  height: 2.5rem !important;
-  padding: 0.5rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.share-btn.m-3 {
-  margin: 0 1rem 0 0!important;
-}
-.btn-rss {
-  background: #ddd !important;
-  &:hover {
-    border: 0;
-    background: #ccc !important;
-  }
-}
-.btn-facebook {
-  background: #d8dfea !important;
-  color: #3b5998 !important;
-  &:hover {
-    background: #afbdd4 !important;
-  }
-}
-.btn-twitter {
-  background: #d2ecfc !important;
-  color: #1da1f2 !important;
-  &:hover {
-    background: #bbe3fb !important;
-  }
-}
-.btn-linkedin {
-  background: #0077b550 !important;
-  color: #0077b5 !important;
-  &:hover {
-    background: #00a0dc !important;
-  }
-}
-
-// Future-proof disabling of clicks on `<a>` elements
-a.btn.disabled,
-fieldset:disabled a.btn {
-  pointer-events: none;
-}
-
-
-
-
-//
-// Button Sizes
-//
-
-.btn-lg {
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
-}
-
-.btn-sm {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
-}
-
-
-//
-// Block button
-//
-
-.btn-block {
-  display: block;
-  width: 100%;
-
-  // Vertically space out multiple block buttons
-  + .btn-block {
-    margin-top: $btn-block-spacing-y;
-  }
-}
-
-// Specificity overrides
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-  &.btn-block {
-    width: 100%;
-  }
-}

package/src/assets/bootstrap_scss/_card.scss

@@ -1,278 +0,0 @@
-//
-// Base styles
-//
-
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
-  height: $card-height;
-  word-wrap: break-word;
-  background-color: $card-bg;
-  background-clip: border-box;
-  border: $card-border-width solid $card-border-color;
-  @include border-radius($card-border-radius);
-
-  > hr {
-    margin-right: 0;
-    margin-left: 0;
-  }
-
-  > .list-group:first-child {
-    .list-group-item:first-child {
-      @include border-top-radius($card-border-radius);
-    }
-  }
-
-  > .list-group:last-child {
-    .list-group-item:last-child {
-      @include border-bottom-radius($card-border-radius);
-    }
-  }
-}
-
-.card-body {
-  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
-  // as much space as possible, ensuring footers are aligned to the bottom.
-  flex: 1 1 auto;
-  // Workaround for the image size bug in IE
-  // See: https://github.com/twbs/bootstrap/pull/28855
-  min-height: 1px;
-  padding: $card-spacer-x;
-  color: $card-color;
-}
-
-.card-title {
-  margin-bottom: $card-spacer-y;
-}
-
-.card-subtitle {
-  margin-top: -$card-spacer-y / 2;
-  margin-bottom: 0;
-}
-
-.card-text:last-child {
-  margin-bottom: 0;
-}
-
-.card-link {
-  @include hover() {
-    text-decoration: none;
-  }
-
-  + .card-link {
-    margin-left: $card-spacer-x;
-  }
-}
-
-//
-// Optional textual caps
-//
-
-.card-header {
-  padding: $card-spacer-y $card-spacer-x;
-  margin-bottom: 0; // Removes the default margin-bottom of <hN>
-  color: $card-cap-color;
-  background-color: $card-cap-bg;
-  border-bottom: $card-border-width solid $card-border-color;
-
-  &:first-child {
-    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
-  }
-
-  + .list-group {
-    .list-group-item:first-child {
-      border-top: 0;
-    }
-  }
-}
-
-.card-footer {
-  padding: $card-spacer-y $card-spacer-x;
-  background-color: $card-cap-bg;
-  border-top: $card-border-width solid $card-border-color;
-
-  &:last-child {
-    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
-  }
-}
-
-
-//
-// Header navs
-//
-
-.card-header-tabs {
-  margin-right: -$card-spacer-x / 2;
-  margin-bottom: -$card-spacer-y;
-  margin-left: -$card-spacer-x / 2;
-  border-bottom: 0;
-}
-
-.card-header-pills {
-  margin-right: -$card-spacer-x / 2;
-  margin-left: -$card-spacer-x / 2;
-}
-
-// Card image
-.card-img-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: $card-img-overlay-padding;
-}
-
-.card-img,
-.card-img-top,
-.card-img-bottom {
-  flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
-  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
-}
-
-.card-img,
-.card-img-top {
-  @include border-top-radius($card-inner-border-radius);
-}
-
-.card-img,
-.card-img-bottom {
-  @include border-bottom-radius($card-inner-border-radius);
-}
-
-
-// Card deck
-
-.card-deck {
-  .card {
-    margin-bottom: $card-deck-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
-    margin-right: -$card-deck-margin;
-    margin-left: -$card-deck-margin;
-
-    .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
-      margin-right: $card-deck-margin;
-      margin-bottom: 0; // Override the default
-      margin-left: $card-deck-margin;
-    }
-  }
-}
-
-
-//
-// Card groups
-//
-
-.card-group {
-  // The child selector allows nested `.card` within `.card-group`
-  // to display properly.
-  > .card {
-    margin-bottom: $card-group-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
-    // The child selector allows nested `.card` within `.card-group`
-    // to display properly.
-    > .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
-      margin-bottom: 0;
-
-      + .card {
-        margin-left: 0;
-        border-left: 0;
-      }
-
-      // Handle rounded corners
-      @if $enable-rounded {
-        &:not(:last-child) {
-          @include border-right-radius(0);
-
-          .card-img-top,
-          .card-header {
-            // stylelint-disable-next-line property-blacklist
-            border-top-right-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            // stylelint-disable-next-line property-blacklist
-            border-bottom-right-radius: 0;
-          }
-        }
-
-        &:not(:first-child) {
-          @include border-left-radius(0);
-
-          .card-img-top,
-          .card-header {
-            // stylelint-disable-next-line property-blacklist
-            border-top-left-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            // stylelint-disable-next-line property-blacklist
-            border-bottom-left-radius: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-
-//
-// Columns
-//
-
-.card-columns {
-  .card {
-    margin-bottom: $card-columns-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    column-count: $card-columns-count;
-    column-gap: $card-columns-gap;
-    orphans: 1;
-    widows: 1;
-
-    .card {
-      display: inline-block; // Don't let them vertically span multiple columns
-      width: 100%; // Don't let their width change
-    }
-  }
-}
-
-
-//
-// Accordion
-//
-
-.accordion {
-  > .card {
-    overflow: hidden;
-
-    &:not(:last-of-type) {
-      border-bottom: 0;
-      @include border-bottom-radius(0);
-    }
-
-    &:not(:first-of-type) {
-      @include border-top-radius(0);
-    }
-
-    > .card-header {
-      @include border-radius(0);
-      margin-bottom: -$card-border-width;
-    }
-  }
-}