ode-bootstrap 1.0.1 → 1.0.4-dev.202207191429

package/dist/version.txt

@@ -1 +1 @@
-ode-bootstrap= 28/12/2021 16:14:30
+ode-bootstrap= 19/07/2022 16:29:46

package/gradle.properties

@@ -1,2 +1,2 @@
 modname=ode-bootstrap
-npmVersion=1.0.1
+npmVersion=1.0.4-dev.%generateVersion%

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ode-bootstrap",
-  "version": "1.0.1",
+  "version": "1.0.4-dev.202207191429",
   "description": "Open Digital Education CSS framework based on bootstrap",
   "scripts": {
     "copy-fonts": "cpr node_modules/entcore-generic-icons/fonts/ assets/fonts/generic-icons/ -o && cpr node_modules/@fortawesome/fontawesome-free/webfonts assets/fonts/fa/ -o",

package/scss/atoms/_fonts.scss

@@ -2,6 +2,7 @@
 
 @import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
 @import "node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
+@import "node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
 @import "node_modules/@fortawesome/fontawesome-free/scss/brands.scss";
 
 /* Generic Icons */

package/scss/atoms/_icons.scss

@@ -75,4 +75,16 @@
             }
         }
     }
+}
+
+// Classes des icones pour les humeurs
+.ic-mood {
+    @each $mood, $data in $icons-mood {
+        &-#{$mood} {
+            &::before {
+                content: map-get($data, "glyph");
+                color: map-get($data, "color");
+            }
+        }
+    }
 }

package/scss/components/_buttons.scss

@@ -48,7 +48,7 @@
 
     &-circle {
         @include circle(2.5em);
-        @include have-child-in-middle ();
+        @include have-child-in-middle();
 
         @include add-transitions(color, background-color) {
             color: #fff;
@@ -61,7 +61,7 @@
         // margin-bottom: 1.5em;
         font-size: 2em;
         color: #fff;
-        background: $third;
+        background-color: $third;
 
         .label {
             position: absolute;

package/scss/components/_feed.scss

@@ -177,6 +177,10 @@ $feed-spacing: 20px !default;
             }
         }
 
+        [class*="ic-mood"] {
+            font-size: 3rem;
+        }
+
         &:hover {
             .zone-tools {
                 transform: translateX(101%);

package/scss/components/_forms.scss

@@ -1,4 +1,4 @@
-$input-placeholder-color: $gray-500;
+$input-placeholder-color: #B0B0B0;
 
 .input-group {
     .btn {
@@ -6,9 +6,17 @@ $input-placeholder-color: $gray-500;
     }
 }
 
-.form-control::placeholder {
-    font-style: italic;
-    color: $input-placeholder-color;
+.form-control {
+    padding: 1.2rem 1.6rem;
+
+    @include media-breakpoint-up(xl) {
+        font-size: 1.6rem;
+    }
+
+    &::placeholder {
+        font-style: italic;
+        color: $input-placeholder-color;
+    }
 }
 
 .input-searchbar {

package/scss/components/widget/_applications.scss

@@ -31,7 +31,8 @@
                 }
 
                 > img {
-                    @include square(80%);
+                    width: 80%;
+                    height: auto;
                 }
             }
 

package/scss/components/widget/_record.scss

@@ -3,22 +3,39 @@
         display: flex;
         align-items: center;
 
-        > * {
-            flex: 1;
-            padding: 10px;
+        >* {
+            // flex: 1;
+            padding: 1.6rem;
             text-align: center;
-            //max-height: 120px;
 
             .img-fluid {
                 width: 100px;
             }
         }
     }
+
+    .form-control,
+    .form-select {
+        padding: 12px 16px;
+        border: 1px solid #E4E4E4;
+        border-radius: 8px;
+    }
 }
 
 .record {
     &-timer {
-        font-size: 2em;
+        font-size: 2.2rem;
+    }
+
+    &-widget-player {
+        margin: 1.6rem 2.4rem;
+        min-height: 150px;
+        border-radius: 4px;
+        background-color: #D9D9D9;
+
+        > video {
+            display: block;
+        }
     }
 
     &-controls {
@@ -27,11 +44,21 @@
         margin-block: 1.5em;
 
         .btn-circle {
-            font-size: 1.2em;
+            font-size: 1.6rem;
 
             &:hover {
                 color: $white;
             }
+
+            &:disabled {
+                opacity: 1;
+                background-color: #E4E4E4 !important;
+                border-color: transparent;
+            }
+
+            &.btn-danger {
+                background-color: $red;
+            }
         }
     }
-}
+}

package/scss/variables/_colors.scss

@@ -19,10 +19,10 @@ $pink: #d63384 !default;
 $red: #dc3545 !default;
 $orange: #fd7e14 !default;
 $yellow: #ffc107 !default;
-$green: #198754 !default;
+$green: #7dbf85 !default;
 $teal: #20c997 !default;
 $cyan: #0dcaf0 !default;
-$deep-blue: #0984b3 !default;
+$deep-blue: #2A9CC8 !default;
 
 $primary: $blue !default;
 $secondary: $gray-600 !default;

package/scss/variables/_icons.scss

@@ -182,3 +182,18 @@ $icons-connectors: (
     "vie-scolaire"              : ( "color": $yellow, "glyph": "\e879"),
     "webclasseur"               : ( "color": $cyan,   "glyph": "\e88c"),
 ) !default;
+
+$icons-mood:(
+    "default":  ("color":#555, "glyph":"\e870"),
+    "none":     ("color":#aaa, "glyph":"\e83a"),
+    "angry":    ("color":#FF8500, "glyph":"\e845"),
+    "dreamy":   ("color":#b930a2, "glyph":"\e862"),
+    "happy":    ("color":#ecbe30, "glyph":"\e877"),
+    "joker":    ("color":#4bafd5, "glyph":"\e849"),
+    "love":     ("color":#FF8500, "glyph":"\e84b"),
+    "proud":    ("color":#46bfaf, "glyph":"\e87e"),
+    "sad":      ("color":#b930a2, "glyph":"\e869"),
+    "sick":     ("color":#e13a3a, "glyph":"\e87d"),
+    "tired":    ("color":#e13a3a, "glyph":"\e87c"),
+    "worried":  ("color":#763294, "glyph":"\e87f")
+)!default;