@randstad-design/orbit-multitheme/dist/assets/theme-randstad/components/chat.css.map

multitheme Front-end code based on Randstad Human Forward components

{"version":3,"sources":["04_organisms/_chat.scss","../scss/00_tools/cssVartoSass.scss","00_helpers/mixins/_media-queries.scss","00_helpers/variables/_sizing.scss","00_helpers/variables/_spacing.scss"],"names":[],"mappings":"AAAA;EACE,oCCC2C;EDA3C,YAAY;EACZ,gBAAgB;EAChB,WAAW,EAAA;EE0DT;IF9DJ;MAOI,aAAsB,EAAA,EAKzB;EAZD;IAUI,mCCRyC,EAAA;;ADY7C;;EAEE,OAAO;EACP,MAAM;EACN,aAAa,EAAA;;AAGf;EACE,kBAAkB,EAAA;EEwChB;IFzCJ;MAII,0BAAsD;MACtD,SAAS;MACT,2CAA2C;MAC3C,WAAW;MACX,WAAoB;MACpB,UAAU;MACV,YAAqB,EAAA,EAExB;;AAED;EACE,eAAe,EAAA;EE0Bb;IF3BJ;MAII,kBGnCe;MHoCf,uDCtCyC;MDuCzC,gBAAgB;MAChB,kBAAkB,EAAA,EAMrB;EAbD;IAWI,QAAQ,EAAA;;AAIZ;EACE,aAAa;EACb,4DAA4D;EAC5D,+CAA+C;EAC/C,YAAY,EAAA;;AAGd;EACE,yBAAmB;EAAnB,2BAAmB;EAAnB,sBAAmB;EAAnB,mBAAmB;EACnB,oCCzD2C;ED0D3C,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,sBAAsB;EACtB,YAAqB;EACrB,kBInDwB;EJoDxB,WAAW;EACX,YAAY,EAAA;;AAGd;EACE,iCAAiC;EACjC,oBAAoB;EACpB,gBAAgB;EAChB,mBAA0B,EAAA;EEVxB;IFMJ;MAMI,iBAAiB,EAAA,EAEpB;;AAED;EACE,oCC7E2C;ED8E3C,sBAAsB;EACtB,gBAAyB;EACzB,kBItEwB;EJuExB,WAAW,EAAA;;AAGb;EACE,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;EAAtB,8BAAsB;EAAtB,0BAAsB;EAAtB,sBAAsB;EACtB,kBAAkB,EAAA;;AAGpB;EACE,gBInF4B,EAAA;EJkF9B;IAII,cAAc,EAAA;;AAIlB;EACE,oBI1FyB,EAAA;;AJ6F3B;EACE,eAAe,EAAA;EE3Cb;IF0CJ;MAGI,gBAAyB,EAAA,EAE5B;;AAED;EACE,4BAAoB;EAApB,wBAAoB;EAApB,oBAAoB;EACpB,kBIvG4B;EJwG5B,iBAAiB,EAAA;;AAGnB;EACE,8BAAsB;EAAtB,0BAAsB;EAAtB,sBAAsB;EACtB,kBI7G4B;EJ8G5B,iBAAiB;EACjB,kBAAkB;EAElB,uCAAuC,EAAA;;AAGzC;EACE,oCC7H2C;ED8H3C,YAAY;EACZ,kBAAkB;EAClB,MAAM;EACN,mCAA2B;EAA3B,2BAA2B;EAC3B,4BAAoB;EAApB,oBAAoB;EACpB,WAAW;EACX,YAAY;EACZ,kBAAkB,EAAA;EATpB;IAYI,gCAAwB;IAAxB,wBAAwB;IACxB,mBAAmB,EAAA;;AAIvB;EACE,mCC9I2C;ED+I3C,kBAAkB;EAClB,SAAS,EAAA;;AAGX;EACE,uDCpJ2C;EDqJ3C,YAAY;EACZ,UAAU;EACV,kBAAkB;EAClB,MAAM;EACN,iCAAyB;EAAzB,yBAAyB;EACzB,kBAAkB;EAClB,WAAW;EACX,YAAY,EAAA;EATd;IAYI,UAAU;IACV,4BAAoB;IAApB,oBAAoB;IACpB,mBAAmB,EAAA;;AAIvB;EACE,6CCtK2C;EDuK3C,SAAS;EACT,aAAa;EACb,aAAa;EACb,kBAAkB;EAClB,mCAA2B;EAA3B,2BAA2B;EAC3B,+BAAuB;EAAvB,uBAAuB;EACvB,WAAW,EAAA;EAEX;IACE,gCAAwB;IAAxB,wBAAwB;IACxB,8BAAsB;IAAtB,sBAAsB,EAAA","file":"chat.css","sourcesContent":[".chat {\n  background-color: returnColorCSSVar('white');\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  @include viewport--l {\n    height: $baseline * 56;\n  }\n  a.link {\n    color: returnColorCSSVar('brand-secondary');\n}\n}\n\n.chat--float,\n.chat--embed {\n  left: 0;\n  top: 0;\n  z-index: 8000;\n}\n\n.chat--float {\n  position: absolute;\n\n  @include viewport--l {\n    border-radius: $border-radius--l $border-radius--l 0 0;\n    bottom: 0;\n    box-shadow: 0 0 30px 0px rgba(0, 0, 0, 0.1);\n    left: unset;\n    right: $baseline * 3;\n    top: unset;\n    width: $baseline * 40;\n  }\n}\n\n.chat--embed {\n  position: fixed;\n\n  @include viewport--l {\n    border-radius: $border-radius;\n    border: 1px solid returnColorCSSVar('brand-tertiary-shade-110');\n    overflow: hidden;\n    position: relative;\n  }\n\n  .speech-bubble__avatar {\n    top: 6px;\n  }\n}\n\n.chat__wrapper {\n  display: grid;\n  grid-template-areas: 'chat-header' 'chat-main' 'chat-footer';\n  grid-template-rows: 70px 1fr minmax(90px, auto);\n  height: 100%;\n}\n\n.chat__header {\n  align-items: center;\n  background-color: returnColorCSSVar('white');\n  display: flex;\n  grid-area: chat-header;\n  height: $baseline * 7;\n  padding: 15px $spacing--s;\n  width: 100%;\n  z-index: 100;\n}\n\n.chat__box {\n  -webkit-overflow-scrolling: touch;\n  grid-area: chat-main;\n  overflow-y: auto;\n  padding: 0 $spacing--s 5px;\n  @include viewport--l {\n    max-height: 490px;\n  }\n}\n\n.chat__footer {\n  background-color: returnColorCSSVar('white');\n  grid-area: chat-footer;\n  min-height: $baseline * 9;\n  padding: 15px $spacing--s;\n  width: 100%;\n}\n\n.chat-content__wrapper {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n\n.chat-content__wrapper--first {\n  padding-top: $spacing--xxs;\n\n  &:first-child {\n    padding-top: 0;\n  }\n}\n\n.chat-content__wrapper:last-child {\n  padding-bottom: $spacing--xs;\n}\n\n.chat .chat__content {\n  max-width: 100%;\n  @include viewport--l {\n    max-width: $baseline * 29;\n  }\n}\n\n.chat__content--user {\n  align-self: flex-end;\n  margin-bottom: $spacing--xxs;\n  margin-left: 70px;\n}\n\n.chat__content--bot {\n  align-self: flex-start;\n  margin-bottom: $spacing--xxs;\n  margin-left: 35px;\n  margin-right: 35px;\n  // added !important for specificity to prevent max width 100% on buttons\n  max-width: calc(100% - 70px) !important;\n}\n\n.chat-settings {\n  background-color: returnColorCSSVar('white');\n  height: 100%;\n  position: absolute;\n  top: 0;\n  transform: translateX(100%);\n  transition: all 0.3s;\n  width: 100%;\n  z-index: 100;\n  visibility: hidden;\n\n  &.is-active {\n    transform: translateX(0);\n    visibility: visible;\n  }\n}\n\n.chat-settings__title {\n  color: returnColorCSSVar('brand-secondary');\n  position: relative;\n  top: -2px;\n}\n\n.chat-settings__overlay {\n  background-color: returnColorCSSVar('brand-secondary-alpha-70');\n  height: 100%;\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  transition: all 0.3s 0.1s;\n  visibility: hidden;\n  width: 100%;\n  z-index: 100;\n\n  &.is-active {\n    opacity: 1;\n    transition-delay: 0s;\n    visibility: visible;\n  }\n}\n\n.chat-settings__overlay-content {\n  background-color: returnColorCSSVar('brand-tertiary');\n  bottom: 0;\n  height: 290px;\n  padding: 20px;\n  position: absolute;\n  transform: translateY(100%);\n  transition: all 0.3s 0s;\n  width: 100%;\n\n  .is-active.chat-settings__overlay & {\n    transform: translateY(0);\n    transition-delay: 0.1s;\n  }\n}\n","// Returns CSS4 color variables\n@function returnColorCSSVar($color-name) {\n  @return var(--color-#{$color-name});\n}\n","// @viewport--x($reversed)\n\n// viewport s\n@mixin viewport--s($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--s - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width:0) and (max-width: #{($breakpoint-viewport--s - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--s}) {\n      @content;\n    }\n  }\n}\n\n// viewport m\n@mixin viewport--m($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--m - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width: $breakpoint-viewport--m) and (max-width: #{($breakpoint-viewport--l - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--m}) {\n      @content;\n    }\n  }\n}\n\n// viewport l\n@mixin viewport--l($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--l - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width: $breakpoint-viewport--l) and (max-width: #{($breakpoint-viewport--xl - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--l}) {\n      @content;\n    }\n  }\n}\n\n// viewport xl\n@mixin viewport--xl($type: null) {\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--xl - 1)}) {\n      @content;\n    }\n  }\n  // range\n  @else if ($type== 'range') {\n    @media (min-width: $breakpoint-viewport--xl) and (max-width: #{($breakpoint-viewport--xxl - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--xl}) {\n      @content;\n    }\n  }\n}\n\n// viewport xxl\n@mixin viewport--xxl($type: null) {\n  // inversed\n  @if ($type == 'inversed') {\n    @media (max-width: #{($breakpoint-viewport--xxl - 1)}) {\n      @content;\n    }\n  }\n  // default\n  @else {\n    @media (min-width: #{$breakpoint-viewport--xxl}) {\n      @content;\n    }\n  }\n}\n\n// viewport range\n@mixin viewport--range($viewport1, $viewport2) {\n  @media (min-width: #{($viewport1)}) and (max-width: #{($viewport2 - 1)}) {\n    @content;\n  }\n}\n\n// Internet Explorer 10 + 11\n@mixin internet-explorer-10-11 {\n  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n    @content;\n  }\n}\n","// baseline size, used for every calculation\n$baseline: 10px;\n\n// border radius\n$border-radius: 4px;\n$border-radius--s: 3px;\n$border-radius--xs: 2px;\n$border-radius--m: 5px;\n$border-radius--m-l: 6px;\n$border-radius--l: 8px;\n$border-radius--max: 30px;\n","// | variable      | size  | calculation     |\n// |---------------|-------|-----------------|\n// | $spacing--xxs |  5px  | $baseline * 0.5 |\n// | $spacing--xs  | 10px  | $baseline * 1   |\n// | $spacing--s   | 20px  | $baseline * 2   |\n// | $spacing--m   | 30px  | $baseline * 3   |\n// | $spacing--l   | 50px  | $baseline * 5   |\n// | $spacing--xl  | 80px  | $baseline * 8   |\n// | $spacing--xxl | 130px | $baseline * 13  |\n\n$spacing--xxs: $baseline * 0.5;\n$spacing--xs: $baseline * 1;\n$spacing--s: $baseline * 2;\n$spacing--m: $baseline * 3;\n$spacing--l: $baseline * 5;\n$spacing--xl: $baseline * 8;\n$spacing--xxl: $baseline * 13;\n\n// grid spacings\n$grid-margin--s: 25px;\n$grid-margin--m: 50px;\n$grid-margin--l: 100px;\n"]}