@govbr-ds/core/dist/components/message/message.css.map

Padrão Digital de Governo

{"version":3,"file":"components/message/message.css","mappings":"AAKA;ECQE;EACA;EACA;EACA;EAIA;EACA;EACA;ADdF;ACgBE;EACE;EACA;EACA;EACA;ADdJ;ACgBI;EACE;ADdN;ACiBI;EACE;ADfN;ACkBI;EACE;EACA;ADhBN;ACoBM;EACE;ADlBR;ACuBE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;ADrBJ;ACuBI;EACE;ADrBN;ACyBE;EACE;EACA;ADvBJ;ACsDI;EAGE;EACA;EACA;ADtDN;ACyDQ;EACE;EACA;ADvDV;AC6CI;EAGE;EACA;EACA;AD7CN;ACgDQ;EACE;EACA;AD9CV;ACoCI;EAGE;EACA;EACA;ADpCN;ACuCQ;EACE;EACA;ADrCV;AC2CE;EAGE;EACA;AD3CJ;AC8CM;EACE;EACA;AD5CR;;AArEA;ECIE;EACA;EACA;EACA;EAuDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADeF;AEtFE;;;;;;;ED0EE;ADqBJ;AClBE;EACE;ADoBJ;ACjBE;EE1CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AH8DF;ACpBI;EAGE;EACA;EACA;ADoBN;ACjBQ;EACE;EACA;ADmBV;AC7BI;EAGE;EACA;EACA;AD6BN;AC1BQ;EACE;EACA;AD4BV;ACtCI;EAGE;EACA;EACA;ADsCN;ACnCQ;EACE;EACA;ADqCV;AC/BE;EAGE;EACA;AD+BJ;AC5BM;EACE;EACA;AD8BR,C","sources":["webpack://core/./src/components/message/_message.scss","webpack://core/./src/components/message/_mixins.scss","webpack://core/./src/partial/scss/mixins/_icons.scss","webpack://core/./src/partial/scss/mixins/_states.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.#{$prefix}message {\n  @include message-configs;\n}\n\n.feedback {\n  @include feedback-configs;\n}\n","@mixin message-configs {\n  @include message-tokens;\n  @include message-default;\n  @include message-colors;\n}\n\n@mixin feedback-configs {\n  @include message-tokens;\n  @include feedback-default;\n  @include message-colors;\n}\n\n@mixin message-tokens {\n  --message-background: var(--background);\n  --message-color-icon: var(--color);\n  --feedback-background: var(--background);\n  --message-text: var(--color);\n}\n\n@mixin message-default {\n  background: var(--message-background);\n  display: flex;\n  margin-bottom: var(--spacing-scale-2x);\n\n  .content {\n    color: var(--message-text);\n    flex: 1;\n    font-size: var(--font-size-scale-up-01);\n    padding: var(--spacing-scale-3x) var(--spacing-scale-base) var(--spacing-scale-3x) var(--spacing-scale-2x);\n\n    .message-title {\n      font-weight: var(--font-weight-semi-bold);\n    }\n\n    .message-body {\n      font-weight: var(--font-weigth-regular);\n    }\n\n    a {\n      font-weight: var(--font-weight-bold);\n      text-decoration: underline;\n    }\n\n    * {\n      &:last-child {\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  .icon {\n    align-items: center;\n    color: var(--message-color-icon);\n    display: flex;\n    justify-content: center;\n    margin: var(--spacing-vertical-center) var(--spacing-scale-2x);\n    padding-left: var(--spacing-scale-2x);\n    padding-right: var(--spacing-scale-2x);\n\n    + .content {\n      padding-left: 0;\n    }\n  }\n\n  .close {\n    margin-right: var(--spacing-scale-base);\n    margin-top: var(--spacing-scale-base);\n  }\n}\n\n@mixin feedback-default {\n  align-items: center;\n  background: var(--feedback-background);\n  color: var(--message-text);\n  display: inline-flex;\n  font-style: italic;\n  font-weight: var(--font-weight-medium);\n  margin-bottom: 0;\n  padding: var(--spacing-scale-half);\n\n  @include icon {\n    margin-right: var(--spacing-scale-half);\n  }\n\n  &:not(.is-warning):not(.warning):not([warning]) {\n    --message-text: var(--pure-0);\n  }\n\n  &.is-warning,\n  &.warning,\n  &[warning] {\n    @include light-mode;\n  }\n}\n\n@mixin message-colors {\n  @each $color in success, danger, info {\n    &.is-#{$color},\n    &.#{$color},\n    &[#{$color}] {\n      --message-background: var(--#{$color}-alternative);\n      --feedback-background: var(--#{$color});\n      --message-color-icon: var(--#{$color});\n\n      .close {\n        .#{$prefix}button {\n          --interactive: var(--message-color-icon);\n          --interactive-rgb: var(--#{$color}-rgb);\n        }\n      }\n    }\n  }\n\n  &.is-warning,\n  &.warning,\n  &[warning] {\n    --message-background: var(--warning-alternative);\n    --feedback-background: var(--warning);\n\n    .close {\n      .#{$prefix}button {\n        --interactive: var(--color);\n        --interactive-rgb: var(--color-rgb);\n      }\n    }\n  }\n}\n","@mixin icon-size($value) {\n  @include icon {\n    --icon-size: #{$value};\n  }\n}\n\n@mixin icon {\n  .svg-inline--fa,\n  .fa,\n  .fab,\n  .fad,\n  .fal,\n  .far,\n  .fas {\n    @content;\n  }\n}\n","// Desabilitado\n@mixin disabled {\n  cursor: not-allowed;\n  opacity: var(--disabled);\n\n  * {\n    pointer-events: none;\n  }\n}\n\n// Dark mode\n@mixin dark-mode(\n  $color: \"color-dark\",\n  $color-rgb: \"color-dark-rgb\",\n  $text-color: $color,\n  $interactive: \"interactive-dark\",\n  $interactive-rgb: \"interactive-dark-rgb\",\n  $visited: \"visited-dark\",\n  $hover: \"hover-dark\",\n  $pressed: \"pressed-dark\",\n  $focus-color: \"focus-color-dark\",\n  $focus: $focus-color\n) {\n  --color: var(--#{$color});\n  --color-rgb: var(--#{$color-rgb});\n  --text-color: var(--#{$text-color});\n  --interactive: var(--#{$interactive});\n  --interactive-rgb: var(--#{$interactive-rgb});\n  --visited: var(--#{$visited});\n  --hover: var(--#{$hover});\n  --pressed: var(--#{$pressed});\n  --focus-color: var(--#{$focus-color});\n  --focus: var(--#{$focus});\n}\n@mixin light-mode(\n  $color: \"color-light\",\n  $color-rgb: \"color-light-rgb\",\n  $text-color: $color,\n  $interactive: \"interactive-light\",\n  $interactive-rgb: \"interactive-light-rgb\",\n  $visited: \"visited-light\",\n  $hover: \"hover-light\",\n  $pressed: \"pressed-light\",\n  $focus-color: \"focus-color-light\",\n  $focus: $focus-color\n) {\n  --color: var(--#{$color});\n  --color-rgb: var(--#{$color-rgb});\n  --text-color: var(--#{$text-color});\n  --interactive: var(--#{$interactive});\n  --interactive-rgb: var(--#{$interactive-rgb});\n  --visited: var(--#{$visited});\n  --hover: var(--#{$hover});\n  --pressed: var(--#{$pressed});\n  --focus-color: var(--#{$focus-color});\n  --focus: var(--#{$focus});\n}\n"],"names":[],"sourceRoot":""}