mirror of
https://github.com/IgnatZakalinsky/home-works.git
synced 2025-12-16 20:39:24 +00:00
hw6 styles
This commit is contained in:
@@ -64,7 +64,7 @@
|
||||
height: 100%;
|
||||
background-color: #06c;
|
||||
box-shadow: 0 5px 20px rgba(29, 33, 38, 0.03),
|
||||
0 1px 2px rgba(29, 33, 38, 0.1);
|
||||
0 1px 2px rgba(29, 33, 38, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 20px;
|
||||
@@ -123,7 +123,7 @@
|
||||
box-sizing: border-box;
|
||||
background: #f5f7fb;
|
||||
box-shadow: 0 5px 20px rgba(29, 33, 38, 0.03),
|
||||
0 1px 2px rgba(29, 33, 38, 0.1);
|
||||
0 1px 2px rgba(29, 33, 38, 0.1);
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
@@ -162,7 +162,7 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
.imageAndMessage img {
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
|
||||
@@ -7,13 +7,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.default {
|
||||
background: #06c;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: #cc1439;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
background: #004d99;
|
||||
@@ -21,6 +14,7 @@
|
||||
color: #002e5c;
|
||||
}
|
||||
|
||||
|
||||
.button {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
@@ -34,6 +28,21 @@
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background: transparent;
|
||||
border: 1px solid #0066CC;
|
||||
border-radius: 3px;
|
||||
color: #0066CC;
|
||||
}
|
||||
|
||||
.default {
|
||||
background: #06c;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: #cc1439;
|
||||
}
|
||||
|
||||
.button::after {
|
||||
display: block;
|
||||
content: '';
|
||||
@@ -60,13 +69,19 @@
|
||||
background: #ff1a47;
|
||||
}
|
||||
|
||||
.button:focus {
|
||||
.secondary:hover {
|
||||
background: #E5F0FA;
|
||||
}
|
||||
|
||||
|
||||
.default:active {
|
||||
background: #0059b3;
|
||||
}
|
||||
|
||||
.secondary:active {
|
||||
background: #C9E5FF;
|
||||
}
|
||||
|
||||
.red:active {
|
||||
background: #b31232;
|
||||
}
|
||||
|
||||
@@ -18,7 +18,13 @@ const SuperButton: React.FC<SuperButtonPropsType> = ({
|
||||
...restProps // все остальные пропсы попадут в объект restProps, там же будет children
|
||||
}) => {
|
||||
const finalClassName = `${s.button} ${
|
||||
disabled ? s.disabled : xType === 'red' ? s.red : s.default
|
||||
disabled
|
||||
? s.disabled
|
||||
: xType === 'red'
|
||||
? s.red
|
||||
: xType === 'secondary'
|
||||
? s.secondary
|
||||
: s.default
|
||||
} ${className}` // задачка на смешивание классов
|
||||
|
||||
return (
|
||||
|
||||
4
src/s2-homeworks/hw06/HW6.module.css
Normal file
4
src/s2-homeworks/hw06/HW6.module.css
Normal file
@@ -0,0 +1,4 @@
|
||||
.buttonsContainer {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import SuperEditableSpan from './common/c4-SuperEditableSpan/SuperEditableSpan'
|
||||
import { restoreState, saveState } from './localStorage/localStorage'
|
||||
import s2 from '../../s1-main/App.module.css'
|
||||
import SuperButton from '../hw04/common/c2-SuperButton/SuperButton'
|
||||
import s from './HW6.module.css'
|
||||
|
||||
const HW6 = () => {
|
||||
const [value, setValue] = useState<string>('')
|
||||
@@ -16,34 +17,40 @@ const HW6 = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div id={'hw6'} className={s2.hw}>
|
||||
<div id={'hw6'}>
|
||||
{/*<hr />*/}
|
||||
{/*можно убрать этот тег*/}
|
||||
|
||||
<div className={s2.hwTitle}>Homeworks #6</div>
|
||||
<div className={s2.hwTitle}>Homework #6</div>
|
||||
|
||||
{/*should work (должно работать)*/}
|
||||
<div>
|
||||
<SuperEditableSpan
|
||||
id={'hw6-spanable-input'}
|
||||
value={value}
|
||||
onChangeText={setValue}
|
||||
spanProps={{
|
||||
children: value ? undefined : 'enter text...',
|
||||
id: 'hw6-editable-span',
|
||||
}}
|
||||
/>
|
||||
<div className={s2.hw}>
|
||||
<div>
|
||||
<SuperEditableSpan
|
||||
id={'hw6-spanable-input'}
|
||||
value={value}
|
||||
onChangeText={setValue}
|
||||
spanProps={{
|
||||
children: value ? undefined : 'enter text...',
|
||||
id: 'hw6-editable-span',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className={s.buttonsContainer}>
|
||||
<SuperButton id={'hw6-save'} onClick={save}>
|
||||
save to ls
|
||||
</SuperButton>
|
||||
<SuperButton
|
||||
id={'hw6-restore'}
|
||||
onClick={restore}
|
||||
xType={'secondary'}
|
||||
>
|
||||
get from ls
|
||||
</SuperButton>
|
||||
</div>
|
||||
</div>
|
||||
<SuperButton id={'hw6-save'} onClick={save}>
|
||||
save to ls
|
||||
</SuperButton>
|
||||
<SuperButton id={'hw6-restore'} onClick={restore}>
|
||||
get from ls
|
||||
</SuperButton>
|
||||
|
||||
<hr />
|
||||
{/*<hr />*/}
|
||||
{/*можно убрать этот тег*/}
|
||||
<hr />
|
||||
{/*<hr />*/}
|
||||
{/*можно убрать этот тег*/}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
.span {
|
||||
display: inline-block;
|
||||
|
||||
height: 31px;
|
||||
padding-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
cursor: pointer;
|
||||
color: #77aaff;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
color: #0080FF;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@ import React, {
|
||||
} from 'react'
|
||||
import s from './SuperEditableSpan.module.css'
|
||||
import SuperInputText from '../../../hw04/common/c1-SuperInputText/SuperInputText'
|
||||
|
||||
import editIcon from './editIcon.svg'
|
||||
// тип пропсов обычного инпута
|
||||
type DefaultInputPropsType = DetailedHTMLProps<
|
||||
InputHTMLAttributes<HTMLInputElement>,
|
||||
@@ -77,7 +77,13 @@ const SuperEditableSpan: React.FC<SuperEditableSpanType> = ({
|
||||
{...restSpanProps}
|
||||
>
|
||||
{/*если нет захардкодженного текста для спана, то значение инпута*/}
|
||||
✎ {children || restProps.value}
|
||||
<img
|
||||
src={editIcon}
|
||||
width={'24px'}
|
||||
height={'24px'}
|
||||
alt={'edit'}
|
||||
/>{' '}
|
||||
{children || restProps.value}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 20H5C4.73478 20 4.48043 20.1054 4.29289 20.2929C4.10536 20.4804 4 20.7348 4 21C4 21.2652 4.10536 21.5196 4.29289 21.7071C4.48043 21.8946 4.73478 22 5 22H19C19.2652 22 19.5196 21.8946 19.7071 21.7071C19.8946 21.5196 20 21.2652 20 21C20 20.7348 19.8946 20.4804 19.7071 20.2929C19.5196 20.1054 19.2652 20 19 20Z" fill="#0080FF"/>
|
||||
<path d="M4.99981 17.9999H5.08981L9.25981 17.6199C9.71661 17.5744 10.1438 17.3731 10.4698 17.0499L19.4698 8.04986C19.8191 7.68083 20.0079 7.18837 19.9948 6.68039C19.9817 6.17242 19.7677 5.69037 19.3998 5.33986L16.6598 2.59986C16.3022 2.26395 15.8336 2.07122 15.3431 2.05831C14.8527 2.0454 14.3746 2.21323 13.9998 2.52986L4.99981 11.5299C4.67657 11.8558 4.47531 12.2831 4.42981 12.7399L3.99981 16.9099C3.98634 17.0563 4.00534 17.204 4.05547 17.3422C4.1056 17.4805 4.18561 17.606 4.28981 17.7099C4.38325 17.8025 4.49406 17.8759 4.6159 17.9256C4.73774 17.9754 4.8682 18.0006 4.99981 17.9999ZM15.2698 3.99986L17.9998 6.72986L15.9998 8.67986L13.3198 5.99986L15.2698 3.99986ZM6.36981 12.9099L11.9998 7.31986L14.6998 10.0199L9.09981 15.6199L6.09981 15.8999L6.36981 12.9099Z" fill="#0080FF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Reference in New Issue
Block a user