ode-csslib 1.0.0-dev-produit.202209220950

package/dist/version.txt

@@ -0,0 +1 @@
+entcore-css-lib=1.0-dev-produit-SNAPSHOT 22/09/2022 09:50:39

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "ode-csslib",
+  "version": "1.0.0-dev-produit.202209220950",
+  "description": "Open Digital Education Legacy CSS framework",
+  "scripts": {
+    "copy-fonts": "cpr node_modules/entcore-generic-icons/fonts/ assets/fonts/generic-icons/ -o",
+    "sass:watch": "sass --source-map -w scss/index.scss docs/index.css",
+    "sass:build:debug": "sass --source-map scss/index.scss docs/index.css",
+    "sass:build:release": "sass --style=compressed scss/index.scss dist/index.css",
+    "dev:prepare": "npm run sass:build:debug && npm run copy-fonts && cpr assets/ docs/ -o",
+    "dev:watch": "npm run dev:prepare && concurrently  \" npm run sass:watch \" \" npm run dev:serve  \" ",
+    "dev:serve": "live-server --open=docs/ --ignore=**/node_modules/**,**/dist/**,**/package.json,**/.git/**",
+    "dev:lint": "stylelint scss/**/*.scss || echo \"lint faild for some file(s).\"",
+    "dev:lint-fix": "stylelint scss/**/*.scss --fix || echo \"lint faild for some file(s).\"",
+    "prettier:check": "npx prettier --check scss/**/*.scss",
+    "prettier:write": "npx prettier --write scss/**/*.scss",
+    "prettier:all": "npm run prettier:write && npm run prettier:check",
+    "release:clean": "rimraf dist",
+    "release:prepare": "npm run release:clean && npm run copy-fonts && cpr assets/ dist/",
+    "release:build": "npm run release:prepare && npm run sass:build:release"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/opendigitaleducation/entcore-css-lib"
+  },
+  "keywords": [
+    "ODE",
+    "CSS lib",
+    "framework"
+  ],
+  "author": "OpenDigitalEducation",
+  "license": "AGPL-3.0",
+  "bugs": {
+    "url": "https://github.com/opendigitaleducation/entcore-css-lib/issues"
+  },
+  "homepage": "",
+  "devDependencies": {
+    "concurrently": "^5.0.2",
+    "copyfiles": "^2.2.0",
+    "cpr": "^3.0.1",
+    "prettier": "2.6.0",
+    "rimraf": "^3.0.2",
+    "sass": "^1.49.9"
+  },
+  "dependencies": {
+    "entcore-generic-icons": "git+https://github.com/opendigitaleducation/generic-icons.git"
+  },
+  "files": ["assets", "scss", "dist/version.txt"]
+}

package/scss/_animations.scss

