Add GlobalStyle component (#1638)
* Add GlobalStyle component * Move all react-component/styles -> styled-components
This commit is contained in:
Jaco Greeff
GitHub
parent
a9cd43c8f0
commit
3a9d67f398
@ -11,7 +11,7 @@ import { BareProps as Props } from '@polkadot/react-components/types';
|
||||
import React from 'react';
|
||||
import store from 'store';
|
||||
import styled from 'styled-components';
|
||||
import { media } from '@polkadot/react-components';
|
||||
import GlobalStyle from '@polkadot/react-components/styles';
|
||||
import Signer from '@polkadot/react-signer';
|
||||
|
||||
import ConnectingOverlay from './overlays/Connecting';
|
||||
@ -59,21 +59,24 @@ class Apps extends React.Component<Props, State> {
|
||||
const { isCollapsed, isMenu, menuOpen } = this.state;
|
||||
|
||||
return (
|
||||
<div className={`apps-Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu && 'fixed'} ${menuOpen && 'menu-open'} theme--default ${className}`}>
|
||||
{this.renderMenuBg()}
|
||||
<SideBar
|
||||
collapse={this.collapse}
|
||||
handleResize={this.handleResize}
|
||||
menuOpen={menuOpen}
|
||||
isCollapsed={isCollapsed}
|
||||
toggleMenu={this.toggleMenu}
|
||||
/>
|
||||
<Signer>
|
||||
<Content />
|
||||
</Signer>
|
||||
<ConnectingOverlay />
|
||||
<AccountsOverlay />
|
||||
</div>
|
||||
<>
|
||||
<GlobalStyle />
|
||||
<div className={`apps-Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu && 'fixed'} ${menuOpen && 'menu-open'} theme--default ${className}`}>
|
||||
{this.renderMenuBg()}
|
||||
<SideBar
|
||||
collapse={this.collapse}
|
||||
handleResize={this.handleResize}
|
||||
menuOpen={menuOpen}
|
||||
isCollapsed={isCollapsed}
|
||||
toggleMenu={this.toggleMenu}
|
||||
/>
|
||||
<Signer>
|
||||
<Content />
|
||||
</Signer>
|
||||
<ConnectingOverlay />
|
||||
<AccountsOverlay />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -179,13 +182,4 @@ export default styled(Apps)`
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
|
||||
header {
|
||||
margin-bottom: 1.4rem;
|
||||
text-align: center;
|
||||
|
||||
${media.TABLET`
|
||||
margin-bottom: 2rem;
|
||||
`}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
// import first, get the load done
|
||||
import settings from '@polkadot/ui-settings';
|
||||
|
||||
import 'semantic-ui-css/semantic.min.css';
|
||||
import '@polkadot/react-components/i18n';
|
||||
import '@polkadot/react-components/styles';
|
||||
|
||||
import queryString from 'query-string';
|
||||
import React, { Suspense } from 'react';
|
||||
|
||||
@ -12,7 +12,7 @@ type MediaCss = {
|
||||
|
||||
const media = Object
|
||||
.keys(ScreenSizes)
|
||||
.reduce((acc, label: any): MediaCss => {
|
||||
.reduce((acc: MediaCss, label: any): MediaCss => {
|
||||
const size: number = ScreenSizes[label] as any;
|
||||
|
||||
acc[label] = (values: TemplateStringsArray): unknown =>
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
// Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
// This software may be modified and distributed under the terms
|
||||
// of the Apache-2.0 license. See the LICENSE file for details.
|
||||
|
||||
import 'semantic-ui-css/semantic.min.css';
|
||||
|
||||
import './styles/semantic.css';
|
||||
import './styles/theme/default.css';
|
||||
|
||||
import './styles/app.css';
|
||||
import './styles/form.css';
|
||||
import './styles/media.css';
|
||||
import './styles/rx.css';
|
||||
import './styles/components.css';
|
||||
@ -1,145 +0,0 @@
|
||||
/* Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
/* This software may be modified and distributed under the terms
|
||||
/* of the Apache-2.0 license. See the LICENSE file for details. */
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#root {
|
||||
color: #4e4e4e;
|
||||
font-family: sans-serif;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
color: rgba(0, 0, 0, .6);
|
||||
font-family: sans-serif;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-transform: lowercase;
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
h3, h4, h5 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
label {
|
||||
box-sizing: border-box;
|
||||
color: rgba(78,78,78,.85);
|
||||
display: block;
|
||||
font-family: sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 100;
|
||||
/* margin: 0.25rem; */
|
||||
}
|
||||
|
||||
/*
|
||||
a:hover {
|
||||
color: #D75EA1;
|
||||
}
|
||||
*/
|
||||
|
||||
br {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main > section {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
header > article {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
article {
|
||||
background: white;
|
||||
border: 1px solid #f2f2f2;
|
||||
border-radius: 0.25rem;
|
||||
box-sizing: border-box;
|
||||
margin: 0.25rem;
|
||||
padding: 1.25rem;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
/* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */
|
||||
/* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
border-color: transparent; */
|
||||
}
|
||||
|
||||
&.padded {
|
||||
padding: 0.75rem 1rem;
|
||||
|
||||
> div {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: #fff6f6;
|
||||
border-color: #e0b4b4;
|
||||
color: #9f3a38;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: #ffffe0;
|
||||
border-color: #eeeeae;
|
||||
}
|
||||
|
||||
> ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
.ui.button:not(.disabled) {
|
||||
background: #eee !important;
|
||||
color: #555 !important;
|
||||
}
|
||||
|
||||
.ui.toggle.checkbox input:checked~.box:before,
|
||||
.ui.toggle.checkbox input:checked~label:before {
|
||||
background-color: #eee !important;
|
||||
}
|
||||
|
||||
.ui.button.mini {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
cursor: pointer;
|
||||
|
||||
&[open] > summary {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
> summary {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@ -1,108 +0,0 @@
|
||||
/* Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
/* This software may be modified and distributed under the terms
|
||||
/* of the Apache-2.0 license. See the LICENSE file for details. */
|
||||
|
||||
@import './partials/_variables.css';
|
||||
|
||||
.ui--output {
|
||||
background: #fefefe;
|
||||
border-radius: 4px;
|
||||
border: 1px dashed #eee;
|
||||
box-sizing: border-box;
|
||||
line-height: 1rem;
|
||||
margin: 0.25rem;
|
||||
padding: .75rem 1rem;
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
|
||||
&.error {
|
||||
background: #fff6f6;
|
||||
border-color: #e0b4b4;
|
||||
}
|
||||
|
||||
&.monospace {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.ui--output-button {
|
||||
position: absolute;
|
||||
top: 0.25rem;
|
||||
right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ui--Button-Group .button {
|
||||
border-radius: $small-corner !important;
|
||||
}
|
||||
|
||||
header .ui--Button-Group {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.input .ui--Button-Group {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button.ui.icon.iconButton {
|
||||
padding: 0em 0em .3em .3em !important;
|
||||
color: #2e86ab !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.editable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui--DropdownLinked.ui--row {
|
||||
.small .ui.selection.dropdown {
|
||||
border-right: none;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
min-width: 5rem;
|
||||
}
|
||||
|
||||
.large .ui.selection.dropdown {
|
||||
border-left: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ui--Input {
|
||||
&.disabled {
|
||||
overflow: hidden;
|
||||
|
||||
input {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.ui--SiDropdown {
|
||||
width: 6rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui--MaxButton {
|
||||
position: absolute;
|
||||
right: 6.5rem;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
text-transform: uppercase;
|
||||
padding: 0 0.5rem !important;
|
||||
border-radius: 0.3rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui--Static {
|
||||
min-width: 2rem; /* adjust width from normal dropdown sizing */
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.ui--Tooltip {
|
||||
text-align: center;
|
||||
z-index: 1002;
|
||||
max-width: 300px;
|
||||
}
|
||||
110
packages/react-components/src/styles/components.ts
Normal file
110
packages/react-components/src/styles/components.ts
Normal file
@ -0,0 +1,110 @@
|
||||
// Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
// This software may be modified and distributed under the terms
|
||||
// of the Apache-2.0 license. See the LICENSE file for details.
|
||||
|
||||
import { css } from 'styled-components';
|
||||
|
||||
export default css`
|
||||
.ui--output {
|
||||
background: #fefefe;
|
||||
border-radius: 4px;
|
||||
border: 1px dashed #eee;
|
||||
box-sizing: border-box;
|
||||
line-height: 1rem;
|
||||
margin: 0.25rem;
|
||||
padding: .75rem 1rem;
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
|
||||
&.error {
|
||||
background: #fff6f6;
|
||||
border-color: #e0b4b4;
|
||||
}
|
||||
|
||||
&.monospace {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.ui--output-button {
|
||||
position: absolute;
|
||||
top: 0.25rem;
|
||||
right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ui--Button-Group .button {
|
||||
border-radius: .28571429rem !important;
|
||||
}
|
||||
|
||||
header .ui--Button-Group {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.input .ui--Button-Group {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button.ui.icon.iconButton {
|
||||
padding: 0em 0em .3em .3em !important;
|
||||
color: #2e86ab !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.editable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui--DropdownLinked.ui--row {
|
||||
.small .ui.selection.dropdown {
|
||||
border-right: none;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
min-width: 5rem;
|
||||
}
|
||||
|
||||
.large .ui.selection.dropdown {
|
||||
border-left: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ui--Input {
|
||||
&.disabled {
|
||||
overflow: hidden;
|
||||
|
||||
input {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.ui--SiDropdown {
|
||||
width: 6rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui--MaxButton {
|
||||
position: absolute;
|
||||
right: 6.5rem;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
text-transform: uppercase;
|
||||
padding: 0 0.5rem !important;
|
||||
border-radius: 0.3rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui--Static {
|
||||
min-width: 2rem; /* adjust width from normal dropdown sizing */
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.ui--Tooltip {
|
||||
text-align: center;
|
||||
z-index: 1002;
|
||||
max-width: 300px;
|
||||
}
|
||||
`;
|
||||
@ -1,71 +0,0 @@
|
||||
/* Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
/* This software may be modified and distributed under the terms
|
||||
/* of the Apache-2.0 license. See the LICENSE file for details. */
|
||||
|
||||
.ui--grid,
|
||||
.ui--row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui--grid,
|
||||
.ui--row {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui--grid > div,
|
||||
.ui--row > div {
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui--grid > div:not(.grow):not(.shrink),
|
||||
.ui--row > div:not(.grow):not(.shrink) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui--grid > div:not(.shrink),
|
||||
.ui--grid > div.full,
|
||||
.ui--row > div.full {
|
||||
flex: 0 100%;
|
||||
}
|
||||
|
||||
.ui--grid > div.shrink,
|
||||
.ui--row > div.shrink {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.ui--grid > div.grow,
|
||||
.ui--row > div.grow {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.ui--grid > div.large,
|
||||
.ui--row > div.large {
|
||||
flex: 0 75%;
|
||||
}
|
||||
|
||||
.ui--grid > div.medium,
|
||||
.ui--row > div.medium {
|
||||
flex: 0 50%;
|
||||
}
|
||||
|
||||
.ui--grid > div.small,
|
||||
.ui--row > div.small {
|
||||
flex: 0 25%;
|
||||
}
|
||||
|
||||
.ui--grid > div.sixty6,
|
||||
.ui--row > div.sixty6 {
|
||||
flex: 0 66.66%;
|
||||
}
|
||||
|
||||
.ui--grid > div.thirty3,
|
||||
.ui--row > div.thirty3 {
|
||||
flex: 0 33.33%;
|
||||
}
|
||||
75
packages/react-components/src/styles/form.ts
Normal file
75
packages/react-components/src/styles/form.ts
Normal file
@ -0,0 +1,75 @@
|
||||
// Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
// This software may be modified and distributed under the terms
|
||||
// of the Apache-2.0 license. See the LICENSE file for details.
|
||||
|
||||
import { css } from 'styled-components';
|
||||
|
||||
export default css`
|
||||
.ui--grid,
|
||||
.ui--row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui--grid,
|
||||
.ui--row {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui--grid > div,
|
||||
.ui--row > div {
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui--grid > div:not(.grow):not(.shrink),
|
||||
.ui--row > div:not(.grow):not(.shrink) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui--grid > div:not(.shrink),
|
||||
.ui--grid > div.full,
|
||||
.ui--row > div.full {
|
||||
flex: 0 100%;
|
||||
}
|
||||
|
||||
.ui--grid > div.shrink,
|
||||
.ui--row > div.shrink {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.ui--grid > div.grow,
|
||||
.ui--row > div.grow {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.ui--grid > div.large,
|
||||
.ui--row > div.large {
|
||||
flex: 0 75%;
|
||||
}
|
||||
|
||||
.ui--grid > div.medium,
|
||||
.ui--row > div.medium {
|
||||
flex: 0 50%;
|
||||
}
|
||||
|
||||
.ui--grid > div.small,
|
||||
.ui--row > div.small {
|
||||
flex: 0 25%;
|
||||
}
|
||||
|
||||
.ui--grid > div.sixty6,
|
||||
.ui--row > div.sixty6 {
|
||||
flex: 0 66.66%;
|
||||
}
|
||||
|
||||
.ui--grid > div.thirty3,
|
||||
.ui--row > div.thirty3 {
|
||||
flex: 0 33.33%;
|
||||
}
|
||||
`;
|
||||
167
packages/react-components/src/styles/index.ts
Normal file
167
packages/react-components/src/styles/index.ts
Normal file
@ -0,0 +1,167 @@
|
||||
// Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
// This software may be modified and distributed under the terms
|
||||
// of the Apache-2.0 license. See the LICENSE file for details.
|
||||
|
||||
import { createGlobalStyle } from 'styled-components';
|
||||
|
||||
import media from '../media';
|
||||
import cssComponents from './components';
|
||||
import cssForm from './form';
|
||||
import cssMedia from './media';
|
||||
import cssRx from './rx';
|
||||
import cssSemantic from './semantic';
|
||||
import cssTheme from './theme';
|
||||
|
||||
export default createGlobalStyle`
|
||||
#root {
|
||||
color: #4e4e4e;
|
||||
font-family: sans-serif;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
article {
|
||||
background: white;
|
||||
border: 1px solid #f2f2f2;
|
||||
border-radius: 0.25rem;
|
||||
box-sizing: border-box;
|
||||
margin: 0.25rem;
|
||||
padding: 1.25rem;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
/* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */
|
||||
/* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
border-color: transparent; */
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
.ui.button:not(.disabled) {
|
||||
background: #eee !important;
|
||||
color: #555 !important;
|
||||
}
|
||||
|
||||
.ui.toggle.checkbox input:checked~.box:before,
|
||||
.ui.toggle.checkbox input:checked~label:before {
|
||||
background-color: #eee !important;
|
||||
}
|
||||
|
||||
.ui.button.mini {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
> ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: #fff6f6;
|
||||
border-color: #e0b4b4;
|
||||
color: #9f3a38;
|
||||
}
|
||||
|
||||
&.padded {
|
||||
padding: 0.75rem 1rem;
|
||||
|
||||
> div {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: #ffffe0;
|
||||
border-color: #eeeeae;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
br {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
details {
|
||||
cursor: pointer;
|
||||
|
||||
&[open] > summary {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
> summary {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
color: rgba(0, 0, 0, .6);
|
||||
font-family: sans-serif;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-transform: lowercase;
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
h3, h4, h5 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 1.4rem;
|
||||
text-align: center;
|
||||
|
||||
${media.TABLET`
|
||||
margin-bottom: 2rem;
|
||||
`}
|
||||
|
||||
> article {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
box-sizing: border-box;
|
||||
color: rgba(78,78,78,.85);
|
||||
display: block;
|
||||
font-family: sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: 100vh;
|
||||
|
||||
> section {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Add our overrides */
|
||||
${cssSemantic}
|
||||
${cssTheme}
|
||||
${cssForm}
|
||||
${cssMedia}
|
||||
${cssRx}
|
||||
${cssComponents}
|
||||
`;
|
||||
@ -1,90 +0,0 @@
|
||||
/* Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
/* This software may be modified and distributed under the terms
|
||||
/* of the Apache-2.0 license. See the LICENSE file for details. */
|
||||
|
||||
/* block by default, flex as per media queries below */
|
||||
.ui--flex-large,
|
||||
.ui--flex-medium,
|
||||
.ui--flex-small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* hide all by default, add as per media queries below */
|
||||
.ui--media-large,
|
||||
.ui--media-medium,
|
||||
.ui--media-small {
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
td.ui--media-large,
|
||||
td.ui--media-medium,
|
||||
td.ui--media-small,
|
||||
th.ui--media-large,
|
||||
th.ui--media-medium,
|
||||
th.ui--media-small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1281px) {
|
||||
.ui--flex-large {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ui--media-large {
|
||||
height: auto;
|
||||
visibility: visible;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
td.ui--media-large,
|
||||
th.ui--media-large {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.ui--flex-medium {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ui--media-medium {
|
||||
height: auto;
|
||||
visibility: visible;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
td.ui--media-medium,
|
||||
th.ui--media-medium {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.ui--flex-small {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ui--media-small {
|
||||
height: auto;
|
||||
visibility: visible;
|
||||
width: auto;
|
||||
|
||||
}
|
||||
|
||||
td.ui--media-small,
|
||||
th.ui--media-small {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
@media (max-width: 991px) {
|
||||
.ui.menu.tabular {
|
||||
padding-left: 5.2rem !important;
|
||||
}
|
||||
}
|
||||
94
packages/react-components/src/styles/media.ts
Normal file
94
packages/react-components/src/styles/media.ts
Normal file
@ -0,0 +1,94 @@
|
||||
// Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
// This software may be modified and distributed under the terms
|
||||
// of the Apache-2.0 license. See the LICENSE file for details.
|
||||
|
||||
import { css } from 'styled-components';
|
||||
|
||||
export default css`
|
||||
/* block by default, flex as per media queries below */
|
||||
.ui--flex-large,
|
||||
.ui--flex-medium,
|
||||
.ui--flex-small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* hide all by default, add as per media queries below */
|
||||
.ui--media-large,
|
||||
.ui--media-medium,
|
||||
.ui--media-small {
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
td.ui--media-large,
|
||||
td.ui--media-medium,
|
||||
td.ui--media-small,
|
||||
th.ui--media-large,
|
||||
th.ui--media-medium,
|
||||
th.ui--media-small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1281px) {
|
||||
.ui--flex-large {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ui--media-large {
|
||||
height: auto;
|
||||
visibility: visible;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
td.ui--media-large,
|
||||
th.ui--media-large {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.ui--flex-medium {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ui--media-medium {
|
||||
height: auto;
|
||||
visibility: visible;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
td.ui--media-medium,
|
||||
th.ui--media-medium {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.ui--flex-small {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ui--media-small {
|
||||
height: auto;
|
||||
visibility: visible;
|
||||
width: auto;
|
||||
|
||||
}
|
||||
|
||||
td.ui--media-small,
|
||||
th.ui--media-small {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
@media (max-width: 991px) {
|
||||
.ui.menu.tabular {
|
||||
padding-left: 5.2rem !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -2,4 +2,10 @@
|
||||
/* This software may be modified and distributed under the terms
|
||||
/* of the Apache-2.0 license. See the LICENSE file for details. */
|
||||
|
||||
$small-corner: .28571429rem;
|
||||
import theme from 'styled-theming';
|
||||
|
||||
export const primaryColor = theme('theme', {
|
||||
substrate: '#DB2828',
|
||||
polkadot: '#E6007A',
|
||||
default: 'darkorange'
|
||||
});
|
||||
@ -1,8 +0,0 @@
|
||||
/* Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
/* This software may be modified and distributed under the terms
|
||||
/* of the Apache-2.0 license. See the LICENSE file for details. */
|
||||
|
||||
.rx--updated {
|
||||
background: #ffffe0 !important;
|
||||
transition: all 0.7s ease-out;
|
||||
}
|
||||
12
packages/react-components/src/styles/rx.ts
Normal file
12
packages/react-components/src/styles/rx.ts
Normal file
@ -0,0 +1,12 @@
|
||||
// Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
// This software may be modified and distributed under the terms
|
||||
// of the Apache-2.0 license. See the LICENSE file for details.
|
||||
|
||||
import { css } from 'styled-components';
|
||||
|
||||
export default css`
|
||||
.rx--updated {
|
||||
background: #ffffe0 !important;
|
||||
transition: all 0.7s ease-out;
|
||||
}
|
||||
`;
|
||||
@ -1,204 +0,0 @@
|
||||
/* Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
/* This software may be modified and distributed under the terms
|
||||
/* of the Apache-2.0 license. See the LICENSE file for details. */
|
||||
|
||||
@import 'partials/_variables.css';
|
||||
|
||||
.ui.hidden.divider {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.ui.dropdown {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.dropdown,
|
||||
.ui.input {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown,
|
||||
.ui.input > input {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ui.dropdown {
|
||||
&.disabled {
|
||||
background: transparent;
|
||||
border-color: #eee;
|
||||
border-style: dashed;
|
||||
opacity: 1;
|
||||
|
||||
.dropdown.icon {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .text {
|
||||
min-height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .item.header.disabled {
|
||||
margin: 1em 0 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .item.header.disabled:hover,
|
||||
.ui.dropdown .menu > .item.header.disabled.selected {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.ui.input {
|
||||
width: 100%;
|
||||
|
||||
&.disabled {
|
||||
opacity: 1;
|
||||
|
||||
input {
|
||||
background: #fefefe;
|
||||
border-color: #eee;
|
||||
/* border-color: transparent; */
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.ui.primary.buttons .ui.button {
|
||||
background: #eee;
|
||||
border-color: transparent;
|
||||
border-left-color: transparent;
|
||||
color: #4e4e4e;
|
||||
|
||||
.dropdown.icon {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> input {
|
||||
/* from .ui.fluid.input > input */
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.inverted.dimmer {
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
padding: 0 1rem 1rem;
|
||||
}
|
||||
|
||||
.ui.label:not(.ui--Bubble) {
|
||||
background: transparent;
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ui.modal {
|
||||
background: #fafafa /* #fff */;
|
||||
color: #4e4e4e;
|
||||
font-family: sans-serif;
|
||||
|
||||
> .actions,
|
||||
> .content {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
> .actions {
|
||||
border-top: none;
|
||||
text-align: right;
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
> .header:not(.ui) {
|
||||
background: #f5f5f5;
|
||||
font-size: 1.25rem !important;
|
||||
font-weight: normal;
|
||||
line-height: 1.25rem;
|
||||
padding: 1rem 1.5rem;
|
||||
|
||||
> label {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
> :first-child:not(.icon) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 1.5em 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.page.modals.transition.visible {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.ui.progress {
|
||||
&.tiny {
|
||||
font-size: .5rem;
|
||||
}
|
||||
|
||||
.bar {
|
||||
min-width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.secondary.vertical.menu > .item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui[class*="left icon"].input.left.icon > input {
|
||||
padding-left: 4rem !important;
|
||||
}
|
||||
|
||||
.ui[class*="left icon"].input.left.icon > i.icon.big {
|
||||
left: -7px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.button:disabled,
|
||||
.ui.buttons .disabled.button,
|
||||
.ui.disabled.active.button,
|
||||
.ui.disabled.button,
|
||||
.ui.disabled.button:hover {
|
||||
opacity: 0.2 !important;
|
||||
}
|
||||
|
||||
/* modals aligned to top, not center */
|
||||
.ui.dimmer {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.ui.menu.tabular {
|
||||
border-color: #e6e6e6;
|
||||
/* break out of the wrapping main padding */
|
||||
margin: -1em -2em 0;
|
||||
overflow-x: scroll;
|
||||
padding: 2em 2em 0 2em;
|
||||
transition: padding-left 0.2s linear 0.4s;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.item {
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
top: -1px;
|
||||
|
||||
&.active {
|
||||
background: none; /* #fafafa */;
|
||||
border-bottom: 2px solid #db2828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* remove the default white background, settigns app has it as part of Tab */
|
||||
.ui.segment {
|
||||
background: transparent;
|
||||
}
|
||||
204
packages/react-components/src/styles/semantic.ts
Normal file
204
packages/react-components/src/styles/semantic.ts
Normal file
@ -0,0 +1,204 @@
|
||||
// Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
// This software may be modified and distributed under the terms
|
||||
// of the Apache-2.0 license. See the LICENSE file for details.
|
||||
|
||||
import { css } from 'styled-components';
|
||||
|
||||
export default css`
|
||||
.ui.hidden.divider {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.ui.dropdown {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui.dropdown,
|
||||
.ui.input {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.ui.selection.dropdown,
|
||||
.ui.input > input {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ui.dropdown {
|
||||
&.disabled {
|
||||
background: transparent;
|
||||
border-color: #eee;
|
||||
border-style: dashed;
|
||||
opacity: 1;
|
||||
|
||||
.dropdown.icon {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .text {
|
||||
min-height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .item.header.disabled {
|
||||
margin: 1em 0 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .item.header.disabled:hover,
|
||||
.ui.dropdown .menu > .item.header.disabled.selected {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.ui.input {
|
||||
width: 100%;
|
||||
|
||||
&.disabled {
|
||||
opacity: 1;
|
||||
|
||||
input {
|
||||
background: #fefefe;
|
||||
border-color: #eee;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.ui.primary.buttons .ui.button {
|
||||
background: #eee;
|
||||
border-color: transparent;
|
||||
border-left-color: transparent;
|
||||
color: #4e4e4e;
|
||||
|
||||
.dropdown.icon {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> input {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.inverted.dimmer {
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
padding: 0 1rem 1rem;
|
||||
}
|
||||
|
||||
.ui.label:not(.ui--Bubble) {
|
||||
background: transparent;
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ui.modal {
|
||||
background: #fafafa;
|
||||
color: #4e4e4e;
|
||||
font-family: sans-serif;
|
||||
|
||||
> .actions,
|
||||
> .content {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
> .actions {
|
||||
border-top: none;
|
||||
text-align: right;
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
> .header:not(.ui) {
|
||||
background: #f5f5f5;
|
||||
font-size: 1.25rem !important;
|
||||
font-weight: normal;
|
||||
line-height: 1.25rem;
|
||||
padding: 1rem 1.5rem;
|
||||
|
||||
> label {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
> :first-child:not(.icon) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 1.5em 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.page.modals.transition.visible {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.ui.progress {
|
||||
&.tiny {
|
||||
font-size: .5rem;
|
||||
}
|
||||
|
||||
.bar {
|
||||
min-width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.secondary.vertical.menu > .item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui[class*="left icon"].input.left.icon > input {
|
||||
padding-left: 4rem !important;
|
||||
}
|
||||
|
||||
.ui[class*="left icon"].input.left.icon > i.icon.big {
|
||||
left: -7px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.button:disabled,
|
||||
.ui.buttons .disabled.button,
|
||||
.ui.disabled.active.button,
|
||||
.ui.disabled.button,
|
||||
.ui.disabled.button:hover {
|
||||
opacity: 0.2 !important;
|
||||
}
|
||||
|
||||
/* modals aligned to top, not center */
|
||||
.ui.dimmer {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.ui.menu.tabular {
|
||||
border-color: #e6e6e6;
|
||||
/* break out of the wrapping main padding */
|
||||
margin: -1em -2em 0;
|
||||
overflow-x: scroll;
|
||||
padding: 2em 2em 0 2em;
|
||||
transition: padding-left 0.2s linear 0.4s;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.item {
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
top: -1px;
|
||||
|
||||
&.active {
|
||||
background: none;;
|
||||
border-bottom: 2px solid #db2828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* remove the default white background, settings app has it as part of Tab */
|
||||
.ui.segment {
|
||||
background: transparent;
|
||||
}
|
||||
`;
|
||||
@ -1,11 +1,107 @@
|
||||
/* Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
/* This software may be modified and distributed under the terms
|
||||
/* of the Apache-2.0 license. See the LICENSE file for details. */
|
||||
// Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
// This software may be modified and distributed under the terms
|
||||
// of the Apache-2.0 license. See the LICENSE file for details.
|
||||
|
||||
import theme from 'styled-theming';
|
||||
import { css } from 'styled-components';
|
||||
|
||||
export const primaryColor = theme('theme', {
|
||||
substrate: '#DB2828',
|
||||
polkadot: '#E6007A',
|
||||
default: 'darkorange'
|
||||
});
|
||||
/* default buttons, dark gray */
|
||||
const colorBtnDefault = '#666';
|
||||
|
||||
/* highlighted buttons, orange */
|
||||
const colorBtnHighlight = '#f19135';
|
||||
|
||||
/* primary buttons, blue */
|
||||
const colorBtnPrimary = '#2e86ab';
|
||||
|
||||
/* button text color */
|
||||
const colorBtnText = '#f9f9f9';
|
||||
|
||||
export default css`
|
||||
.theme--default {
|
||||
a {
|
||||
color: ${colorBtnPrimary};
|
||||
|
||||
&:hover,
|
||||
a:visited {
|
||||
color: ${colorBtnPrimary};
|
||||
}
|
||||
}
|
||||
|
||||
.ui.button,
|
||||
.ui.buttons .button {
|
||||
background-color: ${colorBtnDefault};
|
||||
color: ${colorBtnText};
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: ${colorBtnDefault};
|
||||
color: ${colorBtnText};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.basic.negative.button {
|
||||
box-shadow: 0 0 0 1px ${colorBtnHighlight} inset !important;
|
||||
color: ${colorBtnHighlight} !important;
|
||||
}
|
||||
|
||||
.ui.negative.button,
|
||||
.ui.buttons .negative.button {
|
||||
background-color: ${colorBtnHighlight};
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: ${colorBtnHighlight};
|
||||
}
|
||||
}
|
||||
|
||||
.ui.primary.button,
|
||||
.ui.buttons .primary.button
|
||||
/*, .ui.primary.buttons .button (for dropdowns) */ {
|
||||
background-color: ${colorBtnPrimary};
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: ${colorBtnPrimary};
|
||||
}
|
||||
}
|
||||
|
||||
.ui.blue.progress .bar {
|
||||
background-color: ${colorBtnHighlight};
|
||||
}
|
||||
|
||||
.ui.modal > .header:not(.ui) {
|
||||
border-bottom-color: ${colorBtnHighlight};
|
||||
}
|
||||
|
||||
.ui.menu.tabular .item.active {
|
||||
border-bottom-color: ${colorBtnHighlight};
|
||||
}
|
||||
|
||||
/* this is for dropdown buttons */
|
||||
.ui.buttons .ui.button.selection.visible.dropdown {
|
||||
&:hover {
|
||||
/* reset opacity, this is now open */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> .text:not(.default) {
|
||||
color: ${colorBtnText};
|
||||
}
|
||||
}
|
||||
|
||||
.ui.toggle.checkbox input:checked~.box:before,
|
||||
.ui.toggle.checkbox input:checked~label:before {
|
||||
background-color: ${colorBtnHighlight} !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -1,52 +0,0 @@
|
||||
/* Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
/* This software may be modified and distributed under the terms
|
||||
/* of the Apache-2.0 license. See the LICENSE file for details. */
|
||||
|
||||
$green: #77c689;
|
||||
$orange: #f6a46e;
|
||||
$red: #e97f7f;
|
||||
|
||||
$pewter-blue: #89acb4;
|
||||
$dark-sky-blue: #96bdc6;
|
||||
|
||||
$silver-chalice: #a1b1b5;
|
||||
$cadet-grey: #98aaae;
|
||||
|
||||
$wild-orchid: #d75ea1;
|
||||
$wild-orchid-hl: #df7eb3;
|
||||
|
||||
$middle-purple: #e189ba;
|
||||
|
||||
$light-slate-gray: #718d94;
|
||||
|
||||
$moonstone-blue: #64bebe;
|
||||
$verdigris: #5badad;
|
||||
|
||||
$primary-color: #2e86ab;
|
||||
$primary-color-hl: #579ebb;
|
||||
/*$primary-color: #d75ea1;
|
||||
$primary-color-hl: #d24a95;*/
|
||||
$secondary-color: #2e86ab;
|
||||
$secondary-color-hl: #579ebb;
|
||||
|
||||
/*
|
||||
$anchor-color: #d75ea1;
|
||||
$anchor-color-hover: #d24a95;
|
||||
*/
|
||||
$anchor-color: $secondary-color;
|
||||
$anchor-color-hover: $secondary-color-hl;
|
||||
|
||||
$button-primary-color: $primary-color;
|
||||
$button-primary-color-hover: $primary-color-hl;
|
||||
|
||||
$button-color: $secondary-color;
|
||||
$button-color-hover: $secondary-color-hl;
|
||||
|
||||
$button-positive-color: $moonstone-blue;
|
||||
$button-positive-color-hover: $verdigris;
|
||||
|
||||
$button-negative-color: $wild-orchid;
|
||||
$button-negative-color-hover: $middle-purple;
|
||||
|
||||
$progress-bar-color: $wild-orchid;
|
||||
$nav-link: $wild-orchid;
|
||||
@ -1,100 +0,0 @@
|
||||
/* Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
/* This software may be modified and distributed under the terms
|
||||
/* of the Apache-2.0 license. See the LICENSE file for details. */
|
||||
|
||||
/* default buttons, dark gray */
|
||||
$default: #666;
|
||||
|
||||
/* highlighted buttons, orange */
|
||||
$highlight: #f19135;
|
||||
|
||||
/* primary buttons, blue */
|
||||
$primary: #2e86ab;
|
||||
|
||||
.theme--default {
|
||||
a {
|
||||
color: $primary;
|
||||
|
||||
&:hover,
|
||||
a:visited {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.button,
|
||||
.ui.buttons .button {
|
||||
background-color: $default;
|
||||
color: #f9f9f9;
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $default;
|
||||
color: #f9f9f9;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.basic.negative.button {
|
||||
box-shadow: 0 0 0 1px $highlight inset !important;
|
||||
color: $highlight !important;
|
||||
}
|
||||
|
||||
.ui.negative.button,
|
||||
.ui.buttons .negative.button {
|
||||
background-color: $highlight;
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $highlight;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.primary.button,
|
||||
.ui.buttons .primary.button
|
||||
/*, .ui.primary.buttons .button (for dropdowns) */ {
|
||||
background-color: $primary;
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.blue.progress .bar {
|
||||
background-color: $highlight;
|
||||
}
|
||||
|
||||
.ui.modal > .header:not(.ui) {
|
||||
border-bottom-color: $highlight;
|
||||
}
|
||||
|
||||
.ui.menu.tabular .item.active {
|
||||
border-bottom-color: $highlight;
|
||||
}
|
||||
|
||||
/* this is for dropdown buttons */
|
||||
.ui.buttons .ui.button.selection.visible.dropdown {
|
||||
&:hover {
|
||||
/* reset opacity, this is now open */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> .text:not(.default) {
|
||||
color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.toggle.checkbox input:checked~.box:before,
|
||||
.ui.toggle.checkbox input:checked~label:before {
|
||||
background-color: $highlight !important;
|
||||
}
|
||||
}
|
||||
@ -1,116 +0,0 @@
|
||||
/* Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
/* This software may be modified and distributed under the terms
|
||||
/* of the Apache-2.0 license. See the LICENSE file for details. */
|
||||
|
||||
@import './_colors-polkadot.css';
|
||||
|
||||
.theme--polkadot {
|
||||
.ui.primary.button,
|
||||
.ui.buttons .primary.button,
|
||||
.ui.primary.button:active,
|
||||
.ui.buttons .primary.button:active,
|
||||
.ui.primary.button:focus,
|
||||
.ui.buttons .primary.button:focus {
|
||||
background-color: $button-primary-color;
|
||||
}
|
||||
|
||||
.ui.primary.button:hover,
|
||||
.ui.buttons .primary.button:hover {
|
||||
background-color: $button-primary-color-hover;
|
||||
}
|
||||
|
||||
.ui.toggle.checkbox input:checked~.box:before,
|
||||
.ui.toggle.checkbox input:checked~label:before {
|
||||
background-color: $button-primary-color !important;
|
||||
}
|
||||
|
||||
.ui.basic.negative.button {
|
||||
box-shadow: 0 0 0 1px rgba(215, 94, 161, 1) inset !important;
|
||||
color: rgba(215, 94, 161, 1) !important;
|
||||
}
|
||||
|
||||
.ui.button,
|
||||
.ui.buttons .button,
|
||||
.ui.button:active,
|
||||
.ui.buttons .button:active,
|
||||
.ui.button:focus,
|
||||
.ui.buttons .button:focus{
|
||||
background-color: $button-color;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ui.positive.button,
|
||||
.ui.buttons .positive.button,
|
||||
.ui.positive.button:active,
|
||||
.ui.buttons .positive.button:active,
|
||||
.ui.positive.button:focus,
|
||||
.ui.buttons .positive.button:focus {
|
||||
background-color: $button-positive-color;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ui.positive.button:hover,
|
||||
.ui.buttons .positive.button:hover {
|
||||
background-color: $button-positive-color-hover;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ui.button:hover,
|
||||
.ui.buttons .button:hover {
|
||||
background-color: $button-color-hover;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ui.negative.button,
|
||||
.ui.buttons .negative.button,
|
||||
.ui.negative.button:focus,
|
||||
.ui.buttons .negative.button:focus,
|
||||
.ui.negative.button:active,
|
||||
.ui.buttons .negative.button:active {
|
||||
background-color: $button-negative-color;
|
||||
}
|
||||
|
||||
.ui.negative.button:hover,
|
||||
.ui.buttons .negative.button:hover {
|
||||
background-color: $button-negative-color-hover;
|
||||
}
|
||||
|
||||
.ui.blue.progress .bar {
|
||||
background-color: $progress-bar-color;
|
||||
}
|
||||
|
||||
.ui.modal > .header:not(.ui) {
|
||||
border-bottom-color: $progress-bar-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $anchor-color;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $anchor-color-hover;
|
||||
}
|
||||
|
||||
.ui.green.progress .bar {
|
||||
background-color: $green;
|
||||
}
|
||||
|
||||
.ui.orange.progress .bar {
|
||||
background-color: $orange;
|
||||
}
|
||||
|
||||
.ui.red.progress .bar {
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
a.apps--SideBar-Item-NavLink-active {
|
||||
color: $nav-link;
|
||||
&:hover {
|
||||
color: $nav-link;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.menu.tabular .item.active {
|
||||
border-bottom: 2px solid rgba(215, 94, 161, 1);
|
||||
}
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
/* Copyright 2017-2019 @polkadot/react-components authors & contributors
|
||||
/* This software may be modified and distributed under the terms
|
||||
/* of the Apache-2.0 license. See the LICENSE file for details. */
|
||||
|
||||
.theme--substrate {
|
||||
}
|
||||
@ -2,8 +2,6 @@
|
||||
/* This software may be modified and distributed under the terms
|
||||
/* of the Apache-2.0 license. See the LICENSE file for details. */
|
||||
|
||||
@import '../../react-components/src/styles/partials/_variables.css';
|
||||
|
||||
.ui--signer-Signer-Decoded {
|
||||
align-content: center;
|
||||
display: flex;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user