ode-csslib 1.0.0-dev-produit.202209220950

package/scss/specifics/exercizer/_layout.scss

@@ -0,0 +1,31 @@
+.material section.main {
+    max-width: 1320px;
+    margin: 0 auto;
+    padding: 1rem;
+}
+.grid {
+
+	@media (min-width: $tablette) {
+		display: grid;
+	}
+}
+
+.grid-2 {
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+
+	@media (max-width: $tablette) {
+		grid-template-columns: 1fr;
+	}
+}
+
+@media (min-width: $wide-screen) {
+
+	.grid-layout-2 {
+		grid-template-columns: minmax(400px, 3fr) minmax(710px, 7fr);
+		gap: 1.5rem;
+	}
+
+	.grid-zone-image {
+		grid-template-columns: auto 260px;
+	}
+}

package/scss/specifics/exercizer/components/_.scss

@@ -0,0 +1,15 @@
+@import "./custom-filter";
+@import "./bs5-forms";
+@import "./sidebar";
+@import "./tap-tap";
+@import "./options";
+@import "./dashboard/student_dashboard/subject-copy-domino";
+@import "./dashboard/selected-subject-scheduled";
+@import "./action-card";
+@import "./choice-view";
+@import "./dominos";
+@import "./topbar";
+@import "./list-view-correction";
+@import "./tabs";
+@import "./chip";
+@import "./buttons";

package/scss/specifics/exercizer/components/_action-card.scss

@@ -0,0 +1,54 @@
+.action-card {
+    border: solid 1px $pale-cyan;
+    border-radius: .5rem;
+    padding: 1.5rem;
+    text-align: center;
+    display: flex;
+    text-align: center;
+    justify-content: space-between;
+    flex-direction: column;
+    gap: 8px;
+
+    &:hover {
+        border-color: $primary;
+        cursor: pointer;
+    }
+
+    &-image {
+        padding: .625rem;
+
+        svg {
+            fill: $primary;
+        }
+    }
+
+    &-info {
+        // padding: .625rem;
+        font-size: .85rem;
+        font-weight: 400;
+        line-height: 1.25rem;
+        color: $grey-graphite;
+        min-height: 60px;
+    }
+
+    &-link {
+        display: flex;
+        justify-content: end;
+
+        button {
+            display: inline-flex;
+            align-items: center;
+            padding: 0;
+            margin: 0;
+            gap: 8px;
+            
+            &:hover {
+                color: $cyan;
+
+                svg[class*=icon-] {
+                    fill: $cyan;
+                }
+            }
+        }
+    }
+}

package/scss/specifics/exercizer/components/_bs5-forms.scss

