@drumee/ui-styles 1.0.0

package/src/lib/utils.scss

@@ -0,0 +1,307 @@
+@use './vendor';
+
+.u-jc-center {
+  @include vendor.justify(center);
+}
+
+.u-jc-start {
+  @include vendor.justify(flex-start);
+}
+
+.u-jc-end {
+  @include vendor.justify(flex-end);
+}
+
+.u-jc-sb {
+  @include vendor.justify(space-between);
+}
+
+.u-jc-sa {
+  @include vendor.justify(space-around);
+}
+
+.u-jc-st {
+  @include vendor.justify(stretch);
+}
+
+.u-ac-center {
+  @include vendor.align-content(center);
+}
+
+.u-ac-start {
+  @include vendor.align-content(flex-start);
+}
+
+.u-ac-end {
+  @include vendor.align-content(flex-end);
+}
+
+.u-ai-center {
+  @include vendor.align-items(center);
+}
+
+.u-ai-start {
+  @include vendor.align-items(flex-start);
+}
+
+.u-ai-end {
+  @include vendor.align-items(flex-end);
+}
+
+.u-as-center {
+  align-self: center;
+}
+
+.u-as-end {
+  align-self: flex-end;
+}
+
+.u-as-start {
+  align-self: flex-start;
+}
+
+.u-fd-column {
+  flex-direction: column !important
+}
+
+;
+
+.u-fd-row {
+  flex-direction: row !important
+}
+
+;
+
+.u-fd-columnr {
+  flex-direction: column-reverse !important
+}
+
+;
+
+.u-fd-rowr {
+  flex-direction: row-reverse !important
+}
+
+;
+
+.u-fw-wrap {
+  flex-wrap: wrap;
+}
+
+.u-fw-nowrap {
+  flex-wrap: nowrap;
+}
+
+.u-flex-grow {
+  flex-grow: 1
+}
+
+;
+
+.text-center {
+  text-align: center
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.h-100 {
+  height: 100% !important;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+
+
+.auto {
+  width: auto;
+  height: auto;
+}
+
+
+.margin-auto-v {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+.margin-auto-h {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.absolute {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+}
+
+.out-of-screen,
+.file-selector__ui {
+  position: absolute !important;
+  left: -100000px;
+  top: -100000px;
+  visibility: hidden;
+}
+
+.fill-up {
+  position: absolute !important;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+
+  &[data-visible="no"] {
+    visibility: visible;
+    z-index: -1000;
+    left: -5000px;
+    top: -5000px;
+    width: 0;
+    height: 0;
+  }
+}
+
+.cursor-pointer,
+.pointer,
+.clickable {
+  cursor: pointer !important;
+}
+
+.cursor-help {
+  cursor: help !important;
+}
+
+.margin-auto {
+  margin: auto !important;
+}
+
+.selectable-text {
+  -webkit-user-select: text;
+  /* Chrome 49+ */
+  -moz-user-select: text;
+  /* Firefox 43+ */
+  -ms-user-select: text;
+  /* No support yet */
+  user-select: text;
+}
+
+.selectable-text-all {
+  -webkit-user-select: all;
+  /* Chrome 49+ */
+  -moz-user-select: all;
+  /* Firefox 43+ */
+  -ms-user-select: all;
+  /* No support yet */
+  user-select: all;
+}
+
+.fatal-error {
+  width: 100%;
+}
+
+[data-state="closed"] {
+  z-index: -1 !important;
+  visibility: hidden !important;
+  //opacity:0 !important;
+  height: 0 !important;
+  width: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+[data-state="open"] {
+  z-index: var(--z-index-context) !important;
+  visibility: visible;
+  //opacity:1;
+}
+
+[data-hide="yes"] {
+  visibility: hidden;
+  z-index: -2;
+  display: none !important;
+}
+
+[data-hide="no"] {
+  z-index: 20000;
+  visibility: visible;
+}
+
+[data-position="absolute"] {
+  position: absolute !important;
+}
+
+// [data-status="error"]{
+//   color:red;
+//   border:red 1px solid;
+// }
+
+[contenteditable=true]:empty:before {
+  content: attr(placeholder);
+  display: block;
+  /* For Firefox */
+}
+
+strong {
+  font-weight: bold !important;
+}
+
+.no-padding {
+  padding: 0 !important;
+}
+
+.no-border {
+  border: none !important;
+}
+
+
+.first {
+  float: left;
+  margin-left: 0;
+}
+
+.last {
+  float: right;
+  margin-right: 0;
+}
+
+.full {
+  //clear: both;
+  width: 100%;
+  height: 100%;
+  //float: left;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.full-x {
+  height: 100%;
+  height: auto;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.half {
+  clear: both;
+  width: 90%;
+  float: left;
+}
+
+.quarter {
+  clear: both;
+  width: 25%;
+  float: left;
+}
+
+//.dots, 
+.colon {
+  &:after {
+    content: ":";
+  }
+}
+

package/src/lib/vendor.scss

@@ -0,0 +1,179 @@
+@mixin placeholder($color) {
+  &::-webkit-input-placeholder {
+    color: $color;
+  }
+  &::-moz-placeholder {
+    color: $color;
+  }
+  &:-ms-input-placeholder {
+    color: $color;
+  }
+  &:-moz-placeholder {
+    color: $color;
+  }
+}
+
+@mixin vendor($property, $val){
+  -webkit-#{$property}: $val;
+  -moz-#{$property}: $val;
+  -ms-#{$property}: $val;
+  #{$property}: $val;
+}
+
+@mixin vendor-ad($property-out, $property, $val){
+  #{$property-out}: -webkit-#{$property} ($val);
+  #{$property-out}: -moz-#{$property} ($val);
+  #{$property-out}: -ms-#{$property} ($val);
+  #{$property-out}: #{$property} ($val);
+}
+
+@mixin rotate($val){
+  -webkit-transform: rotate($val);
+  -moz-transform: rotate($val);
+  -ms-transform: rotate($val);
+  transform: rotate($val);
+}
+
+@mixin gradient($gradient...) {
+  background: -moz-linear-gradient($gradient);
+  background: -webkit-linear-gradient($gradient);
+  background: linear-gradient($gradient);
+}
+@mixin gradient_r($gradient...) {
+  background: -moz-radial-gradient($gradient);
+  background: -webkit-radial-gradient($gradient);
+  background: radial-gradient($gradient);
+}
+
+@mixin drumee-gradient {
+  background: #004f64; 
+}
+
+@mixin drumee-box-shadow-1 {
+  box-shadow: 0 -2px 8px 1px rgba(63, 79, 117, 0.13), 0 5px 12px 0 rgba(86, 65, 113, 0.08), 0 -2px 4px 0 rgba(194, 185, 203, 0);
+}
+
+@mixin justify($prop, $state:"!important") {
+  @if $state=="!important" {
+    display: flex!important;
+    -webkit-justify-content: $prop!important;
+    justify-content: $prop!important;
+  }
+  @else {
+    display: flex;
+    -webkit-justify-content: $prop;
+    justify-content: $prop;
+  }
+}
+
+@mixin align-content($prop, $state:"!important") {
+  @if $state=="!important" {
+    display: flex!important;
+    -webkit-align-content: $prop!important;
+    align-content: $prop!important;
+  }
+  @else {
+    display: flex;
+    -webkit-align-content: $prop;
+    align-content: $prop;
+  }
+}
+
+@mixin align-items($prop, $state:"!important") {
+  @if $state=="!important" {
+    display: flex!important;
+    -webkit-align-items: $prop!important;
+    align-items: $prop!important;
+  }
+  @else {
+    display: flex;
+    -webkit-align-items: $prop;
+    align-items: $prop;
+  }
+}
+
+@mixin margin-list($direction, $num, $pref:'') {
+  @for $i from 0 through $num {
+    @if $direction == margin-top           { .mt-#{$i} { #{$direction}: #{$i}px !important; } }
+    @else if $direction == margin-bottom   { .mb-#{$i} { #{$direction}: #{$i}px !important; } }
+    @else if $direction == margin-left     { .ml-#{$i} { #{$direction}: #{$i}px !important; } }
+    @else if $direction == margin-right    { .mr-#{$i} { #{$direction}: #{$i}px !important; } }
+    @else if $direction == margin-hor      { .mx-#{$i} { margin-left: #{$i}px !important; margin-right: #{$i}px !important; } }
+    @else if $direction == margin-vert     { .my-#{$i} { margin-top: #{$i}px !important; margin-bottom: #{$i}px !important; } }
+    @else if $direction == padding-top     { .pt-#{$i} { #{$direction}: #{$i}px !important; } }
+    @else if $direction == padding-hor     { .px-#{$i} { padding-left: #{$i}px !important; padding-right: #{$i}px !important; } }
+    @else if $direction == padding-vert    { .py-#{$i} { padding-top: #{$i}px !important; padding-bottom: #{$i}px !important; } }
+    @else if $direction == padding-bottom  { .pb-#{$i} { #{$direction}: #{$i}px !important; } }
+    @else if $direction == padding-left    { .pl-#{$i} { #{$direction}: #{$i}px !important; } }
+    @else if $direction == padding-right   { .pr-#{$i} { #{$direction}: #{$i}px !important; } }
+    @else if $direction == margin          { .m-#{$i} { #{$direction}: #{$i}px !important; } }
+    @else if $direction == padding         { .p-#{$i} { #{$direction}: #{$i}px !important; } }
+  }
+}
+
+@mixin margin-list-md($direction, $num, $pref:'') {
+  @media (max-width: 991px) {
+    @for $i from 0 through $num {
+      @if $direction == margin-top           { .mt-md-#{$i} { #{$direction}: #{$i}px !important; } }
+      @else if $direction == margin-bottom   { .mb-md-#{$i} { #{$direction}: #{$i}px !important; } }
+      @else if $direction == margin-left     { .ml-md-#{$i} { #{$direction}: #{$i}px !important; } }
+      @else if $direction == margin-right    { .mr-md-#{$i} { #{$direction}: #{$i}px !important; } }
+      @else if $direction == margin-hor      { .mx-md-#{$i} { margin-left: #{$i}px !important; margin-right: #{$i}px !important; } }
+      @else if $direction == margin-vert     { .my-md-#{$i} { margin-top: #{$i}px !important; margin-bottom: #{$i}px !important; } }
+      @else if $direction == padding-top     { .pt-md-#{$i} { #{$direction}: #{$i}px !important; } }
+      @else if $direction == padding-hor     { .px-md-#{$i} { padding-left: #{$i}px !important; padding-right: #{$i}px !important; } }
+      @else if $direction == padding-vert    { .py-md-#{$i} { padding-top: #{$i}px !important; padding-bottom: #{$i}px !important; } }
+      @else if $direction == padding-bottom  { .pb-md-#{$i} { #{$direction}: #{$i}px !important; } }
+      @else if $direction == padding-left    { .pl-md-#{$i} { #{$direction}: #{$i}px !important; } }
+      @else if $direction == padding-right   { .pr-md-#{$i} { #{$direction}: #{$i}px !important; } }
+      @else if $direction == margin          { .m-md-#{$i} { #{$direction}: #{$i}px !important; } }
+      @else if $direction == padding         { .p-md-#{$i} { #{$direction}: #{$i}px !important; } }
+    }
+  }
+}
+
+@mixin z-index($num) {
+  @for $i from 0 through $num {
+    .z#{$i} { z-index: #{$i}; }
+  }
+}
+
+
+@mixin arrow-position($apos, $btnnum, $spacing: between, $blockwidth: 218px, $asize: 9.9px, $adir: "left", $btnsize: 30px, $buttonblockwidth: 212px) {
+  $const: 1.5px + (($blockwidth - $buttonblockwidth)/2);
+  @if $spacing == between { 
+    &:before {
+      $btnBetweenSpace: ($buttonblockwidth - ($btnsize * $btnnum))/($btnnum - 1);
+      $btnIsnideSpace: ($btnsize - $asize) / 2; 
+      $marginLeft: ($btnsize * ($apos - 1)) + ($btnBetweenSpace * ($apos - 1)) + $btnIsnideSpace;
+      #{$adir}: $const + $marginLeft;
+    }
+  } 
+  @else if $spacing == evenly {
+    &:before {
+      $btnBetweenSpace: ($blockwidth - ($btnsize * $btnnum))/($btnnum + 1);
+      $btnIsnideSpace: ($btnsize - $asize) / 2; 
+      $marginLeft: ($btnsize * ($apos - 1)) + ($btnBetweenSpace * ($apos - 1)) + $btnIsnideSpace;
+      #{$adir}: $const + $marginLeft;
+    }
+  } 
+}
+
+@mixin placeholder-input {
+  &::-webkit-input-placeholder {@content};
+  &:-moz-placeholder           {@content};
+  &::-moz-placeholder          {@content};
+  &:-ms-input-placeholder      {@content};
+}
+
+@mixin overflow-text {
+  white-space: nowrap;
+  overflow: hidden;
+  .note-content {
+    overflow: hidden;
+  }
+  .root-node {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

package/src/main.scss

@@ -0,0 +1,29 @@
+@use "./vars/index";
+@use "./lib/reset";
+@use "./lib/input";
+@use "./lib/align";
+@use "./lib/container";
+@use "./lib/svg.scss";
+@use "./lib/menu";
+@use "./lib/utils";
+
+body {
+  min-height: 100vh;
+  background-color: rgb(248, 250, 252);
+  visibility: visible;
+}
+
+
+#--router {
+  .widget.photo {
+    img {
+      display: none;
+    }
+  }
+  .wrapper.gateway {
+    width: 100%;
+    height: auto;
+  }
+}
+
+

package/src/mixins.scss

@@ -0,0 +1,4 @@
+@forward './lib/typo';
+@forward './lib/vendor';
+
+

package/src/vars/bigchat.scss

@@ -0,0 +1,77 @@
+.window {
+  --bigchat-header-bg: #4B5DA8;
+  --bigchat-default-background: var(--default-background);
+  --bigchat-default-background-hover: var(--default-background-hover);
+  --bigchat-default-block-background: var(--default-block-background);
+  --bigchat-transparency-container-overlay: var(--transparency-container-overlay);
+  --bigchat-button-background-active: var(--button-background-active);
+  --bigchat-default-background-alert: var(--default-background-alert);
+
+
+  --bigchat-special-tag-color: #4B5DA8;
+  --bigchat-special-share-room-color: #BD44D9;
+  --bigchat-default-text-color: var(--default-text-color);
+  --bigchat-secondary-text-color: var(--secondary-text-color);
+  --bigchat-default-text-reverse: var(--default-text-reverse);
+  --bigchat-default-text-title: var(--default-text-title);
+  --bigchat-default-text-placeholder: var(--default-text-placeholder);
+  --bigchat-default-text-hover: var(--default-text-hover);
+  --bigchat-tertiary-text-color: var(--tertiary-text-color);
+  --bigchat-default-text-inactive: var(--default-text-inactive);
+  --bigchat-backgroundless-text-hover: var(--backgroundless-text-hover);
+  --bigchat-text-title: var(--default-text-title);
+
+
+  --bigchat-icon-header: #4B5DA8;
+  --bigchat-contact-online-color: var(--contact-online-color);
+  --bigchat-default-icon-neutral: var(--default-icon-neutral);
+  --bigchat-default-icon-reverse: var(--default-icon-reverse);
+  --bigchat-default-icon-active: var(--default-icon-active);
+  --bigchat-default-icon-hover: var(--default-icon-hover);
+  --bigchat-default-thinline-icon: var(--default-thinline-icon);
+  --bigchat-default-thinline-icon-hover: var(--default-thinline-icon-hover);
+  --bigchat-default-icon-success: var(--default-icon-success);
+  --bigchat-default-user-icon: var(--default-user-icon);
+  --bigchat-special-tag-note-chat: var(--special-tag-note-chat);
+  --bigchat-default-icon-menu-dropdown: var(--default-icon-menu-dropdown);
+
+  --bigchat-default-checkbox-border: var(--default-checkbox-border);
+  --bigchat-default-checkbox-checked: var(--default-checkbox-checked);
+  --bigchat-default-checkbox-background: var(--default-checkbox-background);
+  --bigchat-checkbox-checked-reverse: var(--checkbox-checked-reverse);
+  --bigchat-checkbox-checked-border-reverse: var(--checkbox-checked-border-reverse);
+  --bigchat-default-radio-active: var(--default-radio-active);
+
+
+  --bigchat-default-entry-border-bottom: var(--default-entry-border-bottom);
+
+  --bigchat-default-separator: var(--default-separator);
+  --bigchat-border-no-discussion: var(--border-no-discussion);
+  --bigchat-default-window-header-search: var(--default-window-header-search);
+
+
+  --bigchat-status-pill-new: #34a578;
+  --bigchat-status-pill-doing: #F0AD4E;
+  --bigchat-status-pill-closed: #7F8C8D;
+
+
+  --dgc-chat-item-me-bg: #F4F4F4;
+  --dgc-messenger-bg: var(--background-chatmessenger);
+  --dgc-messenger-border: var(--background-chatmessenger);
+  --dgc-attachment-close-border: #89929E;
+  --dgc-chat-other-bg: #E4E9FF;
+  --dgc-chat-border: var(--default-separator);
+  --dgc-chat-hover: #78B3F8;
+  --dgc-delete-bg: #EA4D44;
+  --dgc-chat-reply-bg: rgba(74, 144, 226, 0.1);
+  --dgc-chat-ack-bg: #FFFFFF;
+  --dgc-chat-error-ack-bg: #FFF0F2;
+  --dgc-chat-error-ack-text-color: #D76E30;
+  --dgc-chat-error-ack-icon-color: #CC4D09;
+  --dgc-overlay-background: var(--transparency-container-overlay);
+  --dgc-text-reverse: var(--default-text-reverse);
+  --dgc-chat-forward-bg: var(--default-background-hover);
+  --dgc-secondary-text-color: var(--secondary-text-color);
+  --dgc-icon-color: #4a90e2;
+  --dgc-tertiary-text-color: var(--tertiary-text-color);
+}

package/src/vars/borders.scss

@@ -0,0 +1,14 @@
+:root {
+  --border-radius-tiny: 3px;
+  --border-radius-small: 4px;
+  --border-radius: 6px;
+  --border-radius-right: 0 0 6px 0;
+  --border-radius-left: 0 0 0 6px;
+  --border-radius-bottom: 0 0 6px 6px;
+  --border-radius-top: 6px 6px 0px 0px;
+  --border-radius-bottom-small: 0 0 4px 4px;
+  --border-radius-top-small: 4px 4px 0px 0px;
+  --border-radius-checkbox: --border-radius-small;
+  --checkbox-border-radius: 4px;
+  --border-radius-bottom-tiny: 0 0 3px 3px;
+}

package/src/vars/box-shadow.scss

@@ -0,0 +1,27 @@
+:root {
+  /*****************************Window opening*****************/
+  --drumee-shadow-main: 0 0px 8px 0 rgba(63, 79, 117, 0.24)0 -1px 16px 0 rgba(86, 65, 113, 0.10)0 2px 14px 0 rgba(194, 185, 203, 0.16);
+
+  /*****************************Menu opening*****************/
+  --drumee-shadow-container: 0 5px 8px 1px rgba(63, 79, 117, 0.13)0 6px 16px 0 rgba(86, 65, 113, 0.08)0 2px 14px 0 rgba(194, 185, 203, 0.4);
+
+  /*****************************menu wrapper Before*****************/
+  --drumee-container-before: 0 -2px 8px 1px rgba(63, 79, 117, 0.13), 0 5px 12px 0 rgba(86 65 113 /08%), 0 -2px 4px 0 rgba(194, 185, 203, 0.0);
+
+  /*****************************dropdown****************************/
+  --drumee-container-dropdown: 0 0px 8px 0 rgba(63, 79, 117, 0.24)0 -1px 16px 0 rgba(86, 65, 113, 0.10)0 2px 14px 0 rgba(194, 185, 203, 0.16);
+
+  /*****************************Topbar*****************/
+  --drumee-shadow-topbar: 0 2px 2px 1px rgba(63, 79, 117, 0.13), 0 6px 16px 0 rgba(86, 65, 113, 0.08), 0 2px 14px 0 rgba(194, 185, 203, 0.0);
+  --shadow-topbar: --drumee-shadow-topbar:
+    /*****************************Account - préférence- language*****************/
+    --drumee-shadow-accountlist: 0 0px 5px 0px rgba(63, 79, 117, 0.13), 7px -6px 10px 0 rgba(86, 65, 113, 0.08), 0 2px 13px 0 rgba(194, 185, 203, 0.0);
+
+  /*****************************Account - préférence- language*****************/
+  --drumee-shadow-popup: 0 0 7px 0 rgba(0, 0, 0, 0.14), 0 0 6px 0 #f8fafc, 0 3px 5px 0 rgba(0, 0, 0, 0.2);
+
+  /*****************************popup*****************/
+  --drumee-shadow-block: 0 2px 6px 1px rgba(75, 72, 72, 0.10);
+
+  --drumee-shadow-box: 0 2px 6px 1px rgba(75, 72, 72, 0.10);
+}