fix: modal transition and about tooltips

This commit is contained in:
David Ralph
2021-08-17 22:20:27 +01:00
parent 6ec57c75d4
commit c66add33d2
4 changed files with 5 additions and 8 deletions

View File

@@ -44,12 +44,12 @@
"eslint-config-react-app": "^6.0.0", "eslint-config-react-app": "^6.0.0",
"html-webpack-plugin": "^5.3.2", "html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^2.2.0", "mini-css-extract-plugin": "^2.2.0",
"sass": "^1.37.5", "sass": "^1.38.0",
"sass-loader": "^12.1.0", "sass-loader": "^12.1.0",
"source-map-loader": "^3.0.0", "source-map-loader": "^3.0.0",
"webpack": "^5.50.0", "webpack": "^5.50.0",
"webpack-cli": "^4.7.2", "webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.0.0-rc.0" "webpack-dev-server": "^4.0.0-rc.1"
}, },
"scripts": { "scripts": {
"start": "webpack serve", "start": "webpack serve",

View File

@@ -4,7 +4,7 @@
display: inline-block; display: inline-block;
.tooltipTitle { .tooltipTitle {
width: 60px; min-width: 60px;
background-color: rgba(255, 255, 255, 0.89); background-color: rgba(255, 255, 255, 0.89);
color: #000000; color: #000000;
text-align: center; text-align: center;

View File

@@ -89,14 +89,11 @@
} }
.ReactModal__Content { .ReactModal__Content {
//min-height: calc(100vh - 30vh);
//max-height: calc(100vh - 10vh);
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
overflow-y: auto; overflow-y: auto;
position: relative; position: relative;
// animation // animation
opacity: 0;
transform: scale(0); transform: scale(0);
transition: all 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8); transition: all 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
} }

View File

@@ -78,8 +78,8 @@ export default class TimeSettings extends PureComponent {
</Dropdown> </Dropdown>
<br/><br/> <br/><br/>
<Dropdown label={time.date.short_separator.title} name='shortFormat' category='date'> <Dropdown label={time.date.short_separator.title} name='shortFormat' category='date'>
<option value='dots'>{time.date.short_separator.dots}</option>
<option value='dash'>{time.date.short_separator.dash}</option> <option value='dash'>{time.date.short_separator.dash}</option>
<option value='dots'>{time.date.short_separator.dots}</option>
<option value='gaps'>{time.date.short_separator.gaps}</option> <option value='gaps'>{time.date.short_separator.gaps}</option>
<option value='slashes'>{time.date.short_separator.slashes}</option> <option value='slashes'>{time.date.short_separator.slashes}</option>
</Dropdown> </Dropdown>