mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 09:51:36 +00:00
fix(scss): inline Popover styles from carbon-components v10.47 (#1139)
This commit is contained in:
metonym
GitHub
parent
5de0d9a357
commit
cc7b30a620
8 changed files with 336 additions and 6 deletions
322
css/_popover.scss
Normal file
322
css/_popover.scss
Normal file
|
|
@ -0,0 +1,322 @@
|
|||
//
|
||||
// Copyright IBM Corp. 2016, 2018
|
||||
//
|
||||
// This source code is licensed under the Apache-2.0 license found in the
|
||||
// LICENSE file in the root directory of this source tree.
|
||||
//
|
||||
|
||||
@import 'carbon-components/scss/globals/scss/vars';
|
||||
@import 'carbon-components/scss/globals/scss/helper-mixins';
|
||||
@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
|
||||
|
||||
/// Popover component
|
||||
/// @access private
|
||||
/// @group components
|
||||
@mixin popover {
|
||||
$popover-text-color: $text-01;
|
||||
$popover-caret-offset: 1rem;
|
||||
$popover-offset: 8px;
|
||||
|
||||
.#{$prefix}--popover {
|
||||
// Specify the distance between the popover and the trigger. This value must
|
||||
// have a unit otherwise the `calc()` expression will not work
|
||||
// stylelint-disable-next-line length-zero-no-unit
|
||||
--cds-popover-offset: 0rem;
|
||||
|
||||
// Specify the distance that the caret should be offset from the side of the
|
||||
// popover when not centered
|
||||
--cds-popover-caret-offset: 1rem;
|
||||
|
||||
position: absolute;
|
||||
z-index: z('floating');
|
||||
display: none;
|
||||
}
|
||||
|
||||
// We use a pseudo element inside of the popover to create a space between the
|
||||
// target and the popover. This helps in situations like tooltips where you do
|
||||
// not want the tooltip to disappear when the user moves from the target to
|
||||
// the popover.
|
||||
.#{$prefix}--popover::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.#{$prefix}--popover--open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.#{$prefix}--popover-contents {
|
||||
@include box-shadow;
|
||||
|
||||
position: relative;
|
||||
width: max-content;
|
||||
max-width: rem(368px);
|
||||
background-color: $ui-01;
|
||||
border-radius: 2px;
|
||||
color: $popover-text-color;
|
||||
}
|
||||
|
||||
.#{$prefix}--popover--light .#{$prefix}--popover-contents {
|
||||
background-color: $ui-background;
|
||||
}
|
||||
|
||||
.#{$prefix}--popover--high-contrast .#{$prefix}--popover-contents {
|
||||
background-color: $inverse-02;
|
||||
color: $inverse-01;
|
||||
}
|
||||
|
||||
.#{$prefix}--popover--caret {
|
||||
--cds-popover-offset: 0.5rem;
|
||||
}
|
||||
|
||||
.#{$prefix}--popover--caret .#{$prefix}--popover-contents::before,
|
||||
.#{$prefix}--popover--caret .#{$prefix}--popover-contents::after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: rem(8px);
|
||||
height: rem(8px);
|
||||
background-color: inherit;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.#{$prefix}--popover--caret .#{$prefix}--popover-contents::before {
|
||||
z-index: -1;
|
||||
box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
// The popover's tooltip is created by drawing two 8px x 8px boxes, one for
|
||||
// rendering the box-shadow that the popover content uses and another for
|
||||
// layering on top of this box to create an effect of a popover caret with a
|
||||
// box-shadow. The layer with the box-shadow is rendered behind the popover
|
||||
// content, while the other is rendered above of the popover content.
|
||||
|
||||
//-----------------------------------------------------------------------------
|
||||
// Bottom
|
||||
//-----------------------------------------------------------------------------
|
||||
.#{$prefix}--popover--bottom {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, calc(100% + var(--cds-popover-offset)));
|
||||
}
|
||||
|
||||
@include place-caret(bottom) {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
// Bottom left
|
||||
.#{$prefix}--popover--bottom-left {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translateY(calc(100% + var(--cds-popover-offset)));
|
||||
}
|
||||
|
||||
@include place-caret(bottom-left) {
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(var(--cds-popover-caret-offset), -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
// Bottom right
|
||||
.#{$prefix}--popover--bottom-right {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: translateY(calc(100% + var(--cds-popover-offset)));
|
||||
}
|
||||
|
||||
@include place-caret(bottom-right) {
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(calc(-1 * var(--cds-popover-caret-offset)), -50%)
|
||||
rotate(45deg);
|
||||
}
|
||||
|
||||
// Hover area
|
||||
.#{$prefix}--popover--bottom.#{$prefix}--popover::before,
|
||||
.#{$prefix}--popover--bottom-left.#{$prefix}--popover::before,
|
||||
.#{$prefix}--popover--bottom-right.#{$prefix}--popover::before {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: var(--cds-popover-offset);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------
|
||||
// TOP
|
||||
//-----------------------------------------------------------------------------
|
||||
.#{$prefix}--popover--top {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, calc(-1 * var(--cds-popover-offset)));
|
||||
}
|
||||
|
||||
@include place-caret(top) {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 50%) rotate(45deg);
|
||||
}
|
||||
|
||||
// Top left
|
||||
.#{$prefix}--popover--top-left {
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
transform: translateY(calc(-1 * var(--cds-popover-offset)));
|
||||
}
|
||||
|
||||
@include place-caret(top-left) {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translate(var(--cds-popover-caret-offset), 50%) rotate(45deg);
|
||||
}
|
||||
|
||||
// Top right
|
||||
.#{$prefix}--popover--top-right {
|
||||
right: 0;
|
||||
bottom: 100%;
|
||||
transform: translateY(calc(-1 * var(--cds-popover-offset)));
|
||||
}
|
||||
|
||||
@include place-caret(top-right) {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: translate(calc(-1 * var(--cds-popover-caret-offset)), 50%)
|
||||
rotate(45deg);
|
||||
}
|
||||
|
||||
// Hover area
|
||||
.#{$prefix}--popover--top.#{$prefix}--popover::before,
|
||||
.#{$prefix}--popover--top-left.#{$prefix}--popover::before,
|
||||
.#{$prefix}--popover--top-right.#{$prefix}--popover::before {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: var(--cds-popover-offset);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------
|
||||
// Right
|
||||
//-----------------------------------------------------------------------------
|
||||
.#{$prefix}--popover--right {
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
transform: translate(var(--cds-popover-offset), -50%);
|
||||
}
|
||||
|
||||
@include place-caret(right) {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
// Right top
|
||||
.#{$prefix}--popover--right-top {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
transform: translateX($popover-offset);
|
||||
}
|
||||
|
||||
@include place-caret(right-top) {
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(-50%, var(--cds-popover-caret-offset)) rotate(45deg);
|
||||
}
|
||||
|
||||
// Right bottom
|
||||
.#{$prefix}--popover--right-bottom {
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
transform: translateX(var(--cds-popover-offset));
|
||||
}
|
||||
|
||||
@include place-caret(right-bottom) {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translate(-50%, calc(-1 * var(--cds-popover-caret-offset)))
|
||||
rotate(45deg);
|
||||
}
|
||||
|
||||
// Hover area
|
||||
.#{$prefix}--popover--right.#{$prefix}--popover::before,
|
||||
.#{$prefix}--popover--right-top.#{$prefix}--popover::before,
|
||||
.#{$prefix}--popover--right-bottom.#{$prefix}--popover::before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: var(--cds-popover-offset);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------
|
||||
// Left
|
||||
//-----------------------------------------------------------------------------
|
||||
.#{$prefix}--popover--left {
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
transform: translate(calc(-1 * var(--cds-popover-offset)), -50%);
|
||||
}
|
||||
|
||||
@include place-caret(left) {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translate(50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
// Left top
|
||||
.#{$prefix}--popover--left-top {
|
||||
top: 0;
|
||||
right: 100%;
|
||||
transform: translateX(calc(-1 * var(--cds-popover-offset)));
|
||||
}
|
||||
|
||||
@include place-caret(left-top) {
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(50%, var(--cds-popover-caret-offset)) rotate(45deg);
|
||||
}
|
||||
|
||||
// Left bottom
|
||||
.#{$prefix}--popover--left-bottom {
|
||||
right: 100%;
|
||||
bottom: 0;
|
||||
transform: translateX(calc(-1 * var(--cds-popover-offset)));
|
||||
}
|
||||
|
||||
@include place-caret(left-bottom) {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: translate(50%, calc(-1 * var(--cds-popover-caret-offset)))
|
||||
rotate(45deg);
|
||||
}
|
||||
|
||||
// Hover area
|
||||
.#{$prefix}--popover--left.#{$prefix}--popover::before,
|
||||
.#{$prefix}--popover--left-top.#{$prefix}--popover::before,
|
||||
.#{$prefix}--popover--left-bottom.#{$prefix}--popover::before {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: var(--cds-popover-offset);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/// Helper for placing the caret inside a popover. The selectors here can get
|
||||
/// distracting in the main stylesheet, but ultimately they target the ::before
|
||||
/// and ::after pseudo-elements for the given direction. The @content block
|
||||
/// passed in should appropriately position the caret for the given direction.
|
||||
@mixin place-caret($direction) {
|
||||
.#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
|
||||
.#{$prefix}--popover-contents::before,
|
||||
.#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
|
||||
.#{$prefix}--popover-contents::after {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@include exports('popover') {
|
||||
@include popover;
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@ $css--plex: true;
|
|||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "carbon-components-10.47/src/components/popover/popover";
|
||||
@import "./popover";
|
||||
|
||||
// The default theme is "white" (White)
|
||||
:root {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ $css--plex: true;
|
|||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "carbon-components-10.47/src/components/popover/popover";
|
||||
@import "./popover";
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ $css--plex: true;
|
|||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "carbon-components-10.47/src/components/popover/popover";
|
||||
@import "./popover";
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ $css--plex: true;
|
|||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "carbon-components-10.47/src/components/popover/popover";
|
||||
@import "./popover";
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ $css--plex: true;
|
|||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "carbon-components-10.47/src/components/popover/popover";
|
||||
@import "./popover";
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ $css--plex: true;
|
|||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "carbon-components-10.47/src/components/popover/popover";
|
||||
@import "./popover";
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
|
|
|
|||
|
|
@ -5,6 +5,14 @@ const postcss = require("postcss");
|
|||
const path = require("path");
|
||||
|
||||
(async () => {
|
||||
const popover = fs.readFileSync(
|
||||
"node_modules/carbon-components-10.47/src/components/popover/_popover.scss",
|
||||
"utf-8"
|
||||
);
|
||||
const popover_mod = popover.replace(/..\/..\//g, "carbon-components/scss/");
|
||||
|
||||
fs.writeFileSync("css/_popover.scss", popover_mod);
|
||||
|
||||
const scss = fs
|
||||
.readdirSync("css")
|
||||
.filter((file) => file.endsWith(".scss"))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue