monday-ui-react-core/dist/Banner.css

Official monday.com UI resources for application development in React.js

.banner{width:content-box}.banner .banner--content{display:grid;position:relative;padding:24px;border-radius:8px;grid-gap:8px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;-webkit-column-gap:24px;-moz-column-gap:24px;column-gap:24px;-ms-flex-line-pack:center;align-content:center;background-color:#f5f6f8;background-color:var(--dark-background-on-secondary-color);color:#323338;color:var(--primary-text-color)}.banner .banner--content .banner--close{position:absolute;top:0;right:0}.banner .banner--content.close-button-spacing{padding-right:32px}.banner .banner--content.image-position__left,.banner .banner--content.image-position__right{grid-auto-rows:auto;grid-auto-columns:auto}.banner .banner--content.image-position__left{grid-template-areas:"image  title    title   " "image  subtitle subtitle"}.banner .banner--content.image-position__right{grid-template-areas:"title    title     image" "subtitle subtitle  image"}.banner .banner--content.image-position__bottom,.banner .banner--content.image-position__top{grid-auto-rows:auto;grid-template-columns:repeat(1,1fr)}.banner .banner--content.image-position__top{grid-template-areas:"image" "title" "subtitle"}.banner .banner--content.image-position__bottom{grid-template-areas:"title" "subtitle" "image"}.banner .banner--content .banner--title{align-self:end;margin:0;grid-area:title;height:32px;font-size:24px;font-weight:500;letter-spacing:-.2px;max-width:782px;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis}.banner .banner--content .banner--subtitle{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Roboto,sans-serif;font-weight:400;font-size:16px;line-height:24px;margin:0;grid-area:subtitle;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.banner .banner--content .banner--image{align-self:center;justify-self:center;grid-area:image;width:100px;height:100px;border-radius:8px;-o-object-fit:contain;object-fit:contain;background-color:#fff!important;background-color:var(--primary-background-color)!important}.banner .banner--content .banner--close{align-self:start;grid-area:close;border-radius:4px}.banner.rtl .banner--content{text-align:right}.banner.rtl .banner--content .banner--close{position:absolute;top:0;left:0;right:auto}.banner.rtl .banner--content.close-button-spacing{padding-left:32px}.banner.rtl .banner--content.image-position__left{grid-template-areas:"image  title    title" "image  subtitle subtitle"}.banner.rtl .banner--content.image-position__right{grid-template-areas:"title    title     image" "subtitle subtitle  image"}.monday-style-button{--loader-padding:8px;outline:none;border:none;height:auto;font-family:Roboto,sans-serif;border-radius:4px;cursor:pointer;white-space:nowrap;-webkit-transition:min-width .1s cubic-bezier(0,0,.35,1),-webkit-transform 50ms;transition:min-width .1s cubic-bezier(0,0,.35,1),-webkit-transform 50ms;-o-transition:50ms transform,.1s cubic-bezier(0,0,.35,1) min-width;transition:transform 50ms,min-width .1s cubic-bezier(0,0,.35,1);transition:transform 50ms,min-width .1s cubic-bezier(0,0,.35,1),-webkit-transform 50ms;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;--element-width:32;--element-height:32;min-width:var(--element-width)}.monday-style-button--margin-right{margin-right:8px}.monday-style-button--margin-left{margin-left:8px}.monday-style-button--right-flat{border-top-right-radius:0;border-bottom-right-radius:0}.monday-style-button--left-flat{border-top-left-radius:0;border-bottom-left-radius:0}.monday-style-button.monday-style-button--loading{min-width:0;width:var(--element-height);height:var(--element-height);position:relative}.monday-style-button .monday-style-button__loader{position:absolute;left:var(--loader-padding);top:var(--loader-padding)}.monday-style-button .monday-style-button__loader,.monday-style-button .monday-style-button__loader .monday-style-button-loader-svg{width:calc(var(--element-height) - var(--loader-padding)*2);height:calc(var(--element-height) - var(--loader-padding)*2)}.monday-style-button:active:not(.monday-style-button--prevent-click-animation){-webkit-transform:scale(.95) translateZ(0);transform:scale(.95) translateZ(0)}.monday-style-button .monday-style-button--left-icon{padding-right:8px}.monday-style-button .monday-style-button--right-icon{padding-left:8px}.monday-style-button--size-small{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Roboto,sans-serif;font-size:14px;font-weight:400;line-height:22px;padding:4px 8px;min-height:32px;line-height:24px}.monday-style-button--size-small .monday-style-button__loader{top:7px}.monday-style-button--size-medium{padding:8px 16px;min-height:40px}.monday-style-button--size-large,.monday-style-button--size-medium{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Roboto,sans-serif;font-weight:400;font-size:16px;line-height:24px}.monday-style-button--size-large{padding:12px 24px;min-height:48px}.monday-style-button--kind-primary{color:#fff;color:var(--text-color-on-primary)}.monday-style-button--kind-primary.monday-style-button--color-primary{background-color:#0085ff;background-color:var(--primary-color)}.monday-style-button--kind-primary.monday-style-button--color-primary-active,.monday-style-button--kind-primary.monday-style-button--color-primary:focus,.monday-style-button--kind-primary.monday-style-button--color-primary:hover{background-color:#0071d9;background-color:var(--primary-hover-color)}.monday-style-button--kind-primary.monday-style-button--color-positive{background-color:#00ca72;background-color:var(--positive-color)}.monday-style-button--kind-primary.monday-style-button--color-positive-active,.monday-style-button--kind-primary.monday-style-button--color-positive:focus,.monday-style-button--kind-primary.monday-style-button--color-positive:hover{background-color:#00a25b;background-color:var(--positive-color-hover)}.monday-style-button--kind-primary.monday-style-button--color-negative{background-color:#e44258;background-color:var(--negative-color)}.monday-style-button--kind-primary.monday-style-button--color-negative-active,.monday-style-button--kind-primary.monday-style-button--color-negative:focus,.monday-style-button--kind-primary.monday-style-button--color-negative:hover{background-color:#b63546;background-color:var(--negative-color-hover)}.monday-style-button--kind-primary.monday-style-button--color-on-primary-color{background-color:#fff;background-color:var(--text-color-on-primary)}.monday-style-button--kind-primary.monday-style-button--color-on-primary-color-active,.monday-style-button--kind-primary.monday-style-button--color-on-primary-color:focus,.monday-style-button--kind-primary.monday-style-button--color-on-primary-color:hover{background-color:#e6e9ef;-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.monday-style-button--kind-primary.monday-style-button:disabled{background-color:#e6e9ef;background-color:var(--disabled-background-color);color:#676879;color:var(--disabled-text-color);cursor:not-allowed;pointer-events:none}.monday-style-button--kind-secondary{border:1px solid #e6e9ef;border-color:var(--ui-border-color);color:#323338;color:var(--primary-text-color);background-color:rgba(0,0,0,0)}.monday-style-button--kind-secondary.monday-style-button--size-large,.monday-style-button--kind-secondary.monday-style-button--size-medium,.monday-style-button--kind-secondary.monday-style-button--size-small{line-height:22px}.monday-style-button--kind-secondary.monday-style-button--color-primary-active,.monday-style-button--kind-secondary.monday-style-button--color-primary:focus,.monday-style-button--kind-secondary.monday-style-button--color-primary:hover{background-color:#c5c7d0;background-color:var(--primary-background-hover-color)}.monday-style-button--kind-secondary.monday-style-button--color-positive{color:#00ca72;color:var(--positive-color);border-color:#00ca72;border-color:var(--positive-color)}.monday-style-button--kind-secondary.monday-style-button--color-positive-active,.monday-style-button--kind-secondary.monday-style-button--color-positive:focus,.monday-style-button--kind-secondary.monday-style-button--color-positive:hover{background-color:var(--positive-color-selected)}.monday-style-button--kind-secondary.monday-style-button--color-negative{color:#e44258;color:var(--negative-color);border-color:#e44258;border-color:var(--negative-color)}.monday-style-button--kind-secondary.monday-style-button--color-negative-active,.monday-style-button--kind-secondary.monday-style-button--color-negative:focus,.monday-style-button--kind-secondary.monday-style-button--color-negative:hover{background-color:#b63546;background-color:var(--negative-color-selected)}.monday-style-button--kind-secondary.monday-style-button--color-on-primary-color{color:#fff;color:var(--text-color-on-primary);border-color:#fff;border-color:var(--text-color-on-primary)}.monday-style-button--kind-secondary.monday-style-button--color-on-primary-color-active,.monday-style-button--kind-secondary.monday-style-button--color-on-primary-color:focus,.monday-style-button--kind-secondary.monday-style-button--color-on-primary-color:hover{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.monday-style-button--kind-secondary:disabled{border-color:#e6e9ef;border-color:var(--disabled-background-color);color:#676879;color:var(--disabled-text-color);cursor:not-allowed;pointer-events:none}.monday-style-button--kind-secondary:disabled:hover{background-color:rgba(0,0,0,0)}.monday-style-button--kind-tertiary{color:#323338;color:var(--primary-text-color);background-color:rgba(0,0,0,0)}.monday-style-button--kind-tertiary.monday-style-button--color-primary-active,.monday-style-button--kind-tertiary.monday-style-button--color-primary:focus,.monday-style-button--kind-tertiary.monday-style-button--color-primary:hover{background-color:#c5c7d0;background-color:var(--primary-background-hover-color)}.monday-style-button--kind-tertiary.monday-style-button--color-positive{color:#00ca72;color:var(--positive-color)}.monday-style-button--kind-tertiary.monday-style-button--color-positive-active,.monday-style-button--kind-tertiary.monday-style-button--color-positive:focus,.monday-style-button--kind-tertiary.monday-style-button--color-positive:hover{background-color:var(--positive-color-selected)}.monday-style-button--kind-tertiary.monday-style-button--color-negative{color:#e44258;color:var(--negative-color)}.monday-style-button--kind-tertiary.monday-style-button--color-negative-active,.monday-style-button--kind-tertiary.monday-style-button--color-negative:focus,.monday-style-button--kind-tertiary.monday-style-button--color-negative:hover{background-color:#b63546;background-color:var(--negative-color-selected)}.monday-style-button--kind-tertiary.monday-style-button--color-on-primary-color{color:#fff;color:var(--text-color-on-primary)}.monday-style-button--kind-tertiary.monday-style-button--color-on-primary-color-active,.monday-style-button--kind-tertiary.monday-style-button--color-on-primary-color:focus,.monday-style-button--kind-tertiary.monday-style-button--color-on-primary-color:hover{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.monday-style-button--kind-tertiary:disabled{color:#676879;color:var(--disabled-text-color);cursor:not-allowed;pointer-events:none}.monday-style-button--kind-tertiary:disabled:hover{background-color:rgba(0,0,0,0)}.monday-style-button--no-side-padding{padding-right:0;padding-left:0}.default-app-theme,.light-app-theme,:root{--theme-box-shadow:50,51,56}.dark-app-theme{--theme-box-shadow:245,246,248}.default-app-theme,.light-app-theme,:root{--primary-color:var(--color-basic_blue);--primary-on-secondary-color:var(--color-basic_blue);--primary-hover-color:var(--color-dark_blue);--primary-hover-on-secondary-color:var(--color-dark_blue);--primary-selected-color:var(--color-highlight_blue);--primary-selected-on-secondary-color:var(--color-highlight_blue);--primary-text-color:var(--color-mud_black);--primary-text-on-secondary-color:var(--color-mud_black);--text-color-on-primary:var(--color-snow_white);--primary-background-color:var(--color-snow_white);--primary-background-color-rgb:255,255,255;--primary-background-hover-color:var(--color-ui_grey);--primary-background-hover-on-secondary-color:var(--color-ui_grey);--inverted-color-background:var(--color-mud_black);--text-color-on-inverted:var(--color-snow_white);--positive-color:var(--color-success);--positive-color-hover:var(--color-success-hover);--positive-color-selected:var(--color-success-highlight);--negative-color:var(--color-error);--negative-color-hover:var(--color-error-hover);--negative-color-selected:var(--color-error-highlight);--private-color:var(--color-private);--shareable-color:var(--color-purple);--ui-border-color:var(--color-wolf_gray);--ui-border-on-secondary-color:var(--color-wolf_gray);--layout-border-color:var(--color-ui_grey);--layout-border-on-secondary-color:var(--color-ui_grey);--placeholder-color:var(--color-asphalt);--placeholder-on-secondary-color:var(--color-asphalt);--icon-color:var(--color-asphalt);--icon-on-secondary-color:var(--color-asphalt);--disabled-background-color:var(--color-ui_grey);--disabled-background-on-secondary-color:var(--color-ui_grey);--disabled-text-color:rgba(103,104,121,0.75);--disabled-text-on-secondary-color:rgba(103,104,121,0.75);--dark-background-color:var(--color-riverstone_gray);--dark-background-on-secondary-color:var(--color-riverstone_gray);--modal-background-color:var(--color-snow_white);--secondary-background-color:var(--color-snow_white);--dialog-background-color:var(--color-snow_white);--label-background-color:var(--color-highlight_blue);--label-background-on-secondary-color:var(--color-highlight_blue);--secondary-text-color:var(--color-asphalt);--secondary-text-on-secondary-color:var(--color-asphalt);--link-color:var(--color-link_color);--link-on-secondary-color:var(--color-link_color)}.dark-app-theme{--primary-color:#339dff;--primary-on-secondary-color:#43adff;--primary-hover-color:#578edb;--primary-hover-on-secondary-color:#72a0e1;--primary-selected-color:#4b4e69;--primary-selected-on-secondary-color:#4b4e69;--primary-text-color:var(--color-ui_grey);--primary-text-on-secondary-color:var(--color-ui_grey);--primary-background-color:#1c1f3b;--primary-background-color-rgb:28,31,59;--primary-background-hover-color:#4b4e69;--primary-background-hover-on-secondary-color:#4b4e69;--inverted-color-background:var(--color-riverstone_gray);--text-color-on-inverted:var(--color-mud_black);--ui-border-color:#797e93;--ui-border-on-secondary-color:#797e93;--layout-border-color:#4b4e69;--layout-border-on-secondary-color:#4b4e69;--placeholder-color:var(--color-jaco_gray);--placeholder-on-secondary-color:var(--color-jaco_gray);--icon-color:var(--color-wolf_gray);--icon-on-secondary-color:var(--color-wolf_gray);--disabled-background-color:#4b4e69;--disabled-background-on-secondary-color:#4b4e69;--disabled-text-color:rgba(197,199,208,0.75);--disabled-text-on-secondary-color:rgba(197,199,208,0.75);--dark-background-color:#393b53;--dark-background-on-secondary-color:#4b4e69;--modal-background-color:#1c1f3b;--secondary-background-color:#393b53;--dialog-background-color:#393b53;--label-background-color:#404b69;--label-background-on-secondary-color:#404b69;--secondary-text-color:var(--color-jaco_gray);--secondary-text-on-secondary-color:var(--color-jaco_gray);--link-color:#6191c9;--link-on-secondary-color:#7aa3d2}:root{--color-asphalt:#676879;--color-light_blue:#61caf7;--color-basic_blue:#0085ff;--color-basic_light_blue:#c7e6fa;--color-dark_blue:#0071d9;--color-link_color:#1f76c2;--color-snow_white:#fff;--color-success:#00ca72;--color-success-hover:#00a25b;--color-success-highlight:#ccf4e3;--color-purple:#a358df;--color-error:#e44258;--color-error-hover:#b63546;--color-error-highlight:#f9dade;--color-placholder_gray:#d8d8d8;--color-wolf_gray:#c5c7d0;--color-mud_black:#323338;--color-jaco_gray:#9699a6;--color-black:#000;--color-dark_purple:#893dc5;--color-blue_links:#0086c0;--color-bazooka:#f65f7c;--color-dark_marble:#f1f1f1;--color-marble:#f7f7f7;--color-gainsboro:#e1e1e1;--color-grass_green:#037f4c;--color-jeans:#597bfc;--color-egg_yolk:#ffcb00;--color-saladish:#cccc35;--color-lipstick:#f279f2;--color-working_orange:#fdab3d;--color-aqua:#00d1d1;--color-brown:#7f5347;--color-blackish:#333;--color-explosive:#c4c4c4;--color-american_gray:grey;--color-highlight_blue:#e5f4ff;--color-pulse_text_color:#333;--color-highlight:#dff0ff;--color-placeholder_light_gray:#efefef;--color-scrollbar_gray:#b2b2b2;--color-timeline_grid_blue:#454662;--color-timeline_blue:#1c1f3b;--color-default_group_color:#579bfc;--color-very_light_gray:#a1a1a1;--color-pulse_bg:#f0f0f0;--color-jade:#03c875;--color-deadline_upcoming_indication:#5d6387;--color-form_purple:#575c96;--color-form_btn_hover:#0083d9;--color-board_views_grey:#6e6f8f;--color-board_views_blue:#1c1f3b;--color-board_views_grey_hover:#b2b3d0;--color-board_views_blue_secondary:#363a52;--color-brand-blue:#00a9ff;--color-brand-charcoal:#2b2c5c;--color-brand-gold:#fc0;--color-brand-green:#11dd80;--color-brand-iris:#595ad4;--color-brand-light-blue:#00cff4;--color-brand-malachite:#00cd6f;--color-brand-purple:#a358d0;--color-brand-red:#f74875;--color-public:#009aff;--color-private:#f65f7c;--color-word-blue:#2a5699;--color-ppt-orange:#d64e2a;--color-excel-green:#207245;--color-pdf-red:#bb0706;--color-zip-orange:#e4901c;--color-media-blue:#2ea2e9;--color-surface:#292f4c;--color-burned_eggplant:#181d37;--color-live_blue:#009aff;--color-extra_light_gray:#edeef0;--color-glitter:#d9f0ff;--color-ultra_light_gray:#ebebeb;--color-red_shadow:#e2445c;--color-green_shadow:#00c875;--color-storm_gray:#6b6d77;--color-riverstone_gray:#f5f6f8;--color-ui_grey:#e6e9ef;--color-border_light_gray:#f5f6f8;--color-like_red:#fb275d;--color-lime-green:#9cd326;--color-mustered:#cab641;--color-dark_red:#bb3354;--color-dark-red:#bb3354;--color-trolley-grey:grey;--color-dark-purple:#784bd1;--color-dark-orange:#ff642e;--color-sofia_pink:#ff158a;--color-dark-pink:#ff158a;--color-turquoise:#6cf;--color-light-pink:#ff5ac4;--color-red-shadow:#e2445c;--color-orange:#fdab3d;--color-yellow:#ffcb00;--color-green-shadow:#00c875;--color-grass-green:#037f4c;--color-blue-links:#0086c0;--color-bright-blue:#579bfc;--color-amethyst:#a25ddc;--color-green-haze:#00a359;--color-sunset:#ff7575;--color-bubble:#faa1f1;--color-peach:#ffadad;--color-berry:#7e3b8a;--color-winter:#9aadbd;--color-river:#68a1bd;--color-navy:#225091;--color-aquamarine:#4eccc6;--color-indigo:#5559df;--color-dark_indigo:#401694;--box-shadow-small:0 4px 8px -1px rgba(0,0,0,0.2);--box-shadow-medium:0px 6px 20px -2px rgba(0,0,0,0.2);--box-shadow-large:0px 15px 50px -10px rgba(0,0,0,0.3);--border-radius-small:4px;--border-radius-medium:8px;--border-radius-big:16px;--expand-animation-timing:cubic-bezier(0,0,0.35,1);--spacing-xs:4px;--spacing-small:8px;--spacing-medium:16px;--spacing-large:24px;--spacing-xl:32px;--spacing-xxl:48px;--spacing-xxxl:64px}.icon_component{position:relative}.icon_component:before{text-decoration:none!important}.icon_component--no-focus-style:focus{outline:none}.icon_component--clickable{cursor:pointer}.monday-loader-component{position:relative;height:100%;width:100%}.monday-loader-component .circle-loader-spinner{-webkit-animation:rotate 1s linear infinite;animation:rotate 1s linear infinite;position:absolute;top:50%;left:50%;margin-top:-50%;margin-left:-50%}.monday-loader-component .circle-loader-spinner .circle-loader-spinner-path{stroke:currentColor;stroke-linecap:round;-webkit-animation:dash 1s infinite;animation:dash 1s infinite}@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}