I am using valo as my base theme and having my own rules on top of it. I am trying to change the position of loading indicator (from top right to center) like below
.v-loading-indicator,
.v-loading-indicator-delay,
.v-loading-indicator-wait {
position: absolute !important;
top: 52%;
right: 51%;
z-index: 30000;
width: 25px;
height: 25px;
margin: 0;
background-position: 50%;
background: #fff url(…/valo/shared/img/spinner.gif) no-repeat 50%;
background-color: black;
opacity: .8;
-ms-filter: alpha(opacity=80);
filter: alpha(opacity=80);
}
While compiling the theme i could see corresponding code in .css file. But again default properties of valo theme are also getting generated in .css file . Meaning two different set of rules for v-loading-indicator .This produces an undesired out put. For example two set of rules are getting produced in css like below
.mytheme .v-loading-indicator {
position: absolute !important;
top: 52%;
right: 51%;
z-index: 30000;
width: 25px;
height: 25px;
margin: 0;
background-position: 50%;
background: #fff url(…/valo/shared/img/spinner.gif) no-repeat 50%;
background-color: black;
opacity: 0.8;
-ms-filter: alpha(opacity=80);
filter: alpha(opacity=80);
}
and default rules
.mytheme .v-loading-indicator {
position: fixed !important;
z-index: 99999;
left: 0;
right: auto;
top: 0;
width: 50%;
opacity: 1;
height: 4px;
background-color: #197de1;
pointer-events: none;
-webkit-transition: none;
-moz-transition: none;
transition: none;
-webkit-animation: v-progress-start 1000ms 200ms both;
-moz-animation: v-progress-start 1000ms 200ms both;
animation: v-progress-start 1000ms 200ms both;
}
How to avoid generating the default rules while overring loding-indicator?
Thanks
Barath