@mantine/core/cjs/components/Tabs/Tabs.module.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Tabs.module.cjs","names":[],"sources":["../../../src/components/Tabs/Tabs.module.css"],"sourcesContent":[".root {\n  @mixin light {\n    --tab-border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin dark {\n    --tab-border-color: var(--mantine-color-dark-4);\n  }\n\n  display: var(--tabs-display);\n  flex-direction: var(--tabs-flex-direction);\n\n  --tabs-list-direction: row;\n  --tabs-panel-grow: unset;\n  --tabs-display: block;\n  --tabs-flex-direction: row;\n  --tabs-list-border-width: 0;\n  --tabs-list-border-size: 0 0 var(--tabs-list-border-width) 0;\n  --tabs-list-gap: unset;\n\n  --tabs-list-line-bottom: 0;\n  --tabs-list-line-top: unset;\n  --tabs-list-line-start: 0;\n  --tabs-list-line-end: 0;\n\n  --tab-radius: var(--tabs-radius) var(--tabs-radius) 0 0;\n  --tab-border-width: 0 0 var(--tabs-list-border-width) 0;\n\n  &[data-inverted] {\n    --tabs-list-line-bottom: unset;\n    --tabs-list-line-top: 0;\n    --tab-radius: 0 0 var(--tabs-radius) var(--tabs-radius);\n    --tab-border-width: var(--tabs-list-border-width) 0 0 0;\n\n    & .list--default::before {\n      top: 0;\n      bottom: unset;\n    }\n  }\n\n  &[data-orientation='vertical'] {\n    --tabs-list-line-start: unset;\n    --tabs-list-line-end: 0;\n    --tabs-list-line-top: 0;\n    --tabs-list-line-bottom: 0;\n    --tabs-list-border-size: 0 var(--tabs-list-border-width) 0 0;\n    --tab-border-width: 0 var(--tabs-list-border-width) 0 0;\n    --tab-radius: var(--tabs-radius) 0 0 var(--tabs-radius);\n    --tabs-list-direction: column;\n    --tabs-panel-grow: 1;\n    --tabs-display: flex;\n\n    @mixin rtl {\n      --tabs-list-border-size: 0 0 0 var(--tabs-list-border-width);\n      --tab-border-width: 0 0 0 var(--tabs-list-border-width);\n      --tab-radius: 0 var(--tabs-radius) var(--tabs-radius) 0;\n    }\n\n    &[data-placement='right'] {\n      --tabs-flex-direction: row-reverse;\n      --tabs-list-line-start: 0;\n      --tabs-list-line-end: unset;\n      --tabs-list-border-size: 0 0 0 var(--tabs-list-border-width);\n      --tab-border-width: 0 0 0 var(--tabs-list-border-width);\n      --tab-radius: 0 var(--tabs-radius) var(--tabs-radius) 0;\n\n      @mixin rtl {\n        --tabs-list-border-size: 0 var(--tabs-list-border-width) 0 0;\n        --tab-border-width: 0 var(--tabs-list-border-width) 0 0;\n        --tab-radius: var(--tabs-radius) 0 0 var(--tabs-radius);\n      }\n    }\n  }\n\n  &[data-variant='default'] {\n    --tabs-list-border-width: 2px;\n\n    @mixin light {\n      --tab-hover-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin dark {\n      --tab-hover-color: var(--mantine-color-dark-6);\n    }\n  }\n\n  &[data-variant='outline'] {\n    --tabs-list-border-width: 1px;\n  }\n\n  &[data-variant='pills'] {\n    --tabs-list-gap: calc(var(--mantine-spacing-sm) / 2);\n\n    @mixin light {\n      --tab-hover-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin dark {\n      --tab-hover-color: var(--mantine-color-dark-6);\n    }\n  }\n}\n\n.list {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: var(--tabs-justify, flex-start);\n  flex-direction: var(--tabs-list-direction);\n  gap: var(--tabs-list-gap);\n\n  &:where([data-grow]) .tab {\n    flex: 1;\n  }\n}\n\n.panel {\n  flex-grow: var(--tabs-panel-grow);\n}\n\n.tab {\n  position: relative;\n  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);\n  font-size: var(--mantine-font-size-sm);\n  white-space: nowrap;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  line-height: 1;\n  user-select: none;\n\n  &:where(:disabled, [data-disabled]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    z-index: 1;\n  }\n}\n\n.tabSection {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:where([data-position='left']:not(:only-child)) {\n    margin-inline-end: var(--mantine-spacing-xs);\n  }\n\n  &:where([data-position='right']:not(:only-child)) {\n    margin-inline-start: var(--mantine-spacing-xs);\n  }\n}\n\n.tabLabel {\n  flex: 1;\n  text-align: center;\n}\n\n/*************************************** default variant ***************************************/\n.list--default {\n  position: relative;\n\n  &::before {\n    content: '';\n    position: absolute;\n    border: 1px solid var(--tab-border-color);\n    bottom: var(--tabs-list-line-bottom);\n    inset-inline-start: var(--tabs-list-line-start);\n    inset-inline-end: var(--tabs-list-line-end);\n    top: var(--tabs-list-line-top);\n  }\n}\n\n.tab--default {\n  border-radius: var(--tab-radius);\n  border-width: var(--tab-border-width);\n  border-style: solid;\n  border-color: transparent;\n  background-color: transparent;\n\n  &:where([data-active]) {\n    border-color: var(--tabs-color);\n  }\n\n  @mixin hover {\n    background-color: var(--tab-hover-color);\n\n    &:where(:not([data-active])) {\n      border-color: var(--tab-border-color);\n    }\n  }\n\n  &:disabled,\n  &[data-disabled] {\n    @mixin hover {\n      background-color: transparent;\n    }\n  }\n}\n\n/*************************************** outline variant ***************************************/\n.list--outline {\n  position: relative;\n\n  &::before {\n    content: '';\n    position: absolute;\n    border-color: var(--tab-border-color);\n    border-width: var(--tabs-list-border-size);\n    border-style: solid;\n    bottom: var(--tabs-list-line-bottom);\n    inset-inline-start: var(--tabs-list-line-start);\n    inset-inline-end: var(--tabs-list-line-end);\n    top: var(--tabs-list-line-top);\n  }\n}\n\n.tab--outline {\n  border-top: 1px solid transparent;\n  border-bottom: 1px solid transparent;\n  border-right: 1px solid transparent;\n  border-left: 1px solid transparent;\n  border-top-color: var(--tab-border-top-color);\n  border-bottom-color: var(--tab-border-bottom-color);\n  border-radius: var(--tab-radius);\n  position: relative;\n\n  --tab-border-bottom-color: transparent;\n  --tab-border-top-color: transparent;\n  --tab-border-inline-end-color: transparent;\n  --tab-border-inline-start-color: transparent;\n\n  &:where([data-active]) {\n    &::before {\n      content: '';\n      position: absolute;\n      background-color: var(--tab-border-color);\n      bottom: var(--tab-before-bottom, rem(-1px));\n      left: var(--tab-before-left, rem(-1px));\n      right: var(--tab-before-right, auto);\n      top: var(--tab-before-top, auto);\n      width: 1px;\n      height: 1px;\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      background-color: var(--tab-border-color);\n      bottom: var(--tab-after-bottom, rem(-1px));\n      right: var(--tab-after-right, rem(-1px));\n      left: var(--tab-after-left, auto);\n      top: var(--tab-after-top, auto);\n      width: 1px;\n      height: 1px;\n    }\n\n    border-top-color: var(--tab-border-top-color);\n    border-bottom-color: var(--tab-border-bottom-color);\n    border-inline-start-color: var(--tab-border-inline-start-color);\n    border-inline-end-color: var(--tab-border-inline-end-color);\n\n    --tab-border-top-color: var(--tab-border-color);\n    --tab-border-inline-start-color: var(--tab-border-color);\n    --tab-border-inline-end-color: var(--tab-border-color);\n    --tab-border-bottom-color: var(--mantine-color-body);\n\n    &[data-inverted] {\n      --tab-border-bottom-color: var(--tab-border-color);\n      --tab-border-top-color: var(--mantine-color-body);\n\n      --tab-before-bottom: auto;\n      --tab-before-top: -1px;\n      --tab-after-bottom: auto;\n      --tab-after-top: -1px;\n    }\n\n    &[data-orientation='vertical'] {\n      &[data-placement='left'] {\n        --tab-border-inline-end-color: var(--mantine-color-body);\n        --tab-border-inline-start-color: var(--tab-border-color);\n        --tab-border-bottom-color: var(--tab-border-color);\n\n        --tab-before-right: -1px;\n        --tab-before-left: auto;\n        --tab-before-bottom: auto;\n        --tab-before-top: -1px;\n        --tab-after-left: auto;\n        --tab-after-right: -1px;\n\n        @mixin rtl {\n          --tab-before-right: auto;\n          --tab-before-left: -1px;\n          --tab-after-left: -1px;\n          --tab-after-right: auto;\n        }\n      }\n\n      &[data-placement='right'] {\n        --tab-border-inline-start-color: var(--mantine-color-body);\n        --tab-border-inline-end-color: var(--tab-border-color);\n        --tab-border-bottom-color: var(--tab-border-color);\n\n        --tab-before-left: -1px;\n        --tab-before-right: auto;\n        --tab-before-bottom: auto;\n        --tab-before-top: -1px;\n        --tab-after-right: auto;\n        --tab-after-left: -1px;\n\n        @mixin rtl {\n          --tab-before-left: auto;\n          --tab-before-right: -1px;\n          --tab-after-right: -1px;\n          --tab-after-left: auto;\n        }\n      }\n    }\n  }\n}\n\n/*************************************** pills variant ***************************************/\n.tab--pills {\n  border-radius: var(--tabs-radius);\n  background-color: var(--tab-bg);\n  color: var(--tab-color);\n\n  --tab-bg: transparent;\n  --tab-color: inherit;\n\n  &:not([data-disabled]) {\n    @mixin hover {\n      --tab-bg: var(--tab-hover-color);\n    }\n  }\n\n  &[data-active][data-active] {\n    --tab-bg: var(--tabs-color);\n    --tab-color: var(--tabs-text-color, var(--mantine-color-white));\n\n    @mixin hover {\n      --tab-bg: var(--tabs-color);\n    }\n  }\n}\n"],"mappings":""}