mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 02:41:05 +00:00
chore: remove legacy v10 css files
Note that further work is needed here in order to make theming work again. Also documentation needs updating.
This commit is contained in:
Gregor Wassmann
Enrico Sacchetti
parent
ee32859ba2
commit
e1bd0aaa99
13 changed files with 0 additions and 579 deletions
|
|
@ -1,325 +0,0 @@
|
|||
// This file is inlined from `carbon-components@10.47` as
|
||||
// Popover styles were removed since version 10.48.
|
||||
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
81
css/all.scss
81
css/all.scss
|
|
@ -1,81 +0,0 @@
|
|||
// This is a recipe for dynamic, client-side theming
|
||||
// All Carbon themes are included (White, Gray 10, Gray 90, Gray 100)
|
||||
|
||||
$feature-flags: (
|
||||
// Custom CSS properties must be enabled to dynamically switch themes
|
||||
enable-css-custom-properties: true,
|
||||
ui-shell: true,
|
||||
grid-columns-16: true
|
||||
);
|
||||
|
||||
$css--font-face: true;
|
||||
$css--helpers: true;
|
||||
$css--body: true;
|
||||
$css--use-layer: true;
|
||||
$css--reset: true;
|
||||
$css--default-type: true;
|
||||
$css--plex: true;
|
||||
|
||||
// Use all Carbon themes
|
||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "./popover";
|
||||
|
||||
// The default theme is "white" (White)
|
||||
:root {
|
||||
@include carbon--theme($carbon--theme--white, true) {
|
||||
@include emit-component-tokens($tag-colors);
|
||||
@include emit-component-tokens($notification-colors);
|
||||
}
|
||||
}
|
||||
|
||||
// Set the <html> theme attribute to "g10" to use the Gray 10 theme
|
||||
// <html theme="g10">
|
||||
:root[theme="g10"] {
|
||||
@include carbon--theme($carbon--theme--g10, true) {
|
||||
@include emit-component-tokens($tag-colors);
|
||||
@include emit-component-tokens($notification-colors);
|
||||
}
|
||||
}
|
||||
|
||||
// Set the <html> theme attribute to "g80" to use the Gray 80 theme
|
||||
// <html theme="g80">
|
||||
:root[theme="g80"] {
|
||||
@include carbon--theme($carbon--theme--g80, true) {
|
||||
@include emit-component-tokens($tag-colors);
|
||||
@include emit-component-tokens($notification-colors);
|
||||
}
|
||||
}
|
||||
|
||||
// Set the <html> theme attribute to "g90" to use the Gray 90 theme
|
||||
// <html theme="g90">
|
||||
:root[theme="g90"] {
|
||||
@include carbon--theme($carbon--theme--g90, true) {
|
||||
@include emit-component-tokens($tag-colors);
|
||||
@include emit-component-tokens($notification-colors);
|
||||
}
|
||||
}
|
||||
|
||||
// Set the <html> theme attribute to "g100" to use the Gray 100 theme
|
||||
// <html theme="g100">
|
||||
:root[theme="g100"] {
|
||||
@include carbon--theme($carbon--theme--g100, true) {
|
||||
@include emit-component-tokens($tag-colors);
|
||||
@include emit-component-tokens($notification-colors);
|
||||
}
|
||||
}
|
||||
|
||||
// Programmatically update the theme in JavaScript:
|
||||
// document.documentElement.setAttribute("theme", "g90");
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
@import "carbon-components/scss/globals/scss/_css--helpers";
|
||||
@import "carbon-components/scss/globals/scss/_css--body";
|
||||
@import "carbon-components/scss/globals/grid/grid";
|
||||
|
||||
// Import all component styles
|
||||
@import "carbon-components/scss/globals/scss/styles";
|
||||
File diff suppressed because one or more lines are too long
34
css/g10.scss
34
css/g10.scss
|
|
@ -1,34 +0,0 @@
|
|||
// Use the "g10" (Gray 10) Carbon theme
|
||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||
|
||||
$carbon--theme: $carbon--theme--g10;
|
||||
@include carbon--theme();
|
||||
|
||||
$feature-flags: (
|
||||
ui-shell: true,
|
||||
grid-columns-16: true
|
||||
);
|
||||
|
||||
$css--font-face: true;
|
||||
$css--helpers: true;
|
||||
$css--body: true;
|
||||
$css--use-layer: true;
|
||||
$css--reset: true;
|
||||
$css--default-type: true;
|
||||
$css--plex: true;
|
||||
|
||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "./popover";
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
@import "carbon-components/scss/globals/scss/_css--helpers";
|
||||
@import "carbon-components/scss/globals/scss/_css--body";
|
||||
@import "carbon-components/scss/globals/grid/grid";
|
||||
|
||||
// Import all component styles
|
||||
@import "carbon-components/scss/globals/scss/styles";
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,33 +0,0 @@
|
|||
// Use the "g100" (Gray 100) Carbon theme
|
||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||
|
||||
$carbon--theme: $carbon--theme--g100;
|
||||
@include carbon--theme();
|
||||
|
||||
$feature-flags: (
|
||||
ui-shell: true,
|
||||
grid-columns-16: true
|
||||
);
|
||||
|
||||
$css--font-face: true;
|
||||
$css--helpers: true;
|
||||
$css--body: true;
|
||||
$css--use-layer: true;
|
||||
$css--reset: true;
|
||||
$css--default-type: true;
|
||||
$css--plex: true;
|
||||
|
||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "./popover";
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
@import "carbon-components/scss/globals/scss/_css--helpers";
|
||||
@import "carbon-components/scss/globals/scss/_css--body";
|
||||
@import "carbon-components/scss/globals/grid/grid";
|
||||
|
||||
// Import all component styles
|
||||
@import "carbon-components/scss/globals/scss/styles";
|
||||
File diff suppressed because one or more lines are too long
34
css/g80.scss
34
css/g80.scss
|
|
@ -1,34 +0,0 @@
|
|||
// Use the "g80" (Gray 80) Carbon theme
|
||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||
|
||||
$carbon--theme: $carbon--theme--g80;
|
||||
@include carbon--theme();
|
||||
|
||||
$feature-flags: (
|
||||
ui-shell: true,
|
||||
grid-columns-16: true
|
||||
);
|
||||
|
||||
$css--font-face: true;
|
||||
$css--helpers: true;
|
||||
$css--body: true;
|
||||
$css--use-layer: true;
|
||||
$css--reset: true;
|
||||
$css--default-type: true;
|
||||
$css--plex: true;
|
||||
|
||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "./popover";
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
@import "carbon-components/scss/globals/scss/_css--helpers";
|
||||
@import "carbon-components/scss/globals/scss/_css--body";
|
||||
@import "carbon-components/scss/globals/grid/grid";
|
||||
|
||||
// Import all component styles
|
||||
@import "carbon-components/scss/globals/scss/styles";
|
||||
|
||||
File diff suppressed because one or more lines are too long
33
css/g90.scss
33
css/g90.scss
|
|
@ -1,33 +0,0 @@
|
|||
// Use the "g90" (Gray 90) Carbon theme
|
||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||
|
||||
$carbon--theme: $carbon--theme--g90;
|
||||
@include carbon--theme();
|
||||
|
||||
$feature-flags: (
|
||||
ui-shell: true,
|
||||
grid-columns-16: true
|
||||
);
|
||||
|
||||
$css--font-face: true;
|
||||
$css--helpers: true;
|
||||
$css--body: true;
|
||||
$css--use-layer: true;
|
||||
$css--reset: true;
|
||||
$css--default-type: true;
|
||||
$css--plex: true;
|
||||
|
||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "./popover";
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
@import "carbon-components/scss/globals/scss/_css--helpers";
|
||||
@import "carbon-components/scss/globals/scss/_css--body";
|
||||
@import "carbon-components/scss/globals/grid/grid";
|
||||
|
||||
// Import all component styles
|
||||
@import "carbon-components/scss/globals/scss/styles";
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,33 +0,0 @@
|
|||
// Use the "white" (White) Carbon theme
|
||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||
|
||||
$carbon--theme: $carbon--theme--white;
|
||||
@include carbon--theme();
|
||||
|
||||
$feature-flags: (
|
||||
ui-shell: true,
|
||||
grid-columns-16: true
|
||||
);
|
||||
|
||||
$css--font-face: true;
|
||||
$css--helpers: true;
|
||||
$css--body: true;
|
||||
$css--use-layer: true;
|
||||
$css--reset: true;
|
||||
$css--default-type: true;
|
||||
$css--plex: true;
|
||||
|
||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "./popover";
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
@import "carbon-components/scss/globals/scss/_css--helpers";
|
||||
@import "carbon-components/scss/globals/scss/_css--body";
|
||||
@import "carbon-components/scss/globals/grid/grid";
|
||||
|
||||
// Import all component styles
|
||||
@import "carbon-components/scss/globals/scss/styles";
|
||||
Loading…
Add table
Add a link
Reference in a new issue