ode-bootstrap-one 1.1.0-explorer.202111161306

package/scss/legacy/_lightboxes.scss

@@ -0,0 +1,569 @@
+// BACKPORT : while waiting to move to modal bootstrap
+@mixin absolute {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
+
+@mixin run-transition($property: color, $speed: 250ms, $timing: ease) {
+  transition: $property $speed $timing;
+}
+
+@mixin lightbox-backdrop {
+  position: fixed;
+  background: #222;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  box-sizing: border-box;
+  opacity: 0.5;
+  z-index: 10000;
+  display: none;
+}
+
+@mixin lightbox-window {
+  position: fixed;
+  z-index: 10001;
+  background: #fff;
+  top: 0;
+  margin-left: auto;
+  margin-right: auto;
+  float: none;
+  left: 0;
+  right: 0;
+  display: none;
+  border-radius: 5px;
+}
+
+section.lightbox-window {
+  .row {
+    min-height: initial !important;
+  }
+
+  .lightbox-buttons {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+
+    input[type=submit],
+    input[type=button] {
+      float: right;
+    }
+  }
+}
+
+.lightbox-buttons {
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+}
+
+
+section.lightbox,
+section.tiny-lightbox {
+  color: $text-color;
+  font-family: "Arial";
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position: fixed;
+  z-index: 10001;
+  top: 0;
+  margin-left: auto;
+  margin-right: auto;
+  float: none;
+  left: 0;
+  right: 0;
+  display: none;
+  text-align: left;
+  line-height: initial;
+  font-size: initial;
+  font-weight: normal;
+  cursor: default;
+
+  .background {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    top: 0;
+
+    &::after {
+      content: " ";
+      width: 100%;
+      height: 100%;
+      display: block;
+      background: rgba(0, 0, 0, 0.6);
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  h2 {
+    color: $primary;
+  }
+
+  .close-lightbox {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 10px;
+    cursor: pointer;
+
+    i.close-2x {
+      font-family: "generic-icons";
+      font-style: normal;
+      font-size: 22px;
+      color: $red;
+
+      &::before {
+        content: '\e848';
+      }
+    }
+  }
+
+  >div.content {
+    border-radius: 5px;
+    width: 720px;
+    margin-left: auto;
+    margin-right: auto;
+    background: #fff;
+    position: relative;
+    margin-top: 20px;
+    padding: 15px;
+    float: none !important;
+    overflow: auto;
+    max-height: calc(100vh - 75px);
+    z-index: 1;
+    max-width: initial;
+  }
+
+  .content::after {
+    clear: both;
+    content: " ";
+    display: block;
+    width: 100%;
+  }
+
+  &::after {
+    clear: both;
+    content: " ";
+    display: block;
+    width: 100%;
+  }
+}
+
+section.tiny-lightbox div.content {
+  width: 500px;
+}
+
+.lightbox-view,
+.lightbox {
+  .tabs.linker {
+    section .icons-view {
+      border-left: 0;
+    }
+
+    select {
+      height: 25px;
+    }
+  }
+
+  .linker {
+    input[type=checkbox] {
+      margin-left: 0;
+    }
+
+    input[type=text],
+    select,
+    label {
+      margin: 5px;
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .found-resources {
+      position: relative;
+      height: 165px;
+      overflow-y: auto;
+      clear: both;
+      @include run-transition(height);
+
+      .icons-view {
+        overflow: auto;
+        @include absolute;
+      }
+    }
+
+    .illustrated-list {
+      position: absolute;
+
+      li {
+        img {
+          position: relative !important;
+          height: 100% !important;
+        }
+      }
+    }
+  }
+
+  .search-pagination {
+    input {
+      padding-right: 45px !important;
+      padding-left: 45px !important;
+      margin: 0 !important;
+      box-sizing: border-box;
+    }
+
+    .show-close {
+      position: absolute;
+    }
+  }
+}
+
+// Theme 1D
+
+.lightbox-window,
+.lightbox>.content {
+  padding: 10px;
+  box-shadow: 2px 2px 24px $shadow;
+  background: $white;
+
+  h2,
+  h2:first-child {
+    font-size: 20px;
+    font-weight: normal;
+    margin-bottom: 10px;
+  }
+
+  nav.vertical {
+    margin-right: 0;
+
+    li {
+      padding-left: 10px;
+    }
+
+    >ul>li,
+    >div>ul>li {
+      padding-left: 0;
+    }
+  }
+
+  .tabs {
+    margin-top: 10px;
+
+    section {
+      padding: 15px 0px;
+      border: none;
+      border-top: 1px solid $gray-600;
+      background: $white;
+    }
+
+    header.selected {
+      background: transparent;
+    }
+  }
+}
+
+
+.lightbox-opened {
+  header.main {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.lightbox form#changePassword {
+  label {
+    display: block;
+  }
+}
+
+
+section.lightbox-window {
+  form#upload-form {
+    h3 {
+      width: auto;
+      float: none;
+    }
+
+    .hidden-content {
+      float: left;
+    }
+
+    button,
+    .right-magnet input {
+      margin-bottom: 5px;
+    }
+  }
+}
+
+.lightbox-window .datepicker,
+.lightbox-view .datepicker,
+.lightbox .datepicker {
+  z-index: 1100;
+}
+
+.lightbox-view {
+  @include lightbox-window();
+
+  section.lightbox-window {
+    .row {
+      min-height: initial !important;
+    }
+
+    .lightbox-buttons {
+      position: absolute;
+      bottom: 0px;
+      width: 100%;
+
+      input[type=submit],
+      input[type=button] {
+        float: right;
+      }
+    }
+  }
+
+  .lightbox-buttons {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+  }
+
+
+  section.lightbox,
+  section.tiny-lightbox {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    position: fixed;
+    z-index: 10001;
+    top: 0;
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+    left: 0;
+    right: 0;
+    display: none;
+    text-align: left;
+    line-height: initial;
+    font-size: initial;
+    font-weight: normal;
+    cursor: default;
+
+    .background {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      z-index: 0;
+      top: 0;
+
+      &::after {
+        content: " ";
+        width: 100%;
+        height: 100%;
+        display: block;
+        background: rgba(0, 0, 0, 0.6);
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+
+    >div.content {
+      border-radius: 5px;
+      width: 720px;
+      margin-left: auto;
+      margin-right: auto;
+      background: #fff;
+      position: relative;
+      margin-top: 20px;
+      padding: 15px;
+      float: none !important;
+      overflow: auto;
+      max-height: calc(100vh - 75px);
+      z-index: 1;
+      max-width: initial;
+    }
+
+    .content::after {
+      clear: both;
+      content: " ";
+      display: block;
+      width: 100%;
+    }
+
+    &::after {
+      clear: both;
+      content: " ";
+      display: block;
+      width: 100%;
+    }
+  }
+
+  section.tiny-lightbox div.content {
+    width: 500px;
+  }
+
+  .lightbox-view,
+  .lightbox {
+    .tabs.linker {
+      section .icons-view {
+        border-left: 0;
+      }
+
+      select {
+        height: 25px;
+      }
+    }
+
+    .linker {
+      input[type=checkbox] {
+        margin-left: 0;
+      }
+
+      input[type=text],
+      select,
+      label {
+        margin: 5px;
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      .found-resources {
+        position: relative;
+        height: 165px;
+        overflow-y: auto;
+        clear: both;
+        @include run-transition(height);
+
+        .icons-view {
+          overflow: auto;
+          @include absolute;
+        }
+      }
+
+      .illustrated-list {
+        position: absolute;
+
+        li {
+          img {
+            position: relative !important;
+            height: 100% !important;
+          }
+        }
+      }
+    }
+
+    .search-pagination {
+      input {
+        padding-right: 45px !important;
+        padding-left: 45px !important;
+        margin: 0 !important;
+        box-sizing: border-box;
+      }
+
+      .show-close {
+        position: absolute;
+      }
+    }
+  }
+
+  ;
+}
+
+.lightbox-background {
+  @include lightbox-backdrop;
+}
+
+.media section.lightbox {
+  cursor: default;
+}
+
+
+.lightbox form {
+  .fill-bar {
+    margin-top: 12px;
+  }
+
+  p.input-errors {
+    margin-bottom: 30px;
+  }
+}
+
+
+.lightbox-view .linker .found-resources,
+.lightbox .linker .found-resources {
+  height: 200px;
+}
+
+//changePassword lightbox
+section.lightbox>.background+div.content>.twelve.cell {
+  >.twelve.cell {
+    float: none;
+  }
+}
+
+.lightbox form#changePassword {
+  height: auto;
+
+  >.twelve.cell.fluid {
+    height: auto;
+  }
+}
+
+.lightbox>.background::before {
+  content: " ";
+  display: block;
+  height: 100vh;
+  background: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: url(../../img/illustrations/logo.png) 23px 0px no-repeat $shadow;
+  background-size: contain;
+  box-shadow: 0 2px 5px $shadow;
+}
+
+.lightbox-view {
+  @include lightbox-window;
+  width: 800px;
+  text-align: left;
+}
+
+.lightbox-background {
+  @include lightbox-backdrop;
+}
+
+body.lightbox-body {
+  background: #666;
+
+  header.lightbox-header {
+    opacity: 0.3;
+  }
+
+  section.lightbox-main {
+    background: rgba(255, 255, 255, 0.3)
+  }
+}
+
+@include media-breakpoint-down(md) {
+  body {
+    section.lightbox {
+      >div.content {
+        padding: 20px;
+        min-height: calc(100% - 50px);
+        width: calc(100% - 50px);
+        margin: 25px;
+        border-radius: 0;
+        box-sizing: border-box;
+      }
+    }
+  }
+}

package/scss/variables/_.scss

@@ -0,0 +1,3 @@
+@import "colors";
+@import "variables-bootstrap";
+@import "variables-ode";

package/scss/variables/_colors.scss

@@ -0,0 +1,32 @@
+//Ref page : https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
+$white:    #fff;
+$gray-100: #f0f2f4;
+$gray-200: #e9ebef;
+$gray-300: #d6d9e0;
+$gray-400: #c9ced5;
+$gray-500: #b1b6bf;
+$gray-600: #8c939e;
+$gray-700: #5b6472;
+$gray-800: #3f454f;
+$gray-900: #212529;
+$black:    #000;
+
+// COLORS : colors palette
+$blue:    #3889c1;
+$indigo:  #4f2691;
+$purple:  #a348c0;
+$pink:    #ff61c0;
+$red:     #ff3a67;
+$orange:  #ff8d2e;
+$yellow:  #eac403;
+$green:   #6fbe2e;
+$teal:    #24C0D3;
+$cyan:    #46afe6;
+
+$primary: $blue;
+$secondary: $orange;
+$success: $green;
+$info: $cyan;
+$warning: $yellow;
+$danger: $red;
+

package/scss/variables/_variables-bootstrap.scss

@@ -0,0 +1,115 @@
+//Ref page : https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
+
+// Body
+$body-bg:       $gray-100;
+$text-color:    $gray-800;
+
+// Links
+$link-color:        $cyan;
+$link-hover-color:  $orange;
+
+$box-shadow-sm:     0 0.125rem 0.25rem rgba($gray-900, 0.075);
+$box-shadow:        0 0.5rem 1rem rgba($gray-900, 0.15);
+$box-shadow-lg:     0 1rem 3rem rgba($gray-900, 0.175);
+
+$component-active-bg: $secondary;
+
+// Typography
+$font-family-sans-serif:    "Fira Sans", "Arial", sans-serif ;
+$font-size-base: 1.6rem;
+$line-height-base: 1.6;
+$small-font-size: 1.2rem;
+
+// Buttons + Forms
+$input-btn-font-family:     "KGJune"!default ;
+$input-btn-font-size:       1.2rem ;
+
+// Buttons
+$btn-box-shadow:     inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) ;
+
+// Forms
+$input-font-family: "Fira Sans" ;
+$input-focus-border-color:  $primary ;
+
+// Dropdowns
+$dropdown-link-color:   $gray-900 ;
+$dropdown-link-hover-bg:    $gray-100 ;
+
+// Image thumbnails
+$thumbnail-bg:  $body-bg ;
+
+$primary:                  $blue ;
+$primary-lightest:         lighten($primary, 30%) ;
+$primary-light:            lighten($primary, 15%) ;
+$primary-dark:             darken($primary, 15%) ;
+$primary-darkest:          darken($primary, 30%) ;
+$primary-gradient:          linear-gradient($primary, $primary-light);
+
+$secondary:                 $orange ;
+$secondary-lightest:       lighten($secondary, 30%);
+$secondary-light:          lighten($secondary, 15%);
+$secondary-dark:           darken($secondary, 15%) ;
+$secondary-darkest:        darken($secondary, 30%) ;
+$secondary-gradient:        linear-gradient($secondary, $secondary-light);
+
+$accent:                $orange ;
+$accent-dark:           darken($orange, 20%) ;
+
+$success:               $green ;
+$success-dark:          darken($green, 10%) ;
+$success-gradient:      linear-gradient($success, lighten($success, 10%));
+
+$info:                  $cyan ;
+$info-dark:             darken($cyan, 10%) ;
+$info-gradient:         linear-gradient($info, lighten($info, 10%));
+
+$warning:               $yellow ;
+$warning-dark:          darken($yellow, 10%) ;
+$warning-gradient:      linear-gradient($warning, lighten($warning, 10%));
+
+// Créer un $error ? pour faire warning = jaune, danger = orange, error = rouge
+
+$danger:                $red ;
+$danger-dark:           darken($red, 20%) ;
+$danger-gradient:       linear-gradient($danger, lighten($danger, 10%));
+
+$light:                 $gray-200 ;
+$dark:                  $gray-700 ;
+
+// FLASH MESSAGE
+$flash-red:             $red;
+$flash-orange:          $orange;
+$flash-green:           $green;
+$flash-blue:            $cyan;
+
+$app-size : 110px; // Trouver où est appeler cette valeur
+$card-radius : 3px; // Trouver où est appeler cette valeur
+
+$theme-colors: () ;
+// stylelint-disable-next-line scss/dollar-variable-default
+$theme-colors: map-merge(
+  (
+    "primary":    $primary,
+    "secondary":  $secondary,
+    "success":    $success,
+    "info":       $info,
+    "warning":    $warning,
+    "danger":     $danger,
+    "light":      $light,
+    "dark":       $dark,
+    "accent":     $accent,
+    "blue":       $blue,
+    "indigo":     $indigo,
+    "purple":     $purple,
+    "pink":       $pink,
+    "red":        $red,
+    "orange":     $orange,
+    "yellow":     $yellow,
+    "green":      $green,
+    "teal":       $teal,
+    "cyan":       $cyan,
+    "white":      $white,
+    "black":      $black
+  ),
+  $theme-colors
+);

package/scss/variables/_variables-ode.scss

@@ -0,0 +1,10 @@
+$images-path: "../../images/";
+
+// Applications
+$application-width: 150px;  
+$application-height: 170px;
+$application-icon-size: 110px;
+
+$application-width-sm: 95px;
+$application-height-sm: 120px;
+$application-icon-size-sm: 60px; 

package/skins/christmas/details.json

@@ -0,0 +1 @@
+{"displayName": "christmas"}