Compare commits
No commits in common. "709211f2b5c4e9b722cfa9da0689ed201268fbf0" and "ee690830907a1b0ffb428bb1b628dde60d67add6" have entirely different histories.
709211f2b5
...
ee69083090
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -21,5 +21,3 @@
|
|||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
build/artifacts
|
||||
|
|
|
|||
21
LICENSE
21
LICENSE
|
|
@ -1,21 +0,0 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2020 Nicola Zambello
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -1,8 +1,3 @@
|
|||
# timeconvert
|
||||
|
||||
WebExtension built with React to convert times to decimal values.
|
||||
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
|
|
|||
|
|
@ -1,21 +1,18 @@
|
|||
{
|
||||
"name": "timeconvert",
|
||||
"version": "0.1.2",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@testing-library/react": "^9.3.2",
|
||||
"@testing-library/user-event": "^7.1.2",
|
||||
"react": "^16.12.0",
|
||||
"react-copy-to-clipboard": "^5.0.2",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-scripts": "3.3.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build_scripts": "webpack --config webpack.config.js",
|
||||
"build": "INLINE_RUNTIME_CHUNK=false react-scripts build",
|
||||
"package": "web-ext build --config=webext.config.js",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
|
|
@ -33,8 +30,5 @@
|
|||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"web-ext": "^4.1.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 149 KiB After Width: | Height: | Size: 3.8 KiB |
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Convert time to h"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>TimeConvert</title>
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 9.4 KiB |
|
|
@ -1,27 +1,14 @@
|
|||
{
|
||||
"manifest_version": 2,
|
||||
"version": "0.1.2",
|
||||
"name": "TimeConvert",
|
||||
"description": "Convert time to h",
|
||||
"version": "1.0",
|
||||
"name": "Convert time to h",
|
||||
"icons": {
|
||||
"192": "logo192.png",
|
||||
"512": "logo512.png"
|
||||
},
|
||||
"homepage_url": "https://github.com/nzambello/timeconvert",
|
||||
"browser_specific_settings": {
|
||||
"gecko": {
|
||||
"id": "{a54ce314-67ca-498f-ba4e-9192a392ec79}"
|
||||
}
|
||||
},
|
||||
"browser_action": {
|
||||
"default_icon": "logo192.png",
|
||||
"theme_icons": [{
|
||||
"light": "logo192.png",
|
||||
"dark": "logo192.png",
|
||||
"size": 192
|
||||
}],
|
||||
"default_title": "TimeConvert",
|
||||
"default_popup": "index.html",
|
||||
"browser_style": true
|
||||
"default_title": "Converttime",
|
||||
"default_popup": "index.html"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
45
src/App.css
45
src/App.css
|
|
@ -1,27 +1,38 @@
|
|||
.App {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App * {
|
||||
text-align: center;
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
font-weight: 300;
|
||||
color: #0c0c0d;
|
||||
margin-top: 0;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.browser-style button.browser-style {
|
||||
border-radius: 2px;
|
||||
min-height: 32px;
|
||||
height: auto;
|
||||
padding: 8px;
|
||||
font-size: 13px;
|
||||
min-width: 132px;
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
input[type="text"] + input[type="text"] {
|
||||
margin-left: 0.5rem;
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
24
src/App.js
24
src/App.js
|
|
@ -1,7 +1,5 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { CopyToClipboard } from "react-copy-to-clipboard";
|
||||
import "./photon-extension-kit.css";
|
||||
import "./App.css";
|
||||
import React, {useState, useEffect} from 'react';
|
||||
import './App.css';
|
||||
|
||||
const parseTime = time => {
|
||||
const parsed = parseInt(time, 10);
|
||||
|
|
@ -13,19 +11,16 @@ const App = () => {
|
|||
const [hours, setHours] = useState(0);
|
||||
const [minutes, setMinutes] = useState(0);
|
||||
const [seconds, setSeconds] = useState(0);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
document.getElementById("hours").focus();
|
||||
document.getElementById('hours').focus();
|
||||
}, []);
|
||||
|
||||
const result = Number.parseFloat(hours + minutes / 60 + seconds / (60 * 60));
|
||||
const parsedResult = result > 0 ? result.toPrecision(4) : 0;
|
||||
const result = hours + minutes / 60 + seconds / (60 * 60);
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<h1>Convert time to h</h1>
|
||||
<div className="browser-style">
|
||||
<div>
|
||||
<input
|
||||
id="hours"
|
||||
type="text"
|
||||
|
|
@ -46,13 +41,8 @@ const App = () => {
|
|||
/>
|
||||
</div>
|
||||
<br />
|
||||
<div className="browser-style">
|
||||
<CopyToClipboard text={parsedResult} onCopy={() => setCopied(true)}>
|
||||
<button className="browser-style default">
|
||||
<span>{parsedResult} h</span>
|
||||
</button>
|
||||
</CopyToClipboard>
|
||||
{copied ? <p style={{ color: "green" }}>Copied.</p> : null}
|
||||
<div>
|
||||
<pre>{result} h</pre>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,561 +0,0 @@
|
|||
/* stylelint-disable property-no-vendor-prefix */
|
||||
/* stylelint-disable property-no-vendor-prefix */
|
||||
|
||||
/* Global */
|
||||
html,
|
||||
body {
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
color: #222426;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font: caption;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
body * {
|
||||
box-sizing: border-box;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.browser-style {
|
||||
-moz-appearance: none;
|
||||
margin-bottom: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* stylelint-disable property-no-vendor-prefix */
|
||||
/* Buttons */
|
||||
button.browser-style,
|
||||
select.browser-style {
|
||||
background-color: #fbfbfb;
|
||||
border: 1px solid #b1b1b1;
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
font: caption;
|
||||
height: 24px;
|
||||
outline: 0 !important;
|
||||
padding: 0 8px 0;
|
||||
transition-duration: 250ms;
|
||||
transition-property: box-shadow, border;
|
||||
}
|
||||
|
||||
select.browser-style {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCwxMkwzLDcsNCw2bDQsNCw0LTQsMSwxWiIgZmlsbD0iIzZBNkE2QSIgLz4KPC9zdmc+Cg==);
|
||||
background-position: calc(100% - 4px) center;
|
||||
background-repeat: no-repeat;
|
||||
padding-inline-end: 24px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
label.browser-style-label {
|
||||
font: caption;
|
||||
}
|
||||
|
||||
button.browser-style::-moz-focus-inner {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Dropdowns */
|
||||
select.browser-style {
|
||||
background-color: #fbfbfb;
|
||||
border: 1px solid #b1b1b1;
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
font: caption;
|
||||
height: 24px;
|
||||
outline: 0 !important;
|
||||
padding: 0 8px 0;
|
||||
transition-duration: 250ms;
|
||||
transition-property: box-shadow, border;
|
||||
}
|
||||
|
||||
select.browser-style {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCwxMkwzLDcsNCw2bDQsNCw0LTQsMSwxWiIgZmlsbD0iIzZBNkE2QSIgLz4KPC9zdmc+Cg==);
|
||||
background-position: calc(100% - 4px) center;
|
||||
background-repeat: no-repeat;
|
||||
padding-inline-end: 24px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
select.browser-style:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000;
|
||||
}
|
||||
|
||||
select.browser-style:-moz-focusring * {
|
||||
color: #000;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
button.browser-style.hover,
|
||||
select.browser-style.hover {
|
||||
background-color: #ebebeb;
|
||||
border: 1px solid #b1b1b1;
|
||||
}
|
||||
|
||||
button.browser-style.pressed,
|
||||
select.browser-style.pressed {
|
||||
background-color: #d4d4d4;
|
||||
border: 1px solid #858585;
|
||||
}
|
||||
|
||||
button.browser-style.disabled,
|
||||
select.browser-style.disabled {
|
||||
color: #999;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
button.browser-style.focused,
|
||||
select.browser-style.focused {
|
||||
border-color: #fff;
|
||||
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
|
||||
}
|
||||
|
||||
button.browser-style.default {
|
||||
background-color: #0996f8;
|
||||
border-color: #0670cc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.browser-style.default.hover {
|
||||
background-color: #0670cc;
|
||||
border-color: #005bab;
|
||||
}
|
||||
|
||||
button.browser-style.default.pressed {
|
||||
background-color: #005bab;
|
||||
border-color: #004480;
|
||||
}
|
||||
|
||||
button.browser-style.default.focused {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
/* Radio Buttons */
|
||||
.browser-style > input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.browser-style > input[type="radio"] + label {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.browser-style > input[type="radio"] + label::before {
|
||||
background-color: #fff;
|
||||
background-position: center;
|
||||
border: 1px solid #b1b1b1;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
margin-right: 6px;
|
||||
vertical-align: text-top;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.browser-style > input[type="radio"]:hover + label::before,
|
||||
.browser-style.hover > input[type="radio"]:not(active) + label::before {
|
||||
background-color: #fbfbfb;
|
||||
border-color: #b1b1b1;
|
||||
}
|
||||
|
||||
.browser-style > input[type="radio"]:hover:active + label::before,
|
||||
.browser-style.pressed > input[type="radio"]:not(active) + label::before {
|
||||
background-color: #ebebeb;
|
||||
border-color: #858585;
|
||||
}
|
||||
|
||||
.browser-style > input[type="radio"]:checked + label::before {
|
||||
background-color: #0996f8;
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iNCIgZmlsbD0iI2ZmZiIgLz4KPC9zdmc+Cg==);
|
||||
border-color: #0670cc;
|
||||
}
|
||||
|
||||
.browser-style > input[type="radio"]:checked:hover + label::before,
|
||||
.browser-style.hover > input[type="radio"]:checked:not(active) + label::before {
|
||||
background-color: #0670cc;
|
||||
border-color: #005bab;
|
||||
}
|
||||
|
||||
.browser-style > input[type="radio"]:checked:hover:active + label::before,
|
||||
.browser-style.pressed > input[type="radio"]:checked:not(active) + label::before {
|
||||
background-color: #005bab;
|
||||
border-color: #004480;
|
||||
}
|
||||
|
||||
.browser-style.disabled > input[type="radio"] + label,
|
||||
.browser-style.disabled > input[type="radio"]:hover + label,
|
||||
.browser-style.disabled > input[type="radio"]:hover:active + label {
|
||||
color: #999;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.browser-style.focused > input[type="radio"] + label::before {
|
||||
border-color: #0996f8;
|
||||
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
|
||||
}
|
||||
|
||||
.browser-style.focused > input[type="radio"]:checked + label::before {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
/* Checkboxes */
|
||||
.browser-style > input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.browser-style > input[type="checkbox"] + label {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.browser-style > input[type="checkbox"] + label::before {
|
||||
background-color: #fff;
|
||||
background-position: center;
|
||||
border: 1px solid #b1b1b1;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
margin-right: 6px;
|
||||
vertical-align: text-top;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.browser-style > input[type="checkbox"]:hover + label::before,
|
||||
.browser-style.hover > input[type="checkbox"]:not(active) + label::before {
|
||||
background-color: #fbfbfb;
|
||||
border-color: #b1b1b1;
|
||||
}
|
||||
|
||||
.browser-style > input[type="checkbox"]:hover:active + label::before,
|
||||
.browser-style.pressed > input[type="checkbox"]:not(active) + label::before {
|
||||
background-color: #ebebeb;
|
||||
border-color: #858585;
|
||||
}
|
||||
|
||||
.browser-style > input[type="checkbox"]:checked + label::before {
|
||||
background-color: #0996f8;
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNNy43LDEyLjkgQzcuNCwxMy4zIDYuOCwxMy40IDYuNCwxMyBMMy4yLDkuOCBDMi44LDkuNCAyLjgsOC42IDMuMiw4LjIgQzMuNiw3LjggNC40LDcuOCA0LjgsOC4yIEw2LjksMTAuMyBMMTEuMSw0LjQgQzExLjUsMy45IDEyLjIsMy44IDEyLjcsNC4xIEMxMy4yLDQuNSAxMy4zLDUuMiAxMyw1LjcgTDcuNywxMi45IEw3LjcsMTIuOSBaIiBmaWxsPSIjZmZmIiAvPgo8L3N2Zz4K);
|
||||
border-color: #0670cc;
|
||||
}
|
||||
|
||||
.browser-style > input[type="checkbox"]:checked:hover + label::before,
|
||||
.browser-style.hover > input[type="checkbox"]:checked:not(active) + label::before {
|
||||
background-color: #0670cc;
|
||||
border-color: #005bab;
|
||||
}
|
||||
|
||||
.browser-style > input[type="checkbox"]:checked:hover:active + label::before,
|
||||
.browser-style.pressed > input[type="checkbox"]:checked:not(active) + label::before {
|
||||
background-color: #005bab;
|
||||
border-color: #004480;
|
||||
}
|
||||
|
||||
.browser-style.disabled > input[type="checkbox"] + label,
|
||||
.browser-style.disabled > input[type="checkbox"]:hover + label,
|
||||
.browser-style.disabled > input[type="checkbox"]:hover:active + label {
|
||||
color: #999;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.browser-style.focused > input[type="checkbox"] + label::before {
|
||||
border-color: #0996f8;
|
||||
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
|
||||
}
|
||||
|
||||
.browser-style.focused > input[type="checkbox"]:checked + label::before {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
/* Expander Button */
|
||||
button.browser-style.expander {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCwxMkwzLDcsNCw2bDQsNCw0LTQsMSwxWiIgZmlsbD0iIzZBNkE2QSIgLz4KPC9zdmc+Cg==);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
/* Interactive States */
|
||||
button.browser-style:hover:not(.pressed):not(.disabled):not(.focused),
|
||||
select.browser-style:hover:not(.pressed):not(.disabled):not(.focused) {
|
||||
background-color: #ebebeb;
|
||||
border: 1px solid #b1b1b1;
|
||||
}
|
||||
|
||||
button.browser-style:hover:active:not(.hover):not(.disabled):not(.focused),
|
||||
select.browser-style:hover:active:not(.hover):not(.disabled):not(.focused) {
|
||||
background-color: #d4d4d4;
|
||||
border: 1px solid #858585;
|
||||
}
|
||||
|
||||
button.browser-style.default:hover:not(.pressed):not(.disabled):not(.focused) {
|
||||
background-color: #0670cc;
|
||||
border-color: #005bab;
|
||||
}
|
||||
|
||||
button.browser-style.default:hover:active:not(.hover):not(.disabled):not(.focused) {
|
||||
background-color: #005bab;
|
||||
border-color: #004480;
|
||||
}
|
||||
|
||||
button.browser-style:focus:not(.disabled) {
|
||||
border-color: #fff !important;
|
||||
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
|
||||
}
|
||||
|
||||
/* Fields */
|
||||
.browser-style > input[type="text"],
|
||||
textarea.browser-style {
|
||||
background-color: #fff;
|
||||
border: 1px solid #b1b1b1;
|
||||
box-shadow: 0 0 0 0 rgba(97, 181, 255, 0);
|
||||
font: caption;
|
||||
padding: 0 6px 0;
|
||||
transition-duration: 250ms;
|
||||
transition-property: box-shadow;
|
||||
}
|
||||
|
||||
.browser-style > input[type="text"] {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.browser-style > input[type="text"].hover,
|
||||
textarea.browser-style.hover {
|
||||
border: 1px solid #858585;
|
||||
}
|
||||
|
||||
.browser-style > input[type="text"].disabled,
|
||||
textarea.browser-style.disabled {
|
||||
color: #999;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.browser-style > input[type="text"].focused,
|
||||
textarea.browser-style.focused {
|
||||
border-color: #0996f8;
|
||||
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
|
||||
}
|
||||
|
||||
/* Interactive States */
|
||||
.browser-style > input[type="text"]:not(disabled):hover,
|
||||
textarea.browser-style:not(disabled):hover {
|
||||
border: 1px solid #858585;
|
||||
}
|
||||
|
||||
.browser-style > input[type="text"]:focus,
|
||||
.browser-style > input[type="text"]:focus:hover,
|
||||
textarea.browser-style:focus,
|
||||
textarea.browser-style:focus:hover {
|
||||
border-color: #0996f8;
|
||||
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
|
||||
}
|
||||
|
||||
/* stylelint-disable property-no-vendor-prefix */
|
||||
.panel-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.panel-section-separator {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
/* Panel Section - Header */
|
||||
.panel-section-header {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.panel-section-header > .icon-section-header {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
height: 32px;
|
||||
margin-right: 16px;
|
||||
position: relative;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.panel-section-header > .text-section-header {
|
||||
align-self: center;
|
||||
font-size: 1.385em;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
/* Panel Section - List */
|
||||
.panel-section-list {
|
||||
flex-direction: column;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.panel-list-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 24px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.panel-list-item:not(.disabled):hover {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.panel-list-item:not(.disabled):hover:active {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.panel-list-item.disabled {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.panel-list-item > .icon {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.panel-list-item > .text {
|
||||
flex-grow: 10;
|
||||
}
|
||||
|
||||
.panel-list-item > .text-shortcut {
|
||||
color: #808080;
|
||||
font-family: "Lucida Grande", caption;
|
||||
font-size: .847em;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.panel-section-list .panel-section-separator {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
/* Panel Section - Form Elements */
|
||||
.panel-section-formElements {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.panel-formElements-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.panel-formElements-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.panel-formElements-item label {
|
||||
flex-shrink: 0;
|
||||
margin-right: 6px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.panel-formElements-item input[type="text"],
|
||||
.panel-formElements-item select.browser-style {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* Panel Section - Footer */
|
||||
.panel-section-footer {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.15);
|
||||
color: #1a1a1a;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 41px;
|
||||
margin-top: -1px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.panel-section-footer-button {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
margin: 0 -1px;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.panel-section-footer-button > .text-shortcut {
|
||||
color: #808080;
|
||||
font-family: "Lucida Grande", caption;
|
||||
font-size: .847em;
|
||||
}
|
||||
|
||||
.panel-section-footer-button:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.panel-section-footer-button:hover:active {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.panel-section-footer-button.default {
|
||||
background-color: #0996f8;
|
||||
box-shadow: 0 1px 0 #0670cc inset;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.panel-section-footer-button.default:hover {
|
||||
background-color: #0670cc;
|
||||
box-shadow: 0 1px 0 #005bab inset;
|
||||
}
|
||||
|
||||
.panel-section-footer-button.default:hover:active {
|
||||
background-color: #005bab;
|
||||
box-shadow: 0 1px 0 #004480 inset;
|
||||
}
|
||||
|
||||
.panel-section-footer-separator {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
width: 1px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* Panel Section - Tabs */
|
||||
.panel-section-tabs {
|
||||
color: #1a1a1a;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 41px;
|
||||
margin-bottom: -1px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.panel-section-tabs-button {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
margin: 0 -1px;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.panel-section-tabs-button:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.panel-section-tabs-button:hover:active {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.panel-section-tabs-button.select.browser-styleed {
|
||||
box-shadow: 0 -1px 0 #0670cc inset, 0 -4px 0 #0996f8 inset;
|
||||
color: #0996f8;
|
||||
}
|
||||
|
||||
.panel-section-tabs-button.select.browser-styleed:hover {
|
||||
color: #0670cc;
|
||||
}
|
||||
|
||||
.panel-section-tabs-separator {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
width: 1px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
module.exports = {
|
||||
sourceDir: "./build",
|
||||
artifactsDir: "./build/artifacts",
|
||||
build: {
|
||||
overwriteDest: true
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue