Skip to content

Commit 85fadee

Browse files
motlamotla
committed
1.4.0 dropping usage of scss and eslint
1 parent f1be471 commit 85fadee

File tree

6 files changed

+213
-246
lines changed

6 files changed

+213
-246
lines changed

‎CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## v1.4.0
2+
3+
- SCSS has been converted to basic CSS, so you don't have to install a SCSS compiler anymore
4+
- Updating dependencies
5+
- Removing ESLint for a lighter project
6+
17
## v1.3.4
28

39
- \[Color button\] Prevent calling `color_update()` callback when the color is changed not from the color palette

‎README.md

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,6 @@ In your Vue.js project:
2424
npm install vue-file-toolbar-menu
2525
```
2626

27-
###### :warning: Your Vue.js project must have [`scss`](https://vue-loader.vuejs.org/guide/pre-processors.html#sass) support
28-
2927
###### :speech_balloon: If you prefer static files, import assets from the `dist` folder
3028

3129
## Basic example
@@ -66,7 +64,7 @@ Should render this:
6664
<img src="https://github.com/motla/vue-file-toolbar-menu/raw/master/img/basic-example.png">
6765

6866
<details>
69-
<summary><small>same example using static files loaded with a CDN</small></summary>
67+
<summary><small>same example using static files loaded with a CDN (Vue 2)</small></summary>
7068

7169
```HTML
7270
<html>
@@ -116,7 +114,7 @@ See the [Demo.vue](src/Demo/Demo.vue) file corresponding to the [live demo](http
116114

117115
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).
118116

119-
**:blue_book: Check the CSS variables list and default values in the [default stylesheet](src/Bar/imports/bar-default-styles.scss).**
117+
**:blue_book: Check the CSS variables list and default values in the [default stylesheet](src/Bar/imports/bar-default-styles.css).**
120118

121119
###### :speech_balloon: If you need some variables that are missing, edit the stylesheet then submit a PR.
122120

@@ -207,7 +205,6 @@ Styling can be done either by writing CSS variables or by overloading CSS proper
207205

208206
## Project development
209207
- `npm run serve` compiles and hot-reloads demo for development
210-
- `npm run lint` lints and fixes files
211208
- `npm run build` compiles and minifies production files and demo
212209

213210
## Dependencies

‎package.json

