Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-30 10:39:46 +02:00
Code Issues Releases 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 8534ed292c
commit 5bfff3865f
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/CardModal/Tasks/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/CardModal/Tasks/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/CardModal/Tasks/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/CardModal/Tasks/Add.jsx
View file

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

23
client/src/components/CardModal/Tasks/Add.module.css
View file

@ -1,23 +0,0 @@
.controls {
clear: both !important;
margin-top: 6px !important;
}
.field {
background: #fff !important;
border: 1px solid rgba(9, 30, 66, 0.08) !important;
border-radius: 3px !important;
color: #17394d !important;
display: block !important;
line-height: 1.5 !important;
font-size: 14px !important;
margin-bottom: 4px !important;
overflow: hidden;
padding: 8px 12px !important;
resize: none !important;
}
.wrapper {
margin-top: 6px !important;
padding-bottom: 8px !important;
}

25
client/src/components/CardModal/Tasks/Add.module.scss Normal file
View file

@ -0,0 +1,25 @@
:global(#app) {
.controls {
clear: both;
margin-top: 6px;
}
.field {
background: #fff;
border: 1px solid rgba(9, 30, 66, 0.08);
border-radius: 3px;
color: #17394d;
display: block;
line-height: 1.5;
font-size: 14px;
margin-bottom: 4px;
overflow: hidden;
padding: 8px 12px;
resize: none;
}
.wrapper {
margin-top: 6px;
padding-bottom: 8px;
}
}

2
client/src/components/CardModal/Tasks/EditName.jsx
View file

@ -6,7 +6,7 @@ import { Button, Form, TextArea } from 'semantic-ui-react';
import { useClosableForm, useField } from '../../../hooks';
import styles from './EditName.module.css';
import styles from './EditName.module.scss';
const EditName = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
const [t] = useTranslation();

26
client/src/components/CardModal/Tasks/EditName.module.css
View file

@ -1,26 +0,0 @@
.controls {
clear: both;
margin-top: 6px !important;
}
.field {
background: #fff !important;
border: 1px solid rgba(9, 30, 66, 0.13) !important;
border-radius: 3px !important;
box-sizing: border-box !important;
color: #17394d !important;
display: block !important;
font-size: 14px !important;
line-height: 1.5 !important;
overflow: hidden !important;
padding: 8px 12px !important;
resize: none !important;
}
.field:focus {
outline: none;
}
.wrapper {
padding: 9px 32px 16px 40px;
}

28
client/src/components/CardModal/Tasks/EditName.module.scss Normal file
View file

@ -0,0 +1,28 @@
:global(#app) {
.controls {
clear: both;
margin-top: 6px;
}
.field {
background: #fff;
border: 1px solid rgba(9, 30, 66, 0.13);
border-radius: 3px;
box-sizing: border-box;
color: #17394d;
display: block;
font-size: 14px;
line-height: 1.5;
overflow: hidden;
padding: 8px 12px;
resize: none;
&:focus {
outline: none;
}
}
.wrapper {
padding: 9px 32px 16px 40px;
}
}

2
client/src/components/CardModal/Tasks/Item.jsx
View file

