Skip to content
This repository has been archived by the owner on Apr 29, 2023. It is now read-only.

Commit

Permalink
Merge pull request #5 from CGWebDev2003/color-shades
Browse files Browse the repository at this point in the history 
[v0.4.0]: Progress bar and button changes
  • Loading branch information
@CGWebDev2003
CGWebDev2003 authored Apr 29, 2023
2 parents e9d06a3 + 6dcfe98 commit 183657f
Show file tree
Hide file tree
Showing 13 changed files with 324 additions and 68 deletions.
20 changes: 18 additions & 2 deletions CHANGELOG
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,25 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [Unreleased]
## [Released]

## [0.3.0] - 2023-03-27
## [0.4.0] - 2023-04-29

### Changed

- Generalized button states

### Added

- Buttons in system colors
- Progress bars
- Default color
- Primary color
- Accent color
- System colors
- Sizes: XS, S, M, L, XL

## [0.3.0] - 2023-04-27

### Changed

Expand Down
94 changes: 55 additions & 39 deletions css/components/buttons.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,11 @@ button {
transition: var(--transition-duration);
}

button:hover {
cursor: pointer;
button:hover { cursor: pointer;}
button:disabled { cursor: not-allowed;}
button:focus {
outline-color: transparent;
outline-style: solid;
}

/* Button sizes */
Expand Down Expand Up @@ -43,18 +46,9 @@ button:hover {
.button-primary { background-color: var(--primary);}
.button-primary:hover { background-color: var(--primary-60);}
.button-primary:active { background-color: var(--primary-40);}
.button-primary:focus {
box-shadow: 0 0 0 3px var(--primary-80);
outline-color: transparent;
outline-style: solid;
}
.button-primary:disabled {
background-color: var(--primary-80);
}
.button-primary:disabled:hover {
background-color: var(--primary-80);
cursor: not-allowed;
}
.button-primary:focus { box-shadow: 0 0 0 3px var(--primary-80);}
.button-primary:disabled { background-color: var(--primary-80);}
.button-primary:disabled:hover { background-color: var(--primary-80);}

/* secondary button */
.button-secondary {
Expand All @@ -63,34 +57,56 @@ button:hover {
background-color: transparent;
color: var(--primary);
}
.button-secondary:hover { background-color: var(--primary-60);}
.button-secondary:active { background-color: var(--primary-40);}
.button-secondary:focus {
box-shadow: 0 0 0 3px var(--primary-80);
outline-color: transparent;
outline-style: solid;
}
.button-secondary:disabled {
background-color: var(--primary-80);

.button-secondary:hover {
color: var(--text-button);
background-color: var(--primary-60);
border: 3px solid var(--primary-60);
}
.button-secondary:disabled:hover {
background-color: var(--primary-l-80);
cursor: not-allowed;
.button-secondary:active { background-color: var(--primary-40);}
.button-secondary:focus { box-shadow: 0 0 0 3px var(--primary-80);}
.button-secondary:disabled {
border: 3px solid var(--primary-80);
color: var(--primary-80);
}
.button-secondary:disabled:hover { background-color: var(--primary-80);}

/* CTA button */
.button-cta { background-color: var(--accent-50);}
.button-cta { background-color: var(--accent);}
.button-cta:hover { background-color: var(--accent-60);}
.button-cta:active { background-color: var(--accent-40);}
.button-cta:focus {
box-shadow: 0 0 0 3px var(--accent-80);
outline-color: transparent;
outline-style: solid;
}
.button-cta:disabled {
background-color: var(--accent-80);
}
.button-cta:disabled:hover {
background-color: var(--accent-80);
cursor: not-allowed;
}
.button-cta:focus { box-shadow: 0 0 0 3px var(--accent-80);}
.button-cta:disabled { background-color: var(--accent-80);}
.button-cta:disabled:hover { background-color: var(--accent-80);}

/* Information button */
.button-info { background-color: var(--info);}
.button-info:hover { background-color: var(--info-60);}
.button-info:active { background-color: var(--info-40);}
.button-info:focus { box-shadow: 0 0 0 3px var(--info-80);}
.button-info:disabled { background-color: var(--info-80);}
.button-info:disabled:hover { background-color: var(--info-80);}

/* Success button */
.button-success { background-color: var(--success);}
.button-success:hover { background-color: var(--success-60);}
.button-success:active { background-color: var(--success-40);}
.button-success:focus { box-shadow: 0 0 0 3px var(--success-80);}
.button-success:disabled { background-color: var(--success-80);}
.button-success:disabled:hover { background-color: var(--success-80);}

/* Warning button */
.button-warning { background-color: var(--warning);}
.button-warning:hover { background-color: var(--warning-60);}
.button-warning:active { background-color: var(--warning-40);}
.button-warning:focus { box-shadow: 0 0 0 3px var(--warning-80);}
.button-warning:disabled { background-color: var(--warning-80);}
.button-warning:disabled:hover {background-color: var(--warning-80);}

/* Error button */
.button-error { background-color: var(--error);}
.button-error:hover { background-color: var(--error-60);}
.button-error:active { background-color: var(--error-40);}
.button-error:focus { box-shadow: 0 0 0 3px var(--error-80);}
.button-error:disabled { background-color: var(--error-80);}
.button-error:disabled:hover { background-color: var(--error-80);}
2 changes: 1 addition & 1 deletion css/components/buttons.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

58 changes: 58 additions & 0 deletions css/components/progress.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/* Default progress bar */
.progress {
position: relative;
width: 25rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px solid var(--background);
border-radius: var(--rounded-m);
background-color: var(--background-light);
}

.progress .progress-bar {
position: absolute;
left: 0;
width: 0;
height: 100%;
border-radius: var(--rounded-m);
background-color: var(--background);
z-index: 200;
}

/* Colors */
/* Primary */
.progress-primary > .progress-bar { background-color: var(--primary);}

/* Accent */
.progress-accent > .progress-bar { background-color: var(--accent);}

/* Information */
.progress-info > .progress-bar { background-color: var(--info);}

/* Success */
.progress-success > .progress-bar { background-color: var(--success);}

/* Warning */
.progress-warning > .progress-bar { background-color: var(--warning);}

/* Error */
.progress-error > .progress-bar { background-color: var(--error);}

/* Sizes */
/* Progress bar XS */
.progress-xs { height: .5rem;}

/* Progress bar S */
.progress-s { height: 1rem;}

/* Progress bar M */
.progress-m { height: 2rem;}

/* Progress bar L */
.progress-l { height: 2.5rem;}

/* Progress bar XL */
.progress-xl { height: 3rem;}
16 changes: 9 additions & 7 deletions examamples/components/example_badges.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,50 +15,52 @@
<title>Badges | Neptune examples</title>
</head>
<body>
<h3 class="example-title">Default badges</h3>
<h1 class="main-headline">Badges</h1>

<div class="example-box">
<h3 class="example-title">Default badges</h3>
<span class="badge badge-s">Default S</span>
<span class="badge badge-m">Default M</span>
<span class="badge badge-l">Default L</span>
</div>

<h3 class="example-title">Primary badges</h3>
<div class="example-box">
<h3 class="example-title">Primary badges</h3>
<span class="badge badge-primary badge-s">Primary S</span>
<span class="badge badge-primary badge-m">Primary M</span>
<span class="badge badge-primary badge-l">Primary L</span>
</div>

<h3 class="example-title">Accent badges</h3>
<div class="example-box">
<h3 class="example-title">Accent badges</h3>
<span class="badge badge-accent badge-s">Accent S</span>
<span class="badge badge-accent badge-m">Accent M</span>
<span class="badge badge-accent badge-l">Accent L</span>
</div>

<h3 class="example-title">Information badges</h3>
<div class="example-box">
<h3 class="example-title">Information badges</h3>
<span class="badge badge-info badge-s">Information S</span>
<span class="badge badge-info badge-m">Information M</span>
<span class="badge badge-info badge-l">Information L</span>
</div>

<h3 class="example-title">Success badges</h3>
<div class="example-box">
<h3 class="example-title">Success badges</h3>
<span class="badge badge-success badge-s">Sucess S</span>
<span class="badge badge-success badge-m">Sucess M</span>
<span class="badge badge-success badge-l">Sucess L</span>
</div>

<h3 class="example-title">Warning badges</h3>
<div class="example-box">
<h3 class="example-title">Warning badges</h3>
<span class="badge badge-warning badge-s">Warning S</span>
<span class="badge badge-warning badge-m">Warning M</span>
<span class="badge badge-warning badge-l">Warning L</span>
</div>

<h3 class="example-title">Error badges</h3>
<div class="example-box">
<h3 class="example-title">Error badges</h3>
<span class="badge badge-error badge-s">Error S</span>
<span class="badge badge-error badge-m">Error M</span>
<span class="badge badge-error badge-l">Error L</span>
Expand Down
41 changes: 38 additions & 3 deletions examamples/components/example_buttons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,62 @@
<title>Buttons | Neptune examples</title>
</head>
<body id="body" data-scrollbar>
<h3 class="example-title">Primary button</h3>
<div class="example-box">
<h3 class="example-title">Default button</h3>
<button class="button button-l">Default L</button>
<button class="button button-m">Default M</button>
<button class="button button-s">Default S</button>
</div>

<div class="example-box">
<h3 class="example-title">Primary button</h3>
<button class="button-primary button-l">Primary L</button>
<button class="button-primary button-m">Primary M</button>
<button class="button-primary button-s">Primary S</button>
</div>

<h3 class="example-title">Secondary button</h3>
<div class="example-box">
<h3 class="example-title">Secondary button</h3>
<button class="button-secondary button-l">Secondary L</button>
<button class="button-secondary button-m">Secondary M</button>
<button class="button-secondary button-s">Secondary S</button>
</div>

<h3 class="example-title">CTA button</h3>
<div class="example-box">
<h3 class="example-title">CTA button</h3>
<button class="button-cta button-l">CTA L</button>
<button class="button-cta button-m">CTA M</button>
<button class="button-cta button-s">CTA S</button>
</div>

<div class="example-box">
<h3 class="example-title">Information button</h3>
<button class="button-info button-l">Info L</button>
<button class="button-info button-m">Info M</button>
<button class="button-info button-s">Info S</button>
</div>

<div class="example-box">
<h3 class="example-title">Success button</h3>
<button class="button-success button-l">Success L</button>
<button class="button-success button-m">Success M</button>
<button class="button-success button-s">Success S</button>
</div>

<div class="example-box">
<h3 class="example-title">Warning button</h3>
<button class="button-warning button-l">Warning L</button>
<button class="button-warning button-m">Warning M</button>
<button class="button-warning button-s">Warning S</button>
</div>

<div class="example-box">
<h3 class="example-title">Error button</h3>
<button class="button-error button-l">Error L</button>
<button class="button-error button-m">Error M</button>
<button class="button-error button-s">Error S</button>
</div>

<!-- Init scrollbar -->
<script src="/node_modules/smooth-scrollbar/dist/smooth-scrollbar.js"></script>
<div id="scrollbar"></div>
Expand Down
Loading

0 comments on commit 183657f

Please sign in to comment.