@@ -0,0 +1,191 @@
+
+@keyframes splitScreenGrow{
+	0%{
+		width: 0%;
+    }
+	100%{
+		width: 70%;
+	}
+}
+
+@keyframes pulsate {
+    0% {
+        transform: scale(0.1, 0.1);
+        opacity: 0.0;
+    }
+    50% {
+        opacity: 1.0;
+    }
+    100% {
+        transform: scale(1.2, 1.2);
+        opacity: 0;
+    }
+}
+
+
+@keyframes fade-in{
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+}
+
+@keyframes transient-display{
+    0% {
+      opacity: 0;
+    }
+    15% {
+      opacity: 1;
+    }
+    85% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+}
+
+@keyframes rotate{
+    0% {
+      	transform: rotate(0deg);
+    }
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes bounce-pop-out {
+  0% {
+    transform: scale(0);
+  }
+  50%{
+      transform: scale(1.1);
+  }
+  90%{
+      transform: scale(0.9);
+  }
+  100% {
+      transform: scale(1);
+  }
+}
+
+
+@keyframes shockwave-animation{
+    from {
+      transform: scale(1);
+      opacity: 0;
+    }
+    to {
+      transform: scale(100);
+      opacity: 0.4;
+    }
+}
+@-webkit-keyframes shockwave-animation{
+    from {
+      -webkit-transform: scale(1);
+      opacity: 0;
+    }
+    to {
+      -webkit-transform: scale(100);
+      opacity: 0.4;
+    }
+}
+
+@-webkit-keyframes heartbeat {
+  from {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: center center;
+            transform-origin: center center;
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  10% {
+    -webkit-transform: scale(0.91);
+            transform: scale(0.91);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+  17% {
+    -webkit-transform: scale(0.98);
+            transform: scale(0.98);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  33% {
+    -webkit-transform: scale(0.87);
+            transform: scale(0.87);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+  45% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+}
+@keyframes heartbeat {
+  from {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: center center;
+            transform-origin: center center;
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  10% {
+    -webkit-transform: scale(0.91);
+            transform: scale(0.91);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+  17% {
+    -webkit-transform: scale(0.98);
+            transform: scale(0.98);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+  33% {
+    -webkit-transform: scale(0.87);
+            transform: scale(0.87);
+    -webkit-animation-timing-function: ease-in;
+            animation-timing-function: ease-in;
+  }
+  45% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-animation-timing-function: ease-out;
+            animation-timing-function: ease-out;
+  }
+}
+
+.shockwave{
+	position: absolute;
+	border-radius: 50%;
+	z-index: 9;
+	width: 50px;
+	height: 50px;
+	background: $accent;
+	animation: shockwave-animation 800ms;
+	-webkit-animation: shockwave-animation 800ms;
+}
+
+.fade-in{
+	animation: fade-in 1 500ms;
+}
+
+.fade-in-hover{
+	@include run-transition(all);
+	opacity: 0.6;
+	&:hover{
+		opacity: 1;
+	}
+}
+
+.heartbeat {
+	-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
+	        animation: heartbeat 1.5s ease-in-out infinite both;
+}

package/scss/_app.scss

@@ -0,0 +1,123 @@
+html,
+body {
+  margin: 0;
+  height: 100%;
+  font-family: Arial;
+  background: $light-grey;
+  z-index: 0;
+
+  section.main {
+    background: $white;
+    position: relative;
+    padding-bottom: 60px;
+  }
+  section.main::after {
+    clear: both;
+    content: " ";
+    display: block;
+    width: 100%;
+  }
+}
+
+html.print {
+  background: transparent;
+  body {
+    background: transparent;
+    overflow: visible;
+    section {
+      page-break-after: always;
+    }
+  }
+}
+
+.container {
+  height: 100%;
+
+  header.main {
+    height: $header-height;
+    width: 100%;
+    position: relative;
+  }
+
+  .main.wrapper {
+    box-sizing: border-box;
+    top: 0;
+    height: 100%;
+    min-height: 100%;
+    width: 100%;
+    background: none;
+    padding-bottom: 0px;
+  }
+
+  section.main {
+    box-sizing: border-box;
+    min-height: 100%;
+    padding: 10px;
+    text-align: left;
+  }
+}
+
+.lightbox-backdrop {
+  @include lightbox-backdrop;
+}
+
+.lightbox-window {
+  @include lightbox-window;
+}
+
+.close-lightbox {
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin: 10px;
+  cursor: pointer;
+}
+
+.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);
+  }
+}
+
+iframe {
+  overflow: auto;
+}
+
+iframe.adapter {
+  position: absolute;
+  left: 0;
+  top: 61px;
+}
+
+html.app {
+  min-height: 0;
+  height: auto;
+  body {
+    background: $white;
+    min-height: 100%;
+    height: auto;
+  }
+}
+
+@media screen and (max-width: $tablette) {
+  body {
+    header.main {
+      height: $mobile-header-height;
+    }
+  }
+}

package/scss/_bpr.scss

@@ -0,0 +1,141 @@
+.bpr {
+  h2 {
+    margin: 0!important;
+  }
+  textarea {
+    resize: vertical;
+    height: 100px;
+    margin-top: 0;
+  }
+  & section.lightbox label {
+    margin-bottom: 0!important;
+  }
+  & .lightbox > div.content {
+    width: 800px!important;
+    padding: 15px 30px;
+  }
+  & .tiny-lightbox > div.content {
+    width: 500px!important;
+    padding: 15px 30px;
+  }
+
+  .loading-list {
+    overflow: auto!important;
+  }
+  .select-file button {
+    min-width: 120px;
+  }
+  button.select-button {
+    border-radius: 5px;
+    & span {
+      font-size: 14px;
+      &.active {
+        color: inherit;
+      }
+    }
+  }
+  button.select-button,
+  select {
+    border-radius: 5px;
+    padding: 5px 10px;
+  }
+
+  .multiline-ellipsis-two {
+    line-height: 1;
+    font-size: 14px!important;
+    &::before {
+      content:"";
+    }
+  }
+
+  .search-pagination input + i.search {
+    font-size: 18px;
+  }
+
+  .smaller-text {
+    font-size: 12px!important;
+  }
+
+  .lightbox-view .search-pagination input, .lightbox .search-pagination input {
+    padding-left: 10px!important;
+  }
+
+  .noUi-connect {
+    background: $accent !important;
+  }
+  .noUi-horizontal {
+    height: 10px;
+  }
+  .noUi-horizontal .noUi-handle {
+    width: 20px;
+    height: 20px;
+  }
+  .noUi-handle:before,
+  .noUi-handle:after {
+    width: 0;
+  }
+
+  file-picker-list .media-library .import-files {
+    height: 70px;
+    margin-right: 20px;
+    border: none;
+    background-color: transparent;
+    & > article {
+      top: 0;
+      left: 5px;
+      width: 380px;
+      & .cloud-upload {
+        visibility: hidden;
+      }
+      & .help {
+        font-size: 0.7em;
+      }
+    }
+  }
+
+  .file-picker_preview {
+    max-width: 120px;
+  }
+
+  .file-image {
+    font-size: 64px;
+    opacity: 0.3;
+  }
+
+  .licence_image {
+    height: 21px;
+    max-width: unset;
+  }
+
+  .language,
+  .description {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: white;
+    font-family: "Roboto", Arial, sans-serif;
+    font-size: 14px;
+  }
+  .licence-condition {
+    .info-pic {
+      &:before {
+        font-size: 21px;
+      }
+    }
+    li {
+      margin: 10px 0;
+      line-height: 1.6;
+    }
+  }
+  i.congrats {
+    float: left;
+    color: $yellow;
+    font-size: 100px;
+    margin: 0 25px 0 10px;
+  }
+}
+
+@media screen and (max-width: $tablette) {
+  file-picker-list .media-library .import-files > article {
+      width: inherit;
+  }
+}

package/scss/_breakpoints.scss

@@ -0,0 +1,9 @@
+
+////////    BREAKPOINTS
+
+$wide-screen: 1200px;
+$fat-tablette: 1024px;
+$tablette: 800px;
+$small-tablette: 650px;
+$fat-mobile: 550px;
+$small-mobile: 420px;

package/scss/_colors.scss

@@ -0,0 +1,60 @@
+///////// COLORS ELEMENTS
+
+.bg-primary{
+	background-color: $primary;
+}
+
+.bg-accent{
+	background-color: $accent;
+}
+.bg-color{
+	background-color: $background;
+}
+.bg-white{
+	background-color: $white;
+}
+
+
+
+// TEXT COLORS
+
+.warning-color{
+    color: $warning-color;
+}
+.warning-color-hover{
+    color: $warning-color-hover;
+}
+.forewarn-color{
+    color: $forewarn-color;
+}
+.valid-color{
+    color: $valid-color;
+}
+
+
+.warning-bg-color{
+    background-color: $warning-color;
+}
+.warning-bg-color-hover{
+    background-color: $warning-color-hover;
+}
+.forewarn-bg-color{
+    background-color: $forewarn-color;
+}
+.valid-bg-color{
+    background-color: $valid-color;
+}
+
+
+
+.valid-color, .valid-color em, .valid-color i{
+    color: $valid-color!important;
+}
+
+.accent-color, .accent-color em, .accent-color i{
+    color: $accent!important;
+}
+
+.primary-color, .primary-color em, .primary-color i{
+    color: $primary!important;
+}