conflict in css

This commit is contained in:
Jonathan Rainville 2018-08-31 16:45:17 -04:00 committed by Pascal Precht
parent 77258f8636
commit 54c089583c
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
4 changed files with 108 additions and 3 deletions

View File

@ -100,8 +100,7 @@ class GasStation extends Component {
</Grid.Row> </Grid.Row>
<Form.Group> <Form.Group>
<Form.Ratio <input type="range" className="slider"
defaultValue={0}
max={this.formattedGasStats.gasSteps.length - 1} max={this.formattedGasStats.gasSteps.length - 1}
min={0} min={0}
step={1} step={1}

View File

@ -4,6 +4,7 @@ import {Provider} from 'react-redux';
import "tabler-react/dist/Tabler.css"; import "tabler-react/dist/Tabler.css";
import "./general.css"; import "./general.css";
import "./slider.css";
import AppContainer from './containers/AppContainer'; import AppContainer from './containers/AppContainer';
import registerServiceWorker from './registerServiceWorker'; import registerServiceWorker from './registerServiceWorker';

105
embark-ui/src/slider.css Normal file
View File

@ -0,0 +1,105 @@
.slider {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
}
.slider:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
/*
.slider::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}*/
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #bcbcbe;
height: 20px;
width: 10px;
border-radius: 1px;
background: #d0d0d0;
cursor: pointer;
margin-top: -6px;
}
.slider:active::-webkit-slider-thumb {
background-color: #4e5b60;
border: 1px solid #383739;
}
/*
.slider::-moz-range-thumb {
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
.slider::-ms-thumb {
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}*/
.slider::-webkit-slider-runnable-track {
width: 99%;
height: 8.4px;
cursor: pointer;
background: #236089;
border-radius: 4px;
border: 0.2px solid #010101;
}
.slider:active::-webkit-slider-runnable-track {
background: #266d99;
}
/*
.slider::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
.slider::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
.slider::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
}
.slider:focus::-ms-fill-lower {
background: #3071a9;
}
.slider::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
}
.slider:focus::-ms-fill-upper {
background: #367ebd;
}
*/