fix: CSS scoping issue

motla · Oct 30, 2022 · 21952fc · 21952fc
1 parent be3a67c
commit 21952fc
Show file tree

Hide file tree

Showing 3 changed files with 204 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## v1.4.1
+
+- Bugfix: CSS scoping issue
+
 ## v1.4.0
 
 - SCSS has been converted to basic CSS, so you don't have to install a SCSS compiler anymore

diff --git a/README.md b/README.md
@@ -114,7 +114,7 @@ See the [Demo.vue](src/Demo/Demo.vue) file corresponding to the [live demo](http
 
 Styling can be done either by writing CSS variables or by overloading CSS properties using [`!important`](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_!important_can_be_used).
 
-**:blue_book: Check the CSS variables list and default values in the [default stylesheet](src/Bar/imports/bar-default-styles.css).**
+**:blue_book: Check the CSS variables list and default values in the [Bar.vue stylesheet](src/Bar/Bar.vue#L72).**
 
 ###### :speech_balloon: If you need some variables that are missing, edit the stylesheet then submit a PR.
 

diff --git a/src/Bar/Bar.vue b/src/Bar/Bar.vue
@@ -70,5 +70,203 @@ export default {
 </script>
 
 <style scoped>
-  @import "./imports/bar-default-styles.css";
+.bar {
+  display: flex;
+  align-items: stretch;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  color: var(--bar-font-color, rgba(0, 0, 0, 0.7));
+  font-family: var(--bar-font-family, Avenir, Helvetica, Arial, sans-serif);
+  font-size: var(--bar-font-size, 16px);
+  font-weight: var(--bar-font-weight, 500);
+  font-style: var(--bar-font-style);
+  letter-spacing: var(--bar-letter-spacing);
+  margin: var(--bar-margin);
+  padding: var(--bar-padding);
+  border: var(--bar-border);
+  border-radius: var(--bar-border-radius);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  user-select: none;
+  cursor: default;
+}
+.bar >>> ::-webkit-scrollbar {
+  width: 16px;
+  height: 16px;
+}
+.bar >>> ::-webkit-scrollbar-track,
+.bar >>> ::-webkit-scrollbar-corner {
+  display: none;
+}
+.bar >>> ::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.5);
+  border: 5px solid transparent;
+  border-radius: 16px;
+  background-clip: content-box;
+}
+.bar >>> ::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+.bar >>> .ellipsis {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.bar >>> .bar-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--bar-button-padding, 7px);
+  border-radius: var(--bar-button-radius, 3px);
+  white-space: nowrap;
+}
+.bar >>> .bar-button.active {
+  color: var(--bar-button-active-color, #41b883);
+  background: var(--bar-button-active-bkg, #eaf7f4);
+}
+.bar >>> .bar-button.open:hover {
+  color: var(--bar-button-open-color, #41b883);
+  background: var(--bar-button-open-bkg, #eaf7f4);
+}
+.bar >>> .bar-button.disabled {
+  color: var(--bar-button-disabled-color, rgba(0, 0, 0, 0.3));
+  background: var(--bar-button-disabled-bkg);
+}
+.bar >>> .bar-button:not(.active):not(.open):not(.disabled):hover {
+  color: var(--bar-button-hover-color);
+  background: var(--bar-button-hover-bkg, #f1f3f4);
+}
+.bar >>> .bar-button > .label {
+  display: flex;
+  align-items: center;
+  padding: var(--bar-button-label-padding, 0 3px);
+}
+.bar >>> .bar-button > .icon,
+.bar >>> .bar-button > .emoji {
+  font-display: block;
+  width: 1em;
+  font-size: var(--bar-button-icon-size, 24px);
+  margin: var(--bar-button-icon-margin);
+}
+.bar >>> .bar-button > .chevron {
+  font-display: block;
+  width: 1em;
+  margin: var(--bar-button-chevron-margin, 0 -5px 0 0);
+}
+.bar >>> .bar-button > .menu {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  display: none;
+  z-index: 1000;
+}
+.bar >>> .bar-button > .menu.align-left {
+  left: 0;
+}
+.bar >>> .bar-button > .menu.align-center {
+  left: auto;
+}
+.bar >>> .bar-button > .menu.align-right {
+  left: auto;
+  right: 0;
+}
+.bar >>> .bar-button.open:hover > .menu {
+  display: block;
+}
+.bar >>> .bar-menu {
+  position: relative;
+  white-space: normal;
+}
+.bar >>> .bar-menu > .extended-hover-zone {
+  position: absolute;
+  top: 0;
+  left: -100px;
+  right: -100px;
+  bottom: -40px;
+}
+.bar >>> .bar-menu > .bar-menu-items {
+  position: relative;
+  min-width: var(--bar-menu-min-width, 160px);
+  color: var(--bar-menu-color, rgba(0, 0, 0, 0.7));
+  background: var(--bar-menu-bkg, white);
+  padding: var(--bar-menu-padding, 5px 0);
+  box-shadow: var(--bar-menu-shadow, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px);
+  border: var(--bar-menu-border);
+  border-radius: var(--bar-menu-border-radius);
+}
+@supports (backdrop-filter: var(--bar-menu-backdrop-filter)) {
+  .bar >>> .bar-menu > .bar-menu-items {
+    backdrop-filter: var(--bar-menu-backdrop-filter);
+    background: var(--bar-menu-backdrop-filter-bkg, var(--bar-menu-bkg, white));
+  }
+}
+.bar >>> .bar-menu > .bar-menu-items > .bar-menu-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: var(--bar-menu-item-font-size);
+  padding: var(--bar-menu-item-padding, 8px 15px);
+}
+.bar >>> .bar-men > .bar-menu-items > .bar-menu-item.active {
+  color: var(--bar-menu-item-active-color);
+  background: var(--bar-menu-item-active-bkg, #e7e8e9);
+}
+.bar >>> .bar-menu > .bar-menu-items > .bar-menu-item.disabled {
+  color: var(--bar-menu-item-disabled-color, rgba(0, 0, 0, 0.3));
+}
+.bar >>> .bar-menu > .bar-menu-items > .bar-menu-item:not(.active):not(.disabled):hover {
+  color: var(--bar-menu-item-hover-color);
+  background: var(--bar-menu-item-hover-bkg, #f1f3f4);
+}
+.bar >>> .bar-menu > .bar-menu-items > .bar-menu-item > .label {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+}
+.bar >>> .bar-menu > .bar-menu-items > .bar-menu-item > .icon,
+.bar >>> .bar-menu > .bar-menu-items > .bar-menu-item > .emoji {
+  font-display: block;
+  width: 1em;
+  font-size: var(--bar-menu-item-icon-size, 24px);
+  margin: var(--bar-menu-item-icon-margin, 0 10px 0 0);
+}
+.bar >>> .bar-menu > .bar-menu-items > .bar-menu-item > .chevron {
+  font-display: block;
+  width: 1em;
+  margin: var(--bar-menu-item-chevron-margin, 0 -6px 0 0);
+}
+.bar >>> .bar-menu > .bar-menu-items > .bar-menu-item > .menu {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  display: none;
+  z-index: 1000;
+}
+.bar >>> .bar-menu > .bar-menu-items > .bar-menu-item:hover > .menu {
+  display: block;
+}
+.bar >>> .bar-menu > .bar-menu-items > .bar-menu-item > .bar-menu {
+  border-radius: var(--bar-sub-menu-border-radius);
+}
+.bar >>> .bar-menu > .bar-menu-items > .bar-menu-item > .bar-menu > .extended-hover-zone {
+  top: -100px;
+  left: 0;
+  bottom: -100px;
+}
+.bar >>> .bar-menu > .bar-menu-items > .bar-menu-separator {
+  height: var(--bar-menu-separator-height, 1px);
+  margin: var(--bar-menu-separator-margin, 5px 0);
+  background-color: var(--bar-menu-separator-color, rgba(0, 0, 0, 0.1));
+}
+.bar >>> .bar-separator {
+  width: var(--bar-separator-width, 2px);
+  margin: var(--bar-separator-margin, 5px);
+  background-color: var(--bar-separator-color, rgba(0, 0, 0, 0.1));
+}
+.bar >>> .bar-spacer {
+  flex-grow: 1;
+}
 </style>