ode-csslib 1.0.0-dev-produit.202209220950

package/scss/_text.scss

@@ -0,0 +1,212 @@
+a{
+	color: $accent;
+	@include run-transition(color);
+	cursor: pointer;
+	&.hover-icon:hover {
+		i:before {
+			@include run-transition(color);
+			color: $accent !important;
+		}
+	}
+}
+
+span.no-style{
+	background: none !important;
+	display: inline !important;
+	padding: 0 !important;
+	border: none !important;
+	border-radius: 0 !important;
+	margin: 0 !important;
+}
+
+.no-background {
+	background: transparent!important;
+}
+
+.no-border {
+	border: inherit!important;
+}
+
+p{
+	word-break: break-word;
+}
+
+
+.low-importance{
+	font-size: 12px !important;
+	height: 16px;
+	line-height: 16px;
+	text-align: right;
+}
+
+
+.medium-importance{
+	font-style: normal;
+	color: #666;
+}
+
+
+.high-importance{
+	font-style: normal;
+	font-weight: bold;
+	color: #666;
+}
+
+label{
+    line-height: 24px
+}
+
+.centered-text{
+	text-align: center !important;
+}
+.left-text{
+	text-align: left !important;
+}
+.right-text{
+	text-align: right!important;
+}
+.strong-text{
+	font-size: $font-size + 8px;
+}
+.italic-text{
+	font-style: italic;
+}
+.upper-title{
+	margin-bottom: 0;
+}
+.strong-title {
+	font-size: 27px;
+	font-weight: bold;
+	color: $grey;
+}
+.text-title {
+	word-wrap: break-word;
+	font-size: 27px;
+	color: $grey;
+    line-height: normal;
+}
+.underlined-title {
+	color: $primary;
+	font-size: 15px;
+	color: $primary;
+	border-bottom: 1px solid $primary;
+
+	strong {
+		color: $primary;
+	}
+}
+
+.text-underline-hover:hover {
+	text-decoration: underline;
+}
+
+.comment{
+	padding: 10px;
+	margin-top: 15px;
+	margin-bottom: 15px;
+}
+
+.low-text {
+	text-transform: none;
+}
+
+.user-content{
+	white-space: pre-line;
+}
+
+.inline{
+	margin: 0;
+}
+
+.text-flow{
+	display: inline-block !important;
+	float: none !important;
+	vertical-align: middle;
+}
+
+.cell-ellipsis{
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+strong.cell-ellipsis{
+	display: block;
+}
+
+.inline-editing{
+	color: darken($medium-grey, 40%);
+}
+
+.tiny-text{
+	font-size: 8px !important;
+}
+
+.smaller-text{
+	font-size: 10px !important;
+}
+
+.small-text{
+	font-size: 12px !important;
+	a, em, label, span{
+		font-size: 12px;
+	}
+	input.inline-editing{
+		margin-top: 0px;
+	}
+}
+
+.medium-text{
+	font-size: 14px !important;
+	a{
+		font-size: 14px;
+	}
+}
+.large-text{
+	font-size: 18px !important;
+	a{
+		font-size: 18px;
+	}
+}
+
+.escape_cke{
+	word-wrap: break-word;
+}
+
+h2 > i.back{
+	font-size: 26px;
+    margin-right: 7px;
+    display: block;
+	float: left;
+	&:hover{
+		color: $accent;
+	}
+}
+
+.indication {
+	color: $solid-grey;
+	font-size: 13px;
+
+	i {
+		margin-right: 0.5em;
+	}
+}
+
+.white-text {
+	color: $white;
+}
+
+.text-word-break {
+	word-wrap: break-word;
+}
+
+.bold {
+	font-weight: bold;
+}
+
+@media screen and (max-width: $tablette) {
+	body{
+		.text-title {
+			font-size: 22px;
+		}
+	}
+}

package/scss/_variables-css-lib.scss

@@ -0,0 +1,97 @@
+// ONE COLORS -> for wayf module
+$cyan: #46afe6 !default;
+$green: #6fbe2e !default;
+$yellow: #eac403 !default;
+$orange: #ff8d2e !default;
+$red: #ff3a55 !default;
+$pink: #ff61c0 !default;
+$purple: #a348c0 !default;
+$indigo: #4f2691 !default;
+
+// COLOR PALETTE : GREY
+$white: #ffffff !default;
+$lightest-grey: #f0f2f4 !default;
+$light-grey: #e9ebef !default;
+$neutral-grey: #d6d9e0 !default;
+$medium-grey: #c9ced5 !default;
+$solid-grey: #b1b6bf !default;
+$grey: #8c939e !default;
+$dark-grey: #5b6472 !default;
+$darkest-grey: #3f454f !default;
+$black: #000000 !default;
+
+// COLOR PALETTE : SHADOW
+$shadow-light: rgba(0, 0, 0, 0.1) !default;
+$shadow: rgba(0, 0, 0, 0.26) !default;
+$shadow-dark: rgba(0, 0, 0, 0.4) !default;
+$shadow-darker: rgba(0, 0, 0, 0.6) !default;
+
+// COLOR PALETTE : CSS-LIB
+$primary: blueviolet !default;
+$primary-darkest: saturate(darken($primary, 40%), 10%) !default;
+$primary-dark: saturate(darken($primary, 9%), 3%) !default;
+$primary-light: saturate(lighten($primary, 17%), 85%) !default;
+$primary-lighter: desaturate(lighten($primary-light, 15%), 10%) !default;
+
+$accent: aqua !default;
+$hover: $accent !default;
+$dark-accent: darken($accent, 20%) !default;
+
+$warning-color: $red;
+$warning-color-hover: darken($warning-color, 35%);
+$forewarn-color: $orange;
+$valid-color: #6FBE2E;
+
+$text-light: $grey !default;
+$text-lightest: $white !default;
+$text-color: $black !default;
+
+$background: darken($white, 2.5%) !default; //#F9F9F9
+$disabled-color: $grey !default;
+$block-disabled-color: $primary-lighter !default;
+
+$colorz: $cyan, $green, $yellow, $orange, $pink, $purple, $indigo;
+
+// MESSAGE FLASH
+$flash-red: #c74848;
+$flash-orange: #ff9057;
+$flash-green: #3cb371;
+$flash-blue: #2a9cc8;
+$flash-grey: #5b6472;
+
+// SIZES
+$icon-list-size: 117px !default;
+$icon-list-padding: 7px !default;
+
+$header-height: 150px !default;
+$mobile-header-height: 150px !default;
+
+$font-size: 12px !default;
+
+//datePicker
+$btnPrimaryBackground: $medium-grey !default;
+
+$fonts-path: "fonts" !default;
+
+// Color Exercizer
+$grey-black: hsl(0, 0%, 29%);
+$grey-graphite: hsl(0, 0%, 56%);
+$grey-stone: hsl(0, 0%, 69%);
+$grey-grey: hsl(0, 0%, 78%);
+$grey-cloudy: hsl(0, 0%, 89%);
+$grey-pearl: hsl(0, 0%, 95%);
+$grey-fog: hsl(0, 0%, 98%);
+$pale-cyan: hsl(204, 100%, 95%);
+$pale-red: hsl(355, 100%, 95%);
+$pale-orange: hsl(26, 100%, 95%);
+$pale-blue: hsl(219, 89%, 93%);
+
+/* Generic Icons */
+
+@font-face {
+  font-family: "generic-icons";
+  font-display: swap;
+  font-style: normal;
+  font-weight: normal;
+  src: url(#{$fonts-path}/generic-icons/generic-icons.woff);
+}

package/scss/icons/_fill.scss

@@ -0,0 +1,17 @@
+$fills: (
+  "primary": $primary,
+  "accent": $accent,
+  "background": $background,
+  "alert": $warning-color,
+  "warning": $forewarn-color,
+  "success": $valid-color,
+  "white": $white,
+  "shadow": $shadow,
+  "black": $black,
+);
+
+@each $fill, $color in $fills {
+  .fill-#{$fill} {
+    fill: $color;
+  }
+}

package/scss/icons/_icons.scss

@@ -0,0 +1,4 @@
+@import "pictos-editor";
+@import "pictos";
+@import "fill";
+@import "svg";

package/scss/icons/_pictos-editor.scss

@@ -0,0 +1,226 @@
+@mixin editor-icon() {
+  @include fonticon;
+  display: block;
+  position: absolute;
+  text-align: center;
+  line-height: 44px;
+}
+
+.option.justify-left > i,
+i.justify-left {
+  @include fonticon;
+
+  &::before {
+    content: "\e8b8";
+  }
+}
+
+.option.justify-right > i,
+i.justify-right {
+  @include fonticon;
+
+  &::before {
+    content: "\e8b6";
+  }
+}
+
+.option.justify-center > i,
+i.justify-center {
+  @include fonticon;
+
+  &::before {
+    content: "\e8b7";
+  }
+}
+
+.option.justify-full > i,
+i.justify-full {
+  @include fonticon;
+
+  &::before {
+    content: "\e8b5";
+  }
+}
+
+.option.bold > i {
+  @include fonticon;
+  &::before {
+    content: "\e8b9";
+  }
+}
+.option.italic > i {
+  @include fonticon;
+  &::before {
+    content: "\e8b4";
+  }
+}
+.option.underline > i {
+  @include fonticon;
+  &::before {
+    content: "\e8b1";
+  }
+}
+.option.justify-left > i {
+  @include fonticon;
+  &::before {
+    content: "\e8b8";
+  }
+}
+.option.justify-right > i {
+  @include fonticon;
+  &::before {
+    content: "\e8b6";
+  }
+}
+.option.justify-center > i {
+  @include fonticon;
+  &::before {
+    content: "\e8b7";
+  }
+}
+.option.justify-full > i {
+  @include fonticon;
+  &::before {
+    content: "\e8b5";
+  }
+}
+.option.subscript > i {
+  @include fonticon;
+  &::before {
+    content: "\e8b0";
+  }
+}
+.option.superscript > i {
+  @include fonticon;
+  &::before {
+    content: "\e8af";
+  }
+}
+.option.quote > i {
+  @include fonticon;
+  &::before {
+    content: "\e8c2";
+  }
+}
+.option.ulist i {
+  @include fonticon;
+  &::before {
+    content: "\e8ad";
+  }
+}
+.option.olist > i {
+  @include fonticon;
+  &::before {
+    content: "\e8ae";
+  }
+}
+.option.image > i {
+  @include fonticon;
+  &::before {
+    content: "\e84a";
+  }
+}
+.option.attachment > i {
+  @include fonticon;
+  &::before {
+    content: "\e805";
+  }
+}
+.option.sound > i {
+  @include fonticon;
+  &::before {
+    content: "\e839";
+  }
+}
+.option.table {
+  popover {
+    > i {
+      @include fonticon;
+      &::before {
+        content: "\e8b3";
+        color: black;
+      }
+    }
+  }
+}
+.option.linker {
+  > i {
+    @include fonticon;
+    &::before {
+      content: "\e84d";
+    }
+  }
+}
+.option.smileys {
+  > i {
+    @include fonticon;
+    &::before {
+      content: "\e8c0";
+    }
+  }
+}
+.option.unlink > i {
+  @include fonticon;
+  &::before {
+    content: "\e8bf";
+  }
+}
+.option.embed > i {
+  @include fonticon;
+  &::before {
+    content: "\e872";
+  }
+}
+.option.audio > i {
+  @include fonticon;
+  &::before {
+    content: "\e839";
+  }
+}
+.option.color > i {
+  @include fonticon;
+  &::before {
+    content: "\e8c4";
+  }
+}
+.option.background-color > i {
+  @include fonticon;
+  &::before {
+    content: "\e8c4";
+  }
+  color: #fff;
+}
+
+@media screen and (max-width: $tablette) {
+  body editor editor-toolbar {
+    .option.font {
+      select-list .selected-value {
+        @include editor-icon();
+        &::after {
+          content: "\e8c4";
+          color: black;
+        }
+      }
+    }
+
+    .option.font-size {
+      select-list .selected-value {
+        @include editor-icon();
+        &::after {
+          content: "\e8c7";
+          color: black;
+        }
+      }
+    }
+
+    .option.format {
+      select-list .selected-value {
+        @include editor-icon();
+        &::after {
+          content: "\e8c8";
+          color: black;
+        }
+      }
+    }
+  }
+}