@saooti/octopus-sdk 30.0.8 → 30.0.12

package/src/assets/multiselect.scss

@@ -1,23 +1,10 @@
 /* Added styles */
 @import '../sass/_variables.scss';
 .octopus-app{
-    .saooti-arrow_down-margin {
-        margin: 3px 0 0;
-    }
-    .default-multiselect-width {
-        width: 100%;
-    }
+
     .default-multiselect-width {
         width: auto;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        text-indent: 1px;
-        text-overflow: '';
         font-size: 1rem;
-        @media (max-width: 450px) {
-            background: transparent !important;
-            width: 98%;
-        }
     }
     .multiselect-transparent{
         .multiselect__tags, .multiselect__input, .multiselect__single{
@@ -28,55 +15,12 @@
             padding-left: 0;
         }
     }
-    .multiselect-hide-arrow {
-        .multiselect__tags {
-            background: none;
-            border: none;
-        }
-        .multiselect__spinner {
-            background: none;
-        }
-        .multiselect__select::before {
-            display: none;
-        }
-    }
-
-    .light-multiselect{
-        .multiselect__tags {
-            border-radius: 0.3rem;
-            padding: 10px 40px 5px 0;
-            background: transparent;
-            border-color: $octopus-background;
-        
-        }
-        
-
-    .multiselect__input,
-    .multiselect__single {
-        background: none;
-    }
-    .multiselect--active .multiselect__select {
-        transform: unset;
-        background: none;
-    }
-    .multiselect__spinner {
-        background: none;
-    }
-    .option__image {
-        display: none;
-    }
-    .option__title {
-        padding-left: 0 !important;
-        font-weight: bold;
-    }
-    }
 
     .multiselect-octopus-proposition{
         display: flex;
         align-items: center;
         overflow: hidden;
         text-overflow: ellipsis;
-
         .option__image {
             height: 32px;
             width: 32px;
@@ -98,8 +42,7 @@
         margin: 0.2rem;
     } 
 
-    .octopus-arrow-down,
-    .octopus-arrow-down-2
+    .octopus-arrow-down
     {
         height: 1.2rem;
         width: 1.2rem;
@@ -107,23 +50,14 @@
         cursor: pointer;
         position: absolute;
         right: 10px;
-        top: 12px;
+        top: 11px;
         margin: 0;
         background-color: #ccc;
         border-radius: 50%;
-
         &:before{
             position: relative;
             top:2px;
         }
-    }
-    .classic-select.octopus-arrow-down-2{
-        pointer-events: none;
-    }
-
-    .octopus-arrow-down-2{
-        right: 10px;
-        top: 11px;
         @media (max-width: 450px) {
             top: 14px;
         }
@@ -200,22 +134,7 @@
         color: #35495e;
     }
 
-    .multiselect.light-multiselect {
-        .multiselect__tags {
-            padding: 0 40px 0 0;
-            min-height: auto;
-        }
-        .multiselect__single {
-            margin-bottom: 0;
-        }
-        .octopus-arrow-down-2 {
-            top: 2px;
-        }
-        display: flex;
-        align-items: center;
-        min-height: auto;
-        top: 0;
-    }
+
 
     .multiselect * {
         box-sizing: border-box;

package/src/assets/octopus-library.scss

@@ -14,6 +14,7 @@ $breadcrumb-border-radius:          2rem !default;
 @import './bootstrap-diff.scss';
 /* @import 'node_modules/bootstrap-vue-3/dist/bootstrap-vue-3.css'; */
 @import './general.scss';
+@import './live.scss';
 @import './form.scss';
 @import './multiselect.scss';
 @import './transition.scss';

package/src/assets/share.scss

@@ -1,38 +1,44 @@
 @import '../sass/_variables.scss';
 .octopus-app{
-  .flex-grow-mobile {
-      @media (max-width: 960px) {
-          flex-grow: 1;
-      }
+  .saooti-help {
+		font-size: 1.5rem;
+		border-radius: 50%;
+		margin: 0 auto;
+		align-items: center;
+		width: 2rem;
+		height: 2rem;
+		vertical-align: middle;
+		cursor: pointer;
+		font-weight: bold;
+		background: transparent;
+		display: flex;
+		justify-self: center;
+		justify-content: center;
+		&:hover {
+			border: 0;
+			background: #f3f3f3;
+		}
+		@media (max-width: 450px) {
+			margin: 0.5rem auto 0;
+		}
+	}
+  .category-rubrique-item-plus {
+    display: flex;
+    height: 1.8rem;
+    width: 1.8rem;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.5rem;
   }
   .icon-caution {
       margin-right: 5px;
       margin-bottom: 2px;
       height: 25px;
   }
-  .custom-radio .custom-control-label {
-      cursor: pointer;
-  }
-  .input-share-player {
-      border: 1px solid #ddd;
-      border-radius: 50px;
-      &#number-input {
-          margin: 0 1rem;
-          width: 60px;
-      }
-  }
-  .vue-swatches__swatch--selected {
-      border: 2px #40a372 solid !important;
-      box-shadow: unset !important;
-      -webkit-box-shadow: unset !important;
-  }
+
   .vue-swatches__trigger{
     border: solid 1px black;
   }
-  .share-button-title {
-      height: 2rem;
-  }
-
   .podcast-list {
       align-self: stretch;
       flex-grow: 1;
@@ -46,263 +52,146 @@
       grid-template-columns: repeat(auto-fill, 13rem); /* 2 */
       grid-gap: 1rem; /* 3 */
       justify-content: space-between; /* 4 */
-  }
-  /** PHONES*/
-  @media (max-width: 960px) {
-      .podcast-list {
-          align-self: auto;
-          justify-items: center;
-          display: flex;
-          justify-content: space-around;
+      @media (max-width: 960px) {
+        align-self: auto;
+        justify-items: center;
+        display: flex;
+        justify-content: space-around;
       }
   }
-  .list-episode {
-      padding: 2rem 0rem 1rem !important;
-      @media (max-width: 450px) {
-          padding: 0.5rem 0rem 1rem !important;
-      }
-      h2 {
-          margin-bottom: 1rem;
+
+  .element-list-inline {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    @media (max-width: 960px) {
+      overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
+      scroll-behavior: smooth;
+      padding-bottom: 1rem;
+      width: 100%;
+      .item-phone-margin {
+        margin: 0 0.5rem !important;
       }
+    }
   }
-  .podcast-list-inline {
-      align-self: stretch;
-      flex-grow: 1;
-      margin: 0;
-      padding: 0;
-      display: flex;
-      flex-wrap: nowrap;
-      justify-content: space-between;
-      display: grid;
-      grid-auto-flow: column;
-      grid-gap: 1rem;
-      grid-row: 1;
+
+  .emission-list {
+    align-self: stretch;
+    flex-grow: 1;
+    margin: 0;
+    padding: 0;
+    /*For ie11 */
+    display: flex;
+    flex-wrap: wrap;
+    /* end */
+    display: grid; /* 1 */
+    grid-gap: 1rem; /* 3 */
+    justify-content: space-between; /* 4 */
+    &.two-emissions {
+      grid-template-columns: repeat(auto-fill, 49%); /* 2 */
     }
-    .out-left-enter-active,
-    .out-left-leave-active,
-    .out-right-enter-active,
-    .out-right-leave-active {
-      transition: all 0.3s ease;
+    &.three-emissions {
+      grid-template-columns: repeat(auto-fill, 32%); /* 2 */
     }
-    
-    .out-left-leave-to,
-    .out-right-enter {
-      transform: translateX(-110%);
-      opacity: 0;
+    @media (max-width: 1200px) {
+      grid-template-columns: auto !important;
     }
+  }
     
-    .out-left-enter,
-    .out-right-leave-to {
-      transform: translateX(110%);
-      opacity: 0;
+  .emission-item-container {
+    list-style: none;
+    background: #fff;
+    border-radius: 2rem;
+    display: flex;
+    .img-box {
+      border-radius: 2rem !important;
     }
-    
-    .out-left-leave-to,
-    .out-right-leave-to {
-      position: absolute;
+    @media (max-width: 680px) {
+      justify-content: center;
     }
-    .out-right-leave-to {
-      right: 5rem;
-      z-index: -1;
+  }
+
+  .emission-item-text {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    max-height: 13rem;
+    @media (max-width: 450px) {
+      padding: 0.5rem 0;
+      text-align: center;
     }
-    /** PHONES*/
-    @media (max-width: 960px) {
-      .podcast-list-inline {
-        display: flex;
-        flex-wrap: nowrap;
-        overflow-y: scroll;
-        -webkit-overflow-scrolling: touch;
-        scroll-behavior: smooth;
-        padding-bottom: 1rem;
+    .emission-name {
+      font-size: 0.9rem;
+      font-weight: 600;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      word-break: break-word;
+    }
+    .emission-description {
+      overflow: hidden;
+      margin-top: 0.5em;
+      word-break: break-word;
+      max-height: 7rem;
+      position: relative;
+      &.after-emission-description:after {
+        content: '...';
+        position: absolute;
+        padding-left: 1rem;
+        right: 0;
+        bottom: 0;
         width: 100%;
-        .item-phone-margin {
-          margin: 0 0.5rem !important;
-        }
+        font-size: 1rem;
+        font-weight: bolder;
+        text-align: center;
+        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 40%);
       }
     }
-
-  .arrow-transform {
-      transform: rotate(180deg);
-  }
-  .no-border-round {
-      border-radius: 0;
-  }
-  .text-ellipsis {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+    .emission-producer {
+      font-weight: 300;
+      font-size: 0.6rem;
+    }
   }
-  .emission-list {
-      align-self: stretch;
-      flex-grow: 1;
-      margin: 0;
+  .comment-item-container {
+    .btn-comment-edit {
+      width: 32px;
+      height: 32px;
+      background: $octopus-secondary-color;
       padding: 0;
-      /*For ie11 */
       display: flex;
-      flex-wrap: wrap;
-      /* end */
-    
-      display: grid; /* 1 */
-      grid-gap: 1rem; /* 3 */
-      justify-content: space-between; /* 4 */
-    }
-    .twoEmissions {
-      grid-template-columns: repeat(auto-fill, 49%); /* 2 */
-    }
-    
-    .threeEmissions {
-      grid-template-columns: repeat(auto-fill, 32%); /* 2 */
-    }
-    
-    /** PHONES*/
-    @media (max-width: 1200px) {
-      .emission-list {
-        grid-template-columns: auto;
-      }
+      align-items: center;
+      justify-content: center;
+      color: $octopus-primary-color;
+      margin-right: 0.25rem;
     }
-    .emission-item-container {
-      list-style: none;
-      background: #fff;
-      border-radius: 2rem;
-      display: flex;
-      width: 100%;
-      margin: 1rem 0;
-      .img-box {
-        border-radius: 2rem !important;
-      }
+    .status-Pending {
+        background: #eb7d22;
     }
-    .emission-light-max-size {
-      width: 300px;
-      border-bottom: 1px solid #ddd;
+    .status-Invalid {
+        background: #d40303;
     }
-    .emission-light-title {
-      color: #333 !important;
-      align-self: flex-end;
-      text-transform: none;
-      font-size: 1.5em;
-      font-weight: normal;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    
-    .emission-item-text {
-      padding: 1rem;
-      display: flex;
-      flex-direction: column;
-      max-height: 13rem;
-    
-      .emission-name {
-        font-size: 0.9rem;
-        font-weight: 600;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        word-break: break-word;
-      }
-    
-      .emission-description {
-        overflow: hidden;
-        margin-top: 0.5em;
-        word-break: break-word;
-        max-height: 7rem;
-        position: relative;
-        &.after-emission-description:after {
-          content: '...';
-          position: absolute;
-          padding-left: 1rem;
-          right: 0;
-          bottom: 0;
-          width: 100%;
-          font-size: 1rem;
-          font-weight: bolder;
-          text-align: center;
-          background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 40%);
-        }
-      }
-    
-      .emission-small-description {
-        -webkit-line-clamp: 2;
-        border-top: 1px solid #ddd;
-        word-break: break-word;
-      }
-    
-      .emission-producer {
-        font-weight: 300;
-        font-size: 0.6rem;
-      }
+    .status-Valid {
+        background: $octopus-primary-color;
     }
-    
-    button.btn.btn-primary.share-btn.m-3 {
-      font-size: 1rem;
-      width: 2.5rem;
-      height: 2.5rem !important;
-      margin: 0 0.8rem 0 0 !important;
+    .status-Valid, .status-Invalid, .status-Pending {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
     }
-    /** PHONES*/
-    @media (max-width: 680px) {
-      .emission-item-container {
-        flex-wrap: wrap;
-        width: auto;
-        margin: 0;
-        padding: 1rem;
-        justify-content: center;
-      }
+    .icon-certified {
+        height: 15px;
+        margin-right: 0.5rem;
     }
-    
-    @media (max-width: 450px) {
-      .emission-item-text {
-        padding: 0.5rem 0;
-        text-align: center;
-      }
+    .collapsed > .when-opened,
+    :not(.collapsed) > .when-closed {
+        display: none !important;
     }
-    
-    .comment-item-container {
-      .btn-circle {
-        width: 32px;
-        height: 32px;
-        background: $octopus-secondary-color;
-        padding: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      .status-Pending {
-          background: #eb7d22;
-      }
-      .status-Invalid {
-          background: #d40303;
-      }
-      .status-Valid {
-          background: $octopus-primary-color;
-      }
-
-      .status-Valid, .status-Invalid, .status-Pending {
-          width: 14px;
-          height: 14px;
-          border-radius: 50%;
-      }
-      .icon-certified {
-          height: 15px;
-          margin-right: 0.5rem;
-      }
-      .btn-answer {
-          padding: 0.1rem 0.75rem;
-      }
-      .collapsed > .when-opened,
-      :not(.collapsed) > .when-closed {
-          display: none !important;
-      }
   }
-  .live-image-status {
-      text-align: center;
-      width: 100%;
-      font-size: 0.6rem;
-      padding: 0.2rem 0;
-      color: white;
-      text-transform: uppercase;
-    }
+
 
   .saooti-stitcher-logo,
   .saooti-google-podcasts,
@@ -314,6 +203,10 @@
       right: 0;
     }
   }
+  .saooti-Whatsapp{
+    width: 25px;
+    height: 25px;
+  }
   .saooti-stitcher-logo,.saooti-amazon {
     font-size: 1.7rem !important;
     div {

package/src/assets/transition.scss

@@ -1,5 +1,99 @@
 .octopus-app{
     .transition-height {
-        transition: height 1s;
+      transition: height 1s;
     }
+    .arrow-transform {
+      transform: rotate(180deg);
+    }
+    .bloc-paddle {
+      align-items: flex-end;
+      display: flex;
+      width: 2rem;
+      height: 2.6rem;
+      padding: 0.7rem;
+      justify-content: space-around;
+      align-content: flex-start;
+      border-radius: 50%;
+      background: transparent !important;
+      
+      > span {
+          width: 0.1rem;
+          margin: 0.05rem;
+          background: #fff;
+      }
+      
+      .paddle1 {
+          animation-duration: 0.6s;
+          animation-name: slidein;
+          animation-iteration-count: infinite;
+          animation-direction: alternate;
+      }
+      
+      .paddle2 {
+          animation-duration: 0.3s;
+          animation-name: slidein2;
+          animation-iteration-count: infinite;
+          animation-direction: alternate;
+      }
+      
+      .paddle3 {
+          animation-duration: 0.5s;
+          animation-name: slidein3;
+          animation-iteration-count: infinite;
+          animation-direction: alternate;
+      }
+      @keyframes slidein {
+          0% {
+          height: 0;
+          }
+          100% {
+          height: 1rem;
+          }
+      }
+      
+      @keyframes slidein2 {
+          0% {
+          height: 0.3rem;
+          }
+          100% {
+          height: 1.2rem;
+          }
+      }
+      
+      @keyframes slidein3 {
+          0% {
+          height: 1.2rem;
+          }
+          100% {
+          height: 0;
+          }
+      }
+    }
+    .out-left-enter-active,
+    .out-left-leave-active,
+    .out-right-enter-active,
+    .out-right-leave-active {
+      transition: all 0.3s ease;
+    }
+    
+    .out-left-leave-to,
+    .out-right-enter {
+      transform: translateX(-110%);
+      opacity: 0;
+    }
+    
+    .out-left-enter,
+    .out-right-leave-to {
+      transform: translateX(110%);
+      opacity: 0;
+    }
+    
+    .out-left-leave-to,
+    .out-right-leave-to {
+      position: absolute;
+    }
+    .out-right-leave-to {
+      right: 5rem;
+      z-index: -1;
+    }  
 }