mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-11 16:44:57 +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
className="dropdown"
className="p-dropdown"
style={{
position: 'relative',
}}
@@ -49,7 +49,7 @@ const Details: React.FC<{}> = () => {
</button>
<div
className="dropdown-content"
className="p-dropdown-content"
style={{
backgroundColor: '#FFF',
height: '200px',

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
.rating {
.p-rating {
align-items: center;
display: flex;
font-size: 32px;
@@ -6,18 +6,20 @@
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;
}
.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;
content: '\2605';
left: 0;
position: absolute;
}
.star {
.p-rating-star {
background-color: transparent;
border: transparent;
margin: 0 2px;