mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-12 09:04:26 +02:00
Code Issues Releases Wiki Activity

Prefix pattern CSS classes with p-

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-29 13:51:39 +07:00
parent 40537d9b17
commit 9ee3e3a30a
9 changed files with 39 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/patterns/dropdown/Details.tsx
View File

@@ -30,7 +30,7 @@ const Details: React.FC<{}> = () => {
}} }}
> >
<div <div
className="dropdown" className="p-dropdown"
style={{ style={{
position: 'relative', position: 'relative',
}} }}
@@ -49,7 +49,7 @@ const Details: React.FC<{}> = () => {
</button> </button>
<div <div
className="dropdown-content" className="p-dropdown-content"
style={{ style={{
backgroundColor: '#FFF', backgroundColor: '#FFF',
height: '200px', height: '200px',

4
client/patterns/dropdown/dropdown.css
View File

@@ -1,7 +1,7 @@
.dropdown-content { .p-dropdown-content {
display: none; display: none;
} }
.dropdown:hover .dropdown-content { .p-dropdown:hover .p-dropdown-content {
display: block; display: block;
} }

10
client/patterns/floating-label/Details.tsx
View File

@@ -25,7 +25,7 @@ const Details: React.FC<{}> = () => {
}} }}
> >
<div <div
className="floating-container" className="p-floating-container"
style={{ style={{
border: '1px solid rgba(0, 0, 0, 0.3)', border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px', borderRadius: '4px',
@@ -59,11 +59,11 @@ const Details: React.FC<{}> = () => {
)} )}
source={` source={`
<style> <style>
.floating-container { .p-floating-container {
position: relative; position: relative;
} }
.floating-container label { .p-floating-container label {
/* Position the label */ /* Position the label */
left: 8px; left: 8px;
position: absolute; position: absolute;
@@ -75,14 +75,14 @@ const Details: React.FC<{}> = () => {
} }
/* Show the label at desired position when the placeholder of input isn't shown */ /* Show the label at desired position when the placeholder of input isn't shown */
.floating-container input:not(:placeholder-shown) + label { .p-floating-container input:not(:placeholder-shown) + label {
background: #FFF; background: #FFF;
transform: translate(0, -50%); transform: translate(0, -50%);
opacity: 1; opacity: 1;
} }
</style> </style>
<div class="floating-container"> <div class="p-floating-container">
<!-- The input --> <!-- The input -->
<input placeholder="Placeholder" /> <input placeholder="Placeholder" />

4
client/patterns/floating-label/floating-label.css
View File

@@ -1,8 +1,8 @@
.floating-container label { .p-floating-container label {
opacity: 0; opacity: 0;
} }
.floating-container input:not(:placeholder-shown) + label { .p-floating-container input:not(:placeholder-shown) + label {
background: #FFF; background: #FFF;
transform: translate(0, -50%); transform: translate(0, -50%);
opacity: 1; opacity: 1;

14
client/patterns/menu/Details.tsx
View File

@@ -33,7 +33,7 @@ const Details: React.FC<{}> = () => {
}} }}
> >
<div <div
className="menu-item" className="p-menu-item"
style={{ style={{
alignItems: 'center', alignItems: 'center',
display: 'flex', display: 'flex',
@@ -44,7 +44,7 @@ const Details: React.FC<{}> = () => {
<div style={{ width: '40%' }}><Rectangle /></div> <div style={{ width: '40%' }}><Rectangle /></div>
</div> </div>
<div <div
className="menu-item" className="p-menu-item"
style={{ style={{
alignItems: 'center', alignItems: 'center',
display: 'flex', display: 'flex',
@@ -56,7 +56,7 @@ const Details: React.FC<{}> = () => {
<div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div> <div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
</div> </div>
<div <div
className="menu-item" className="p-menu-item"
style={{ style={{
alignItems: 'center', alignItems: 'center',
display: 'flex', display: 'flex',
@@ -69,7 +69,7 @@ const Details: React.FC<{}> = () => {
<div>Ctrl + X</div> <div>Ctrl + X</div>
</div> </div>
<div <div
className="menu-item" className="p-menu-item"
style={{ style={{
alignItems: 'center', alignItems: 'center',
display: 'flex', display: 'flex',
@@ -82,7 +82,7 @@ const Details: React.FC<{}> = () => {
<div>Ctrl + C</div> <div>Ctrl + C</div>
</div> </div>
<div <div
className="menu-item" className="p-menu-item"
style={{ style={{
alignItems: 'center', alignItems: 'center',
display: 'flex', display: 'flex',
@@ -95,7 +95,7 @@ const Details: React.FC<{}> = () => {
<Circle /> <Circle />
</div> </div>
<div <div
className="menu-item" className="p-menu-item"
style={{ style={{
alignItems: 'center', alignItems: 'center',
display: 'flex', display: 'flex',
@@ -112,7 +112,7 @@ const Details: React.FC<{}> = () => {
</div> </div>
<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} /> <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
<div <div
className="menu-item" className="p-menu-item"
style={{ style={{
alignItems: 'center', alignItems: 'center',
display: 'flex', display: 'flex',

2
client/patterns/menu/menu.css
View File

@@ -1,3 +1,3 @@
.menu-item:hover { .p-menu-item:hover {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }

25
client/patterns/rating/Details.tsx
View File

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
justifyContent: 'center', justifyContent: 'center',
}} }}
> >
<div className="rating"> <div className="p-rating">
<Star isActive={false} /> <Star isActive={false} />
<Star isActive={false} /> <Star isActive={false} />
<Star isActive={false} /> <Star isActive={false} />
@@ -29,7 +29,7 @@ const Details: React.FC<{}> = () => {
)} )}
source={` source={`
<style> <style>
.rating { .p-rating {
/* Content is centered */ /* Content is centered */
align-items: center; align-items: center;
display: flex; display: flex;
@@ -40,7 +40,8 @@ const Details: React.FC<{}> = () => {
font-size: 32px; font-size: 32px;
} }
.rating .star:hover, .rating .star:hover ~ .star { .p-rating .p-rating-star:hover,
.p-rating .p-rating-star:hover ~ .p-rating-star {
color: transparent; color: transparent;
} }
@@ -48,15 +49,15 @@ const Details: React.FC<{}> = () => {
Make all previous stars selected when hover on a star Make all previous stars selected when hover on a star
Note that we use \`flex-direction: row-reverse\` on the container Note that we use \`flex-direction: row-reverse\` on the container
*/ */
.rating .star:hover:before, .p-rating .p-rating-star:hover:before,
.rating .star:hover ~ .star:before { .p-rating .p-rating-star:hover ~ .p-rating-star:before {
color: #00449e; color: #00449e;
content: '\\2605'; content: '\\2605';
left: 0; left: 0;
position: absolute; position: absolute;
} }
.star { .p-rating-star {
/* Reset styles for button */ /* Reset styles for button */
background-color: transparent; background-color: transparent;
border: transparent; border: transparent;
@@ -68,12 +69,12 @@ Note that we use \`flex-direction: row-reverse\` on the container
} }
</style> </style>
<div class="rating"> <div class="p-rating">
<button class="star">☆</button> <button class="p-rating-star">☆</button>
<button class="star">☆</button> <button class="p-rating-star">☆</button>
<button class="star">☆</button> <button class="p-rating-star">☆</button>
<button class="star">☆</button> <button class="p-rating-star">☆</button>
<button class="star">★</button> <button class="p-rating-star">★</button>
</div> </div>
`} `}
/> />

2
client/patterns/rating/Star.tsx
View File

@@ -8,7 +8,7 @@ interface StarProps {
const Star: React.FC<StarProps> = ({ isActive }) => { const Star: React.FC<StarProps> = ({ isActive }) => {
return ( return (
<button className="star"> <button className="p-rating-star">
{isActive ? '★' : '☆'} {isActive ? '★' : '☆'}
</button> </button>
); );

10
client/patterns/rating/star.css
View File

@@ -1,4 +1,4 @@
.rating { .p-rating {
align-items: center; align-items: center;
display: flex; display: flex;
font-size: 32px; font-size: 32px;
@@ -6,18 +6,20 @@
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.rating .star:hover, .rating .star:hover ~ .star { .p-rating .p-rating-star:hover,
.p-rating .p-rating-star:hover ~ .p-rating-star {
color: transparent; color: transparent;
} }
.rating .star:hover:before, .rating .star:hover ~ .star:before { .p-rating .p-rating-star:hover:before,
.p-rating .p-rating-star:hover ~ .p-rating-star:before {
color: #00449e; color: #00449e;
content: '\2605'; content: '\2605';
left: 0; left: 0;
position: absolute; position: absolute;
} }
.star { .p-rating-star {
background-color: transparent; background-color: transparent;
border: transparent; border: transparent;
margin: 0 2px; margin: 0 2px;