UNPKG

@govbr-ds/core

Version:

Padrão Digital de Governo

1 lines 3.23 kB
{"version":3,"file":"components/notification/notification.css","mappings":"AAKA;ECGE;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;ADTF;ACWE;EDhBF;ICiBI;IACA;IACA;IACA;IACA;IACA;IACA;EDRF;ECUE;IACE;EDRJ;ECUI;IACE;IACA;IACA;EDRN;ECYE;IACE;IACA;EDVJ;ECaE;IACE;EDXJ;AACF;ACcE;EACE;IACE;EDZJ;AACF;ACeE;EACE;IACE;EDbJ;AACF;ACkBE;EACE;EACA;ADhBJ;ACkBI;EACE;ADhBN;ACwBM;EACE;ADtBR;ACyBM;EACE;ADvBR;ACwBQ;EACE;EACA;EACA;EACA;EACA;ADtBV;ACwBU;EACE;EACA;EACA;ADtBZ;ACyBU;EACE;ADvBZ,C","sources":["webpack://core/./src/components/notification/_notification.scss","webpack://core/./src/components/notification/_mixins.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.#{$prefix}notification {\n @include notification-configs;\n}\n","@mixin notification-configs {\n @include notification-tokens;\n @include notification-default;\n @include notification-header;\n @include notification-body;\n}\n\n@mixin notification-tokens {\n --notification-padding: var(--spacing-scale-2x) var(--spacing-scale-4x);\n --notification-width: 50vw;\n --notification-height: calc(100vh - 86px);\n}\n\n@mixin notification-default {\n background: var(--background);\n box-shadow: var(--surface-shadow-md);\n max-height: var(--notification-height);\n max-width: var(--notification-width);\n overflow: auto;\n z-index: 1;\n\n @media (max-width: $grid-breakpoint-sm) {\n --item-padding-x: var(--spacing-scale-2x);\n --item-padding-y: var(--spacing-scale-base);\n --item-padding: var(--item-padding-y) var(--item-padding-x);\n --notification-padding: var(--item-padding);\n --notification-width: 100vw;\n min-height: var(--notification-height);\n overflow: hidden;\n\n .#{$prefix}tab {\n --tab-size: var(--tab-small);\n\n .tab-content {\n --notification-height: calc(100vh - 86px);\n height: var(--notification-height);\n overflow-x: auto;\n }\n }\n\n .status {\n left: var(--spacing-scale-half) !important;\n top: var(--spacing-scale-2x) !important;\n }\n\n &.close {\n display: none;\n }\n }\n\n @media (max-width: $grid-breakpoint-md) {\n &.close {\n display: none;\n }\n }\n\n @media (min-width: $grid-breakpoint-md) {\n div.close {\n display: none;\n }\n }\n}\n\n@mixin notification-header {\n .notification-header {\n border-bottom: 1px solid var(--border-color);\n padding: var(--notification-padding);\n\n *:last-child {\n margin-bottom: 0;\n }\n }\n}\n\n@mixin notification-body {\n .notification-body {\n .#{$prefix}tab {\n .tab-item {\n padding: 0;\n }\n\n .tab-content {\n overflow-y: auto;\n .#{$prefix}item {\n --interactive-rgb: var(--rgb-secondary-08);\n --item-color: var(--text-color);\n padding: var(--notification-padding);\n position: relative;\n white-space: normal;\n\n .status {\n left: var(--spacing-scale-base);\n position: absolute;\n top: var(--spacing-scale-3x);\n }\n\n span {\n display: block;\n }\n }\n }\n }\n }\n}\n"],"names":[],"sourceRoot":""}