@ -6,7 +6,7 @@ import { Button, Checkbox, Icon } from 'semantic-ui-react';
import EditName from './EditName';
import ActionsPopup from './ActionsPopup';
import styles from './Item.module.css';
import styles from './Item.module.scss';
const Item = React.memo(({ name, isCompleted, isPersisted, onUpdate, onDelete }) => {
const editName = useRef(null);

73
client/src/components/CardModal/Tasks/Item.module.css
View file

@ -1,73 +0,0 @@
.button {
background: transparent !important;
box-shadow: none !important;
line-height: 28px !important;
margin: 0 !important;
min-height: auto !important;
opacity: 0;
padding: 0 !important;
position: absolute;
right: 2px;
top: 2px;
width: 28px;
}
.button:hover {
background: rgba(9, 30, 66, 0.08) !important;
}
.checkboxWrapper {
display: inline-block;
padding: 10px 15px 0px 8px;
position: absolute;
text-align: center;
top: 0;
left: 0;
vertical-align: top;
z-index: 2000;
line-height: 1;
height: 32px;
}
.content:hover {
background: rgba(9, 30, 66, 0.04);
}
.content:hover .target {
opacity: 1;
}
.task {
display: inline-block;
overflow: hidden;
overflow-wrap: break-word;
padding: 8px 0;
vertical-align: top;
width: 100%;
}
.taskCompleted {
text-decoration: line-through;
}
.text {
background: transparent;
border-radius: 3px;
color: #17394d;
cursor: pointer;
display: inline-block;
font-size: 15px;
line-height: 1.5;
min-height: 32px;
padding: 0 32px 0 40px;
width: 100%;
}
.wrapper {
border-radius: 3px;
margin-left: -40px;
min-height: 32px;
position: relative;
transition: all 0.14s ease-in;
width: calc(100% + 40px);
}

75
client/src/components/CardModal/Tasks/Item.module.scss Normal file
View file

@ -0,0 +1,75 @@
:global(#app) {
.button {
background: transparent;
box-shadow: none;
line-height: 28px;
margin: 0;
min-height: auto;
opacity: 0;
padding: 0;
position: absolute;
right: 2px;
top: 2px;
width: 28px;
&:hover {
background: rgba(9, 30, 66, 0.08);
}
}
.checkboxWrapper {
display: inline-block;
padding: 10px 15px 0px 8px;
position: absolute;
text-align: center;
top: 0;
left: 0;
vertical-align: top;
z-index: 2000;
line-height: 1;
height: 32px;
}
.content:hover {
background: rgba(9, 30, 66, 0.04);
.target {
opacity: 1;
}
}
.task {
display: inline-block;
overflow: hidden;
overflow-wrap: break-word;
padding: 8px 0;
vertical-align: top;
width: 100%;
}
.taskCompleted {
text-decoration: line-through;
}
.text {
background: transparent;
border-radius: 3px;
color: #17394d;
cursor: pointer;
display: inline-block;
font-size: 15px;
line-height: 1.5;
min-height: 32px;
padding: 0 32px 0 40px;
width: 100%;
}
.wrapper {
border-radius: 3px;
margin-left: -40px;
min-height: 32px;
position: relative;
transition: all 0.14s ease-in;
width: calc(100% + 40px);
}
}

2
client/src/components/CardModal/Tasks/Tasks.jsx
View file

@ -6,7 +6,7 @@ import { Progress } from 'semantic-ui-react';
import Item from './Item';
import Add from './Add';
import styles from './Tasks.module.css';
import styles from './Tasks.module.scss';
const Tasks = React.memo(({ items, onCreate, onUpdate, onDelete }) => {
const [t] = useTranslation();

30
client/src/components/CardModal/Tasks/Tasks.module.css
View file

@ -1,30 +0,0 @@
.progress {
margin: 0 0 16px !important;
}
.taskButton {
background: transparent;
border: none;
border-radius: 3px;
color: #6b808c;
cursor: pointer;
display: block;
margin-top: 6px;
min-height: 54px;
outline: none;
padding: 8px 12px;
position: relative;
text-align: left;
text-decoration: none;
width: 100%;
}
.taskButton:hover {
background: rgba(9, 30, 66, 0.04);
color: #092d42;
}
.taskButtonText {
position: absolute;
top: 12px;
}

32
client/src/components/CardModal/Tasks/Tasks.module.scss Normal file
View file

@ -0,0 +1,32 @@
:global(#app) {
.progress {
margin: 0 0 16px;
}
.taskButton {
background: transparent;
border: none;
border-radius: 3px;
color: #6b808c;
cursor: pointer;
display: block;
margin-top: 6px;
min-height: 54px;
outline: none;
padding: 8px 12px;
position: relative;
text-align: left;
text-decoration: none;
width: 100%;
&:hover {
background: rgba(9, 30, 66, 0.04);
color: #092d42;
}
}
.taskButtonText {
position: absolute;
top: 12px;
}
}