Optimized css

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.49",
+  "version": "2.0.50",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -280,17 +280,13 @@ defineExpose({
 </template>
 
 <style scoped>
+@import "../vue-data-ui.css";
+
 .vue-ui-3d-bar *{
     transition: unset;
 }
 .vue-ui-3d-bar {
     user-select: none;
     position: relative;
 }
-.vue-data-ui-fullscreen--on {
-    height: 100% !important;
-}
-.vue-data-ui-fullscreen--off {
-    max-width: 100%;
-}
 </style>

src/components/vue-ui-3d-bar.vue

@@ -655,6 +655,8 @@ defineExpose({
 </template>
 
 <style scoped>
+@import "../vue-data-ui.css";
+
 .vue-ui-age-pyramid *{
     transition: unset;
 }
@@ -699,15 +701,4 @@ defineExpose({
     z-index:1;
     font-variant-numeric: tabular-nums;
 }
-
-.vue-data-ui-fullscreen--on {
-    height: 90% !important;
-    margin: 0 auto !important;
-}
-.vue-data-ui-fullscreen--off {
-    max-width: 100%;
-}
-.vue-data-ui-wrapper-fullscreen {
-    overflow: auto;
-}
 </style>

src/components/vue-ui-age-pyramid.vue

@@ -712,6 +712,8 @@ defineExpose({
 </template>
 
 <style scoped>
+@import "../vue-data-ui.css";
+
 .vue-ui-candlestick *{
     transition: unset;
 }
@@ -851,18 +853,4 @@ input[type="range"]:active::-webkit-slider-thumb{
     background-color: #CCCCCC;
     border: 3px solid #858585;
 }
-
-.vue-ui-dna * {
-    animation: none !important;
-}
-.vue-data-ui-fullscreen--on {
-    height: 80% !important;
-    margin: 0 auto !important;
-}
-.vue-data-ui-fullscreen--off {
-    max-width: 100%;
-}
-.vue-data-ui-wrapper-fullscreen {
-    overflow: auto;
-}
 </style>

src/components/vue-ui-candlestick.vue

@@ -1138,6 +1138,8 @@ defineExpose({
 </template>
 
 <style scoped lang="scss">
+@import "../vue-data-ui.css";
+
 .vue-ui-chestnut *{
     transition: unset;
 }
@@ -1196,15 +1198,6 @@ defineExpose({
         opacity: 1;
     }
 }
-.vue-data-ui-fullscreen--on {
-    height: 100% !important;
-}
-.vue-data-ui-fullscreen--off {
-    max-width: 100%;
-}
-.vue-data-ui-wrapper-fullscreen {
-    overflow: auto;
-}
 
 .vue-ui-chestnut-table {
     width: 100%;

src/components/vue-ui-chestnut.vue

@@ -856,6 +856,8 @@ defineExpose({
 </template>
 
 <style scoped>
+@import "../vue-data-ui.css";
+
 .vue-ui-donut-evolution *{
     transition: unset;
     transition: opacity 0.5s ease-in-out;
@@ -895,14 +897,4 @@ defineExpose({
         opacity: 1;
     }
 }
-.vue-data-ui-fullscreen--on {
-    height: 80% !important;
-    margin: 0 auto !important;
-}
-.vue-data-ui-fullscreen--off {
-    max-width: 100%;
-}
-.vue-data-ui-wrapper-fullscreen {
-    overflow: auto;
-}
 </style>

src/components/vue-ui-donut-evolution.vue

@@ -712,6 +712,7 @@ defineExpose({
 </template>
 
 <style scoped>
+@import "../vue-data-ui.css";
 .vue-ui-donut *{
     transition: unset;
 }
@@ -748,22 +749,8 @@ path {
     width:100%;
 }
 
-.vue-ui-dna * {
-    animation: none !important;
-}
-
 .vue-ui-donut-blur {
     filter: blur(3px) opacity(50%) grayscale(100%);
     transition: all 0.15s ease-in-out;
 }
-.vue-data-ui-fullscreen--on {
-    height: 80% !important;
-    margin: 0 auto !important;
-}
-.vue-data-ui-fullscreen--off {
-    max-width: 100%;
-}
-.vue-data-ui-wrapper-fullscreen {
-    overflow: auto;
-}
 </style>

src/components/vue-ui-donut.vue

@@ -550,6 +550,7 @@ defineExpose({
 </template>
 
 <style scoped>
+@import "../vue-data-ui.css";
 .vue-ui-gauge *{
     transition: unset;
 }
@@ -592,14 +593,4 @@ defineExpose({
     padding:12px;
     z-index:1;
 }
-.vue-data-ui-fullscreen--on {
-    height: 80% !important;
-    margin: 0 auto !important;
-}
-.vue-data-ui-fullscreen--off {
-    max-width: 100%;
-}
-.vue-data-ui-wrapper-fullscreen {
-    overflow: auto;
-}
 </style>

src/components/vue-ui-gauge.vue

@@ -588,6 +588,8 @@ defineExpose({
 </template>
 
 <style scoped lang="scss">
+@import "../vue-data-ui.css";
+
 .vue-ui-heatmap *{
     transition: unset;
 }
@@ -639,15 +641,6 @@ defineExpose({
     margin-top: 24px;
     position: relative;
 }
-.vue-data-ui-fullscreen--on {
-    height: 80% !important;
-}
-.vue-data-ui-fullscreen--off {
-    max-width: 100%;
-}
-.vue-data-ui-wrapper-fullscreen {
-    overflow: auto;
-}
 
 .vue-ui-data-table thead {
     position: sticky;