fivemoons/planka-zh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Background gradients, migrate from CSS to SCSS, remove !important

Browse Source
This commit is contained in:
Maksim Eltyshev
2020-05-29 19:31:19 +05:00
parent 196121bd38
commit ff95a12578
312 changed files with 4295 additions and 2989 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/List/ActionsPopup.jsx
View File

@@ -8,7 +8,7 @@ import { Popup } from '../../lib/custom-ui';
import { useSteps } from '../../hooks';
import DeleteStep from '../DeleteStep';
import styles from './ActionsPopup.module.css';
import styles from './ActionsPopup.module.scss';
const StepTypes = {
DELETE: 'DELETE',

9
client/src/components/List/ActionsPopup.module.css
View File

@@ -1,9 +0,0 @@
.menu {
margin: -7px -12px -5px !important;
width: calc(100% + 24px) !important;
}
.menuItem {
margin: 0 !important;
padding-left: 14px !important;
}

11
client/src/components/List/ActionsPopup.module.scss Normal file
View File

@@ -0,0 +1,11 @@
:global(#app) {
.menu {
margin: -7px -12px -5px;
width: calc(100% + 24px);
}
.menuItem {
margin: 0;
padding-left: 14px;
}
}

2
client/src/components/List/AddCard.jsx
View File

@@ -8,7 +8,7 @@ import { useDidUpdate, useToggle } from '../../lib/hooks';
import { useClosableForm, useForm } from '../../hooks';
import styles from './AddCard.module.css';
import styles from './AddCard.module.scss';
const DEFAULT_DATA = {
name: '',

30
client/src/components/List/AddCard.module.css
View File

@@ -1,30 +0,0 @@
.field {
border: none !important;
margin-bottom: 4px !important;
outline: none !important;
overflow: hidden !important;
padding: 0 !important;
resize: none !important;
width: 100% !important;
}
.fieldWrapper {
background: #fff !important;
border-radius: 3px !important;
box-shadow: 0 1px 0 #ccc !important;
margin-bottom: 8px !important;
min-height: 20px !important;
padding: 6px 8px 2px !important;
}
.submitButton {
vertical-align: top !important;
}
.wrapper {
padding-bottom: 8px !important;
}
.wrapperClosed {
display: none;
}

32
client/src/components/List/AddCard.module.scss Normal file
View File

@@ -0,0 +1,32 @@
:global(#app) {
.field {
border: none;
margin-bottom: 4px;
outline: none;
overflow: hidden;
padding: 0;
resize: none;
width: 100%;
}
.fieldWrapper {
background: #fff;
border-radius: 3px;
box-shadow: 0 1px 0 #ccc;
margin-bottom: 8px;
min-height: 20px;
padding: 6px 8px 2px;
}
.submitButton {
vertical-align: top;
}
.wrapper {
padding-bottom: 8px;
}
.wrapperClosed {
display: none;
}
}

2
client/src/components/List/EditName.jsx
View File

@@ -5,7 +5,7 @@ import { TextArea } from 'semantic-ui-react';
import { useField } from '../../hooks';
import styles from './EditName.module.css';
import styles from './EditName.module.scss';
const EditName = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
const [isOpened, setIsOpened] = useState(false);

22
client/src/components/List/EditName.module.css
View File

@@ -1,22 +0,0 @@
.field {
border: none;
border-color: #bbb !important;
border-radius: 3px !important;
color: #17394d !important;
display: block !important;
font-weight: bold !important;
line-height: 20px !important;
margin: 0 !important;
outline: none !important;
overflow: hidden !important;
padding: 4px 8px !important;
resize: none !important;
/* word-break: break-all !important; */
width: 100% !important;
}
.field:focus {
background: #fff !important;
border-color: #5ba4cf !important;
box-shadow: 0 0 0 1px #5ba4cf !important;
}

23
client/src/components/List/EditName.module.scss Normal file
View File

@@ -0,0 +1,23 @@
:global(#app) {
.field {
border: none;
border-color: #bbb;
border-radius: 3px;
color: #17394d;
display: block;
font-weight: bold;
line-height: 20px;
margin: 0;
outline: none;
overflow: hidden;
padding: 4px 8px;
resize: none;
width: 100%;
&:focus {
background: #fff;
border-color: #5ba4cf;
box-shadow: 0 0 0 1px #5ba4cf;
}
}
}

2
client/src/components/List/List.jsx
View File

@@ -12,7 +12,7 @@ import AddCard from './AddCard';
import ActionsPopup from './ActionsPopup';
import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg';
import styles from './List.module.css';
import styles from './List.module.scss';
const List = React.memo(
({ id, index, name, isPersisted, cardIds, onUpdate, onDelete, onCardCreate }) => {

142
client/src/components/List/List.module.css
View File

@@ -1,142 +0,0 @@
.addCardButton {
background: #dfe3e6 !important;
border: none !important;
border-radius: 0 0 3px 3px !important;
color: #6b808c !important;
cursor: pointer;
display: block !important;
fill: #6b808c !important;
flex: 0 0 auto;
font-weight: normal !important;
height: 36px !important;
outline: none !important;
padding: 8px !important;
text-align: left !important;
width: 100%;
}
.addCardButton:hover {
background: #c3cbd0 !important;
color: #17394d !important;
fill: #17394d !important;
}
.addCardButtonIcon {
height: 20px !important;
padding: 0.64px !important;
width: 20px !important;
}
.addCardButtonText {
display: inline-block !important;
font-size: 14px !important;
line-height: 20px !important;
margin-left: 2px;
vertical-align: top !important;
}
.cards {
flex: 1 1 auto;
min-height: 1px;
}
.header {
background: #dfe3e6 !important;
border-radius: 3px 3px 0 0 !important;
box-sizing: none;
flex: 0 0 auto;
margin-bottom: 0 !important;
outline: none !important;
padding: 6px 36px 4px 8px !important;
position: relative !important;
}
.header:hover .target {
opacity: 1 !important;
}
.headerButton {
background: none !important;
box-shadow: none !important;
color: #798d99 !important;
line-height: 32px !important;
margin: 0 !important;
opacity: 0;
padding: 0 !important;
position: absolute;
right: 2px;
top: 2px;
width: 32px;
}
.headerButton:hover {
background: rgba(9, 30, 66, 0.13) !important;
color: #516b7a !important;
}
.headerName {
background: transparent !important;
border-color: transparent !important;
border-radius: 3px !important;
color: #17394d !important;
font-weight: bold !important;
line-height: 20px !important;
margin: 0 !important;
max-height: 256px !important;
outline: none !important;
overflow: hidden !important;
overflow-wrap: break-word !important;
padding: 4px 8px !important;
resize: none !important;
width: 100% !important;
word-break: break-word !important;
}
.list {
background: #dfe3e6 !important;
box-sizing: border-box !important;
display: flex;
flex-direction: column;
padding: 0 8px !important;
position: relative !important;
white-space: normal !important;
width: 272px;
}
.listWrapper {
background: #dfe3e6;
max-height: calc(100vh - 300px);
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin;
width: 290px;
}
.listWrapper:hover {
width: 272px;
}
.listWrapper::-webkit-scrollbar {
width: 5px;
}
.listWrapper::-webkit-scrollbar-track {
background: transparent;
}
.listWrapper::-webkit-scrollbar-thumb {
border-radius: 3px;
}
.listWrapperFull {
max-height: calc(100vh - 264px);
}
.wrapper {
border-radius: 3px;
flex: 0 0 auto;
margin: 0 4px !important;
overflow: hidden;
vertical-align: top !important;
width: 272px !important;
}

144
client/src/components/List/List.module.scss Normal file
View File

@@ -0,0 +1,144 @@
:global(#app) {
.addCardButton {
background: #dfe3e6;
border: none;
border-radius: 0 0 3px 3px;
color: #6b808c;
cursor: pointer;
display: block;
fill: #6b808c;
flex: 0 0 auto;
font-weight: normal;
height: 36px;
outline: none;
padding: 8px;
text-align: left;
width: 100%;
&:hover {
background: #c3cbd0;
color: #17394d;
fill: #17394d;
}
}
.addCardButtonIcon {
height: 20px;
padding: 0.64px;
width: 20px;
}
.addCardButtonText {
display: inline-block;
font-size: 14px;
line-height: 20px;
margin-left: 2px;
vertical-align: top;
}
.cards {
flex: 1 1 auto;
min-height: 1px;
}
.header {
background: #dfe3e6;
border-radius: 3px 3px 0 0;
box-sizing: none;
flex: 0 0 auto;
margin-bottom: 0;
outline: none;
padding: 6px 36px 4px 8px;
position: relative;
&:hover .target {
opacity: 1;
}
}
.headerButton {
background: none;
box-shadow: none;
color: #798d99;
line-height: 32px;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
right: 2px;
top: 2px;
width: 32px;
&:hover {
background: rgba(9, 30, 66, 0.13);
color: #516b7a;
}
}
.headerName {
background: transparent;
border-color: transparent;
border-radius: 3px;
color: #17394d;
font-weight: bold;
line-height: 20px;
margin: 0;
max-height: 256px;
outline: none;
overflow: hidden;
overflow-wrap: break-word;
padding: 4px 8px;
resize: none;
width: 100%;
word-break: break-word;
}
.list {
background: #dfe3e6;
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 0 8px;
position: relative;
white-space: normal;
width: 272px;
}
.listWrapper {
background: #dfe3e6;
max-height: calc(100vh - 300px);
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin;
width: 290px;
&:hover {
width: 272px;
}
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
}
}
.listWrapperFull {
max-height: calc(100vh - 264px);
}
.wrapper {
border-radius: 3px;
flex: 0 0 auto;
margin: 0 4px;
overflow: hidden;
vertical-align: top;
width: 272px;
}
}