Lines changed: 7 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -30,43 +30,20 @@
3030
"scripts": {
3131
"serve": "vue-cli-service serve",
3232
"build": "vue-cli-service build --dest docs && vue-cli-service build --target lib --name VueFileToolbarMenu src/Bar/Bar.vue",
33-
"lint": "vue-cli-service lint",
34-
"preversion": "npm run lint",
3533
"version": "npm run build && git add -A"
3634
},
3735
"main": "src/Bar/Bar.vue",
3836
"dependencies": {
39-
"hotkeys-js": "^3.8.2",
40-
"material-icons": "^0.5.3",
41-
"node-emoji": "^1.10.0",
37+
"hotkeys-js": "^3.10.0",
38+
"material-icons": "^1.12.0",
39+
"node-emoji": "^1.11.0",
4240
"vue-color": "^2.8.1"
4341
},
4442
"devDependencies": {
45-
"@vue/cli-plugin-babel": "^4.5.11",
46-
"@vue/cli-plugin-eslint": "^4.5.11",
47-
"@vue/cli-service": "^4.5.11",
48-
"babel-eslint": "^10.1.0",
49-
"core-js": "^3.9.1",
50-
"eslint": "^6.7.2",
51-
"eslint-plugin-vue": "^6.2.2",
52-
"sass": "^1.32.8",
53-
"sass-loader": "^8.0.2",
54-
"vue": "^2.6.12",
55-
"vue-template-compiler": "^2.6.12"
56-
},
57-
"eslintConfig": {
58-
"root": true,
59-
"env": {
60-
"node": true
61-
},
62-
"extends": [
63-
"plugin:vue/essential",
64-
"eslint:recommended"
65-
],
66-
"parserOptions": {
67-
"parser": "babel-eslint"
68-
},
69-
"rules": {}
43+
"@vue/cli-plugin-babel": "^5.0.8",
44+
"@vue/cli-service": "^5.0.8",
45+
"vue": "^2.7.13",
46+
"vue-template-compiler": "^2.7.13"
7047
},
7148
"browserslist": [
7249
"> 1%",

‎src/Bar/Bar.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,6 @@ export default {
6969
}
7070
</script>
7171

72-
<style lang="scss" scoped>
73-
@import "./imports/bar-default-styles.scss";
72+
<style scoped>
73+
@import "./imports/bar-default-styles.css";
7474
</style>

‎src/Bar/imports/bar-default-styles.css

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
.bar {
2+
display: flex;
3+
align-items: stretch;
4+
justify-content: flex-start;
5+
flex-wrap: wrap;
6+
color: var(--bar-font-color, rgba(0, 0, 0, 0.7));
7+
font-family: var(--bar-font-family, Avenir, Helvetica, Arial, sans-serif);
8+
font-size: var(--bar-font-size, 16px);
9+
font-weight: var(--bar-font-weight, 500);
10+
font-style: var(--bar-font-style);
11+
letter-spacing: var(--bar-letter-spacing);
12+
margin: var(--bar-margin);
13+
padding: var(--bar-padding);
14+
border: var(--bar-border);
15+
border-radius: var(--bar-border-radius);
16+
-webkit-font-smoothing: antialiased;
17+
-moz-osx-font-smoothing: grayscale;
18+
user-select: none;
19+
cursor: default;
20+
}
21+
.bar ::-webkit-scrollbar {
22+
width: 16px;
23+
height: 16px;
24+
}
25+
.bar ::-webkit-scrollbar-track, .bar ::-webkit-scrollbar-corner {
26+
display: none;
27+
}
28+
.bar ::-webkit-scrollbar-thumb {
29+
background-color: rgba(0, 0, 0, 0.5);
30+
border: 5px solid transparent;
31+
border-radius: 16px;
32+
background-clip: content-box;
33+
}
34+
.bar ::-webkit-scrollbar-thumb:hover {
35+
background-color: rgba(0, 0, 0, 0.8);
36+
}
37+
.bar .ellipsis {
38+
width: 100%;
39+
white-space: nowrap;
40+
overflow: hidden;
41+
text-overflow: ellipsis;
42+
}
43+
.bar .bar-button {
44+
position: relative;
45+
display: flex;
46+
align-items: center;
47+
justify-content: center;
48+
padding: var(--bar-button-padding, 7px);
49+
border-radius: var(--bar-button-radius, 3px);
50+
white-space: nowrap;
51+
}
52+
.bar .bar-button.active {
53+
color: var(--bar-button-active-color, #41b883);
54+
background: var(--bar-button-active-bkg, #eaf7f4);
55+
}
56+
.bar .bar-button.open:hover {
57+
color: var(--bar-button-open-color, #41b883);
58+
background: var(--bar-button-open-bkg, #eaf7f4);
59+
}
60+
.bar .bar-button.disabled {
61+
color: var(--bar-button-disabled-color, rgba(0, 0, 0, 0.3));
62+
background: var(--bar-button-disabled-bkg);
63+
}
64+
.bar .bar-button:not(.active):not(.open):not(.disabled):hover {
65+
color: var(--bar-button-hover-color);
66+
background: var(--bar-button-hover-bkg, #f1f3f4);
67+
}
68+
.bar .bar-button > .label {
69+
display: flex;
70+
align-items: center;
71+
padding: var(--bar-button-label-padding, 0 3px);
72+
}
73+
.bar .bar-button > .icon, .bar .bar-button > .emoji {
74+
font-display: block;
75+
width: 1em;
76+
font-size: var(--bar-button-icon-size, 24px);
77+
margin: var(--bar-button-icon-margin);
78+
}
79+
.bar .bar-button > .chevron {
80+
font-display: block;
81+
width: 1em;
82+
margin: var(--bar-button-chevron-margin, 0 -5px 0 0);
83+
}
84+
.bar .bar-button > .menu {
85+
position: absolute;
86+
left: 0;
87+
top: 100%;
88+
display: none;
89+
z-index: 1000;
90+
}
91+
.bar .bar-button > .menu.align-left {
92+
left: 0;
93+
}
94+
.bar .bar-button > .menu.align-center {
95+
left: auto;
96+
}
97+
.bar .bar-button > .menu.align-right {
98+
left: auto;
99+
right: 0;
100+
}
101+
.bar .bar-button.open:hover > .menu {
102+
display: block;
103+
}
104+
.bar .bar-menu {
105+
position: relative;
106+
white-space: normal;
107+
}
108+
.bar .bar-menu > .extended-hover-zone {
109+
position: absolute;
110+
top: 0;
111+
left: -100px;
112+
right: -100px;
113+
bottom: -40px;
114+
}
115+
.bar .bar-menu > .bar-menu-items {
116+
position: relative;
117+
min-width: var(--bar-menu-min-width, 160px);
118+
color: var(--bar-menu-color, rgba(0, 0, 0, 0.7));
119+
background: var(--bar-menu-bkg, white);
120+
padding: var(--bar-menu-padding, 5px 0);
121+
box-shadow: var(--bar-menu-shadow, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px);
122+
border: var(--bar-menu-border);
123+
border-radius: var(--bar-menu-border-radius);
124+
}
125+
@supports (backdrop-filter: var(--bar-menu-backdrop-filter)) {
126+
.bar .bar-menu > .bar-menu-items {
127+
backdrop-filter: var(--bar-menu-backdrop-filter);
128+
background: var(--bar-menu-backdrop-filter-bkg, var(--bar-menu-bkg, white));
129+
}
130+
}
131+
.bar .bar-menu > .bar-menu-items > .bar-menu-item {
132+
position: relative;
133+
display: flex;
134+
align-items: center;
135+
justify-content: flex-start;
136+
font-size: var(--bar-menu-item-font-size);
137+
padding: var(--bar-menu-item-padding, 8px 15px);
138+
}
139+
.bar .bar-menu > .bar-menu-items > .bar-menu-item.active {
140+
color: var(--bar-menu-item-active-color);
141+
background: var(--bar-menu-item-active-bkg, #e7e8e9);
142+
}
143+
.bar .bar-menu > .bar-menu-items > .bar-menu-item.disabled {
144+
color: var(--bar-menu-item-disabled-color, rgba(0, 0, 0, 0.3));
145+
}
146+
.bar .bar-menu > .bar-menu-items > .bar-menu-item:not(.active):not(.disabled):hover {
147+
color: var(--bar-menu-item-hover-color);
148+
background: var(--bar-menu-item-hover-bkg, #f1f3f4);
149+
}
150+
.bar .bar-menu > .bar-menu-items > .bar-menu-item > .label {
151+
display: flex;
152+
align-items: center;
153+
flex-grow: 1;
154+
}
155+
.bar .bar-menu > .bar-menu-items > .bar-menu-item > .icon, .bar .bar-menu > .bar-menu-items > .bar-menu-item > .emoji {
156+
font-display: block;
157+
width: 1em;
158+
font-size: var(--bar-menu-item-icon-size, 24px);
159+
margin: var(--bar-menu-item-icon-margin, 0 10px 0 0);
160+
}
161+
.bar .bar-menu > .bar-menu-items > .bar-menu-item > .chevron {
162+
font-display: block;
163+
width: 1em;
164+
margin: var(--bar-menu-item-chevron-margin, 0 -6px 0 0);
165+
}
166+
.bar .bar-menu > .bar-menu-items > .bar-menu-item > .menu {
167+
position: absolute;
168+
left: 100%;
169+
top: 0;
170+
display: none;
171+
z-index: 1000;
172+
}
173+
.bar .bar-menu > .bar-menu-items > .bar-menu-item:hover > .menu {
174+
display: block;
175+
}
176+
.bar .bar-menu > .bar-menu-items > .bar-menu-item > .bar-menu {
177+
border-radius: var(--bar-sub-menu-border-radius);
178+
}
179+
.bar .bar-menu > .bar-menu-items > .bar-menu-item > .bar-menu > .extended-hover-zone {
180+
top: -100px;
181+
left: 0;
182+
bottom: -100px;
183+
}
184+
.bar .bar-menu > .bar-menu-items > .bar-menu-separator {
185+
height: var(--bar-menu-separator-height, 1px);
186+
margin: var(--bar-menu-separator-margin, 5px 0);
187+
background-color: var(--bar-menu-separator-color, rgba(0, 0, 0, 0.1));
188+
}
189+
.bar .bar-separator {
190+
width: var(--bar-separator-width, 2px);
191+
margin: var(--bar-separator-margin, 5px);
192+
background-color: var(--bar-separator-color, rgba(0, 0, 0, 0.1));
193+
}
194+
.bar .bar-spacer {
195+
flex-grow: 1;
196+
}

0 commit comments

Comments
 (0)