@@ -0,0 +1,146 @@
+:not(text-zone)>input[type="text"]:not(.score),
+textarea {
+  flex: 1;
+  padding: 12px 16px;
+  margin-bottom: 0;
+  height: 48px;
+  border-radius: 8px;
+  font-size: 1rem;
+  line-height: 1.5rem !important;
+  color: $grey-black;
+  border: 1px solid $grey-cloudy;
+  box-shadow: none;
+  background-color: $white;
+  box-sizing: border-box;
+  transition: border 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
+  &:focus {
+    border-width: 2px !important;
+    border-color: $grey-stone !important;
+    box-shadow: none;
+  }
+
+  &[role="textbox"].drawing-zone {
+    min-height: 130px;
+  }
+
+  &[role="textbox"].drawing-zone:focus {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  &::placeholder {
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5rem !important;
+    font-style: italic;
+    color: $grey-stone;
+    opacity: 1;
+  }
+
+  &.ng-not-empty {
+    border-color: $grey-stone;
+  }
+
+  &[disabled] {
+    color: $darkest-grey;
+  }
+}
+
+// INPUTS
+.input-response-correct,
+.input-response-incorrect {
+  padding: 5px 15px;
+  height: inherit;
+}
+
+.input-response-correct {
+  color: darken($green, 10%) !important;
+  border: 1px solid $green !important;
+  background-color: rgba($green, 0.1);
+}
+
+.input-response-incorrect {
+  color: darken($red, 10%) !important;
+  border: 1px solid $red !important;
+  background-color: rgba($red, 0.1);
+}
+
+// TEXTAREAS
+
+editor > textarea {
+  font-family: monospace;
+}
+
+textarea {
+  resize: none;
+  height: inherit;
+}
+
+.form-label {
+  color: $grey-black;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.form-info {
+  font-size: 0.85rem;
+  font-weight: 400;
+  line-height: 20px;
+  color: $grey-graphite;
+}
+
+editor [contentEditable=true][placeholder]:empty:before {
+  content: attr(placeholder);
+  font-style: italic;
+  font-size: 1rem;
+  color: $grey-stone;
+}
+
+// SELECT
+:not(text-zone)>select {
+  min-width: 10rem;
+  padding: 12px 8px 12px 16px;
+  height: 48px;
+  border-radius: 8px;
+  border: 1px solid $grey-cloudy;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: $white;
+  background-repeat: no-repeat;
+  background-position: right .75em center;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjAxIDUuMTUzYTEuMTI1IDEuMTI1IDAgMCAxIDEuNTg3LjEwNkw5IDEwLjI5Mmw0LjQwMy01LjAzM2ExLjEyNSAxLjEyNSAwIDEgMSAxLjY5NCAxLjQ4MmwtNS4yNSA2YTEuMTI1IDEuMTI1IDAgMCAxLTEuNjk0IDBsLTUuMjUtNmExLjEyNSAxLjEyNSAwIDAgMSAuMTA2LTEuNTg4WiIgZmlsbD0iIzRBNEE0QSIvPgo8L3N2Zz4K);
+
+  &:focus {
+    border-width: 2px;
+    border-color: $grey-stone;
+    box-shadow: none;
+  }
+}
+
+.option-edited-dates {
+  input[type="text"] {
+    padding: 0 10px !important;
+    height: auto !important;
+  }
+
+  .one {
+    width: 80px !important;
+  }
+
+  .two {
+    width: 115px !important;
+  }
+}
+
+.input-date {
+  font-size: .875rem !important;
+  width: 120px;
+  max-width: 120px;
+}
+
+.subject-edit-textarea {
+  min-height: 125px;
+}

package/scss/specifics/exercizer/components/_buttons.scss

@@ -0,0 +1,149 @@
+.button {
+    margin: 0 !important;
+    border-radius: .5rem;
+    padding: .625rem 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 20px !important;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: .625rem;
+    box-shadow: none;
+    font-family: var(--font-primary);
+
+    &::before {
+        display: none;
+    }
+
+    &-primary {
+        color: $white;
+        background-color: $flash-blue;
+
+        svg[class*="icon"] {
+            fill: $white;
+        }
+
+        &:hover {
+            background: darken($flash-blue, 10%);
+        }
+
+        &:active {
+            background: darken($flash-blue, 15%)
+        }
+
+        &.disabled {
+            background-color: $grey-cloudy;
+        }
+
+        @media screen and (max-width: $tablette) {
+            font-size: .875rem;
+        }
+    }
+
+    &-secondary {
+        color: $accent;
+        background-color: $light-grey;
+
+        &:hover {
+            color: $white;
+            background: $accent;
+
+            svg[class*="icon"] {
+                fill: $white;
+            }
+        }
+
+        &:active {
+            color: $white;
+            background: $accent;
+
+            svg[class*="icon"] {
+                fill: $white;
+            }
+        }
+
+        &.disabled {
+            color: $grey-grey;
+            background-color: $grey-cloudy;
+
+            svg[class*="icon"] {
+                fill: $grey-grey;
+            }
+            
+        }
+
+        svg[class*="icon"] {
+            fill: $accent;
+        }
+    }
+
+    &-accent {
+        color: $white;
+        background-color: $orange;
+
+        &:hover {
+            background: darken($orange, 10%)
+        }
+
+        &:active {
+            background: darken($orange, 15%)
+        }
+
+        &.disabled {
+            color: $grey-grey;
+            background-color: $grey-cloudy;
+
+            svg[class*="icon"] {
+                fill: $grey-grey;
+            }
+        }
+
+        svg[class*="icon"] {
+            fill: $white;
+        }
+    }
+
+    &-link {
+        padding-top: .5rem;
+        padding-bottom: .5rem;
+        gap: .5rem;
+        color: $flash-blue;
+        background-color: transparent;
+
+        svg[class*="icon"] {
+            fill: $flash-blue;
+        }
+
+        &:hover {
+            background-color: transparent;
+            color: darken($flash-blue, 10%);
+
+            svg[class*="icon"] {
+                fill: darken($flash-blue, 10%);
+            }
+        }
+
+        &:active {
+            background-color: transparent;
+            color: darken($flash-blue, 15%);
+
+            svg[class*="icon"] {
+                fill: darken($flash-blue, 15%);
+            }
+        }
+
+        &.disabled {
+            background-color: transparent;
+            color: $grey-grey;
+
+            svg[class*="icon"] {
+                fill: $grey-grey;
+            }
+        }
+    }
+
+    &.disabled {
+        pointer-events: none;
+    }
+}

package/scss/specifics/exercizer/components/_chip.scss

@@ -0,0 +1,43 @@
+.chip {
+    padding: 6px .75rem;
+    box-shadow: none;
+    line-height: 1rem !important;
+
+    span {
+        font-size: .8125rem;
+        font-weight: 500;
+    }
+    
+    &.selected {
+        background: $flash-blue;
+
+        i {
+            &:hover {
+                &:before {
+                    color: $black !important;
+                }
+            }
+        }
+    }
+
+    &.deletable {
+        background: $white;
+
+        span {
+            color: $black;
+        }
+
+        i {
+            &:before {
+                color: $solid-grey !important;
+                @include run-transition;
+            }
+
+            &:hover {
+                &:before {
+                    color: $red !important;
+                }
+            }
+        }
+    }
+}

package/scss/specifics/exercizer/components/_choice-view.scss

@@ -0,0 +1,10 @@
+.choice-view {
+    [class*="icon"] {
+        fill: $grey-stone;
+        
+        &.selected {
+            fill: $grey-black;
+        }
+
+    }
+}

package/scss/specifics/exercizer/components/_custom-filter.scss

@@ -0,0 +1,39 @@
+/* FILTER STYLE */
+.custom-filter-button {
+  margin-right: 20px;
+  border: 1px solid lightgray;
+  background-color: lightgray;
+  border-radius: 2px;
+  min-width: 150px;
+  text-align: center;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 7px;
+  padding-top: 7px;
+}
+
+.custom-filter-button-library {
+  border: 1px solid lightgray;
+  padding: 5px;
+  margin: 5px 0 5px 0;
+  background-color: lightgray;
+  border-radius: 2px;
+  text-align: center;
+  width: 100%;
+}
+
+.custom-filter-button-correction {
+  border: 1px solid $grey-pearl;
+  padding: 5px;
+  margin: 5px;
+  background-color: $grey-pearl;
+  border-radius: 2px;
+  text-align: center;
+}
+
+.custom-filter-button.custom-selected,
+.custom-filter-button-library.custom-selected,
+.custom-filter-button-correction.custom-selected {
+  background-color: $orange;
+  color: white;
+}