ershisan99/home-works
1
0
Fork 0
mirror of https://github.com/IgnatZakalinsky/home-works.git synced 2025-12-16 20:39:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

hw7 styles

Browse Source
This commit is contained in:
Andres
2022-07-12 14:19:49 +02:00
parent 5fe3bf67de
commit 21831c4711
7 changed files with 73 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/index.css
View File

@@ -4,11 +4,12 @@
box-sizing: border-box;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', sans-serif;
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
@@ -16,7 +17,7 @@ body {
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
monospace;
}
[data-theme='1'] {

4
src/s2-homeworks/hw07/HW7.module.css Normal file
View File

@@ -0,0 +1,4 @@
.container {
display: flex;
gap: 110px;
}

41
src/s2-homeworks/hw07/HW7.tsx
View File

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
import SuperSelect from './common/c5-SuperSelect/SuperSelect'
import SuperRadio from './common/c6-SuperRadio/SuperRadio'
import s2 from '../../s1-main/App.module.css'
import s from './HW7.module.css'
const arr = [
{ id: 1, value: 'x' },
@@ -14,26 +15,30 @@ const HW7 = () => {
console.log(value)
return (
<div id={'hw7'} className={s2.hw}>
<div className={s2.hwTitle}>homeworks 7</div>
<div id={'hw7'}>
<div className={s2.hwTitle}>Homework #7</div>
{/*should work (должно работать)*/}
<div>
<SuperSelect
id={'hw7-super-select'}
options={arr}
value={value}
onChangeOption={onChangeOption}
/>
</div>
<div>
<SuperRadio
id={'hw7-super-radio'}
name={'hw7-radio'}
options={arr}
value={value}
onChangeOption={onChangeOption}
/>
<div className={s2.hw}>
<div className={s.container}>
<div>
<SuperSelect
id={'hw7-super-select'}
options={arr}
value={value}
onChangeOption={onChangeOption}
/>
</div>
<div>
<SuperRadio
id={'hw7-super-radio'}
name={'hw7-radio'}
options={arr}
value={value}
onChangeOption={onChangeOption}
/>
</div>
</div>
</div>
</div>
)

21
src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css
View File

@@ -1,18 +1,19 @@
.select {
width: 100px;
padding: 5px;
padding-left: 10px;
width: 165px;
height: 24px;
cursor: pointer;
appearance: none;
background-color: var(--primary);
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 20px) calc(1px + 50%),
calc(100% - 16px) calc(1px + 50%);
background-size: 4px 4px, 4px 4px;
background-color: transparent;
background-image: url('./chevron-down.svg');
background-position: right center;
background-repeat: no-repeat;
border-radius: 2px;
border: 2px solid var(--primary);
color: var(--primary-content);
border: 1px solid #C2C2C2;
color: #000000;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 14px;
}
.select:focus {

3
src/s2-homeworks/hw07/common/c5-SuperSelect/chevron-down.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9999 15.4999C11.8683 15.5007 11.7379 15.4755 11.616 15.4257C11.4942 15.3759 11.3834 15.3026 11.2899 15.2099L7.28994 11.2099C7.1967 11.1167 7.12274 11.006 7.07228 10.8842C7.02182 10.7624 6.99585 10.6318 6.99585 10.4999C6.99585 10.3681 7.02182 10.2375 7.07228 10.1157C7.12274 9.99387 7.1967 9.88318 7.28994 9.78994C7.38318 9.6967 7.49387 9.62274 7.61569 9.57228C7.73751 9.52182 7.86808 9.49585 7.99994 9.49585C8.1318 9.49585 8.26237 9.52182 8.38419 9.57228C8.50601 9.62274 8.6167 9.6967 8.70994 9.78994L11.9999 13.0999L15.2999 9.91994C15.3919 9.81765 15.504 9.73544 15.6293 9.67846C15.7545 9.62147 15.8901 9.59093 16.0276 9.58875C16.1652 9.58657 16.3017 9.6128 16.4287 9.66579C16.5556 9.71878 16.6703 9.7974 16.7655 9.89672C16.8607 9.99605 16.9343 10.1139 16.9819 10.243C17.0294 10.3721 17.0498 10.5096 17.0418 10.647C17.0338 10.7843 16.9975 10.9185 16.9352 11.0412C16.873 11.1639 16.7861 11.2724 16.6799 11.3599L12.6799 15.2199C12.4971 15.3963 12.2539 15.4964 11.9999 15.4999Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

39
src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.module.css
View File

@@ -1,26 +1,41 @@
.radio {
margin: 0;
-webkit-appearance: none;
appearance: none;
height: 10px;
width: 10px;
height: 20px;
width: 20px;
cursor: pointer;
border-radius: 50%;
outline: none;
background: #335533;
border: 2px solid black;
display: grid;
place-content: center;
}
.radio:hover {
border: 2px solid #cc99ff;
.radio::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
transform: scale(0);
transition: 120ms transform ease-in-out;
background-color: black;
}
.radio:checked {
background: #55ffff;
}
.radio:focus {
border: 2px solid #cc99ff;
.radio:checked::before {
transform: scale(1);
}
.label {
cursor: pointer;
display: flex;
align-items: center;
gap: 13px;
width: max-content;
}
.options {
display: flex;
flex-direction: column;
gap: 21px;
}

2
src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.tsx
View File

@@ -69,7 +69,7 @@ const SuperRadio: React.FC<SuperRadioPropsType> = ({
))
: []
return <>{mappedOptions}</>
return <div className={s.options}>{mappedOptions}</div>
}
export default SuperRadio