// vf-bookmark // **Thinking about deleting this file?** // If your component needs no CSS/Sass, we still recommend leaving the // scss files in place. As this is primarily a CSS framework, it is better to // leave the empty files so you know a file wasn't accidently omitted. // If you don't have any Sass, you can trim this block down to: // "This page was intentionally left blank" @import 'package.variables.scss'; // Debug information from component's `package.json`: // --- /*! * Component: #{map-get($componentInfo, 'name')} * Version: #{map-get($componentInfo, 'version')} * Location: #{map-get($componentInfo, 'location')} * Build time: #{map-get($componentInfo, 'buildTimeStamp')} */ @import 'vf-bookmark.variables.scss'; // You need to add this Sass file to ./components/vf-componenet-rollup/index.scss // @import 'vf-bookmark/vf-bookmark.scss'; // .vf-bookmark { // You can utilise CSS custom properites // --thing-text-color: var(--vf-bookmark-theme-color--foreground, #{set-ui-color(vf-ui-color--black)}); // The are many mixins: // https://stable.visual-framework.dev/components/detail/vf-sass-config.html // @include set-type(text-body--2); // You can also use the design tokens // https://stable.visual-framework.dev/components/detail/vf-design-tokens.html // --otherthing-color: var(--vf-bookmark-theme-color--foreground, #{map-get($vf-colors-map, vf-color--green--darkest)}); // color: var(--otherthing-color); // } .vf-bookmark--icon { // align-items: center; // border-bottom: none; color: ui-color(white); line-height: 1rem; stroke: color(blue); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; vertical-align: middle; svg { fill: currentColor; height: 1.25rem; line-height: 1.2rem; margin-right: .4rem; overflow: initial; width: 1.25rem; // flex: 1 0 auto; // margin-left: map-get($vf-spacing-map, vf-spacing--200); } } .vf-bookmark--active .vf-bookmark--icon { color: color(blue); // IE11 fallback color: inherit; stroke: none; } .vf-bookmark--button svg { vertical-align: text-top; } .vf-bookmark--inline svg { vertical-align: bottom; }