This reverts commit 028121b39d.
This commit is contained in:
Andy Zhao
GitHub
parent
028121b39d
commit
f5c94391b7
26 changed files with 956 additions and 323 deletions
1
app/assets/images/small-bell.svg
Normal file
1
app/assets/images/small-bell.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.6 15.714H19v1.429H5v-1.429h1.4v-5c0-1.515.59-2.969 1.64-4.04A5.544 5.544 0 0112 5c1.485 0 2.91.602 3.96 1.674a5.774 5.774 0 011.64 4.04v5zm-1.4 0v-5a4.33 4.33 0 00-1.23-3.03A4.158 4.158 0 0012 6.429a4.158 4.158 0 00-2.97 1.255 4.33 4.33 0 00-1.23 3.03v5h8.4zm-6.3 2.857h4.2V20H9.9v-1.429z" /></svg>
|
||||
|
After Width: | Height: | Size: 395 B |
|
|
@ -255,7 +255,7 @@
|
|||
a {
|
||||
text-decoration: underline;
|
||||
display: inline-block;
|
||||
color: var(--link-branded-color);
|
||||
color: var(--link-brand-color);
|
||||
}
|
||||
@media screen and (min-width: 580px) {
|
||||
font-size: 1.1em;
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ a.header-link {
|
|||
margin: auto;
|
||||
margin-bottom: -35px;
|
||||
.read-more {
|
||||
color: var(--link-branded-color);
|
||||
color: var(--link-brand-color);
|
||||
display: inline-block;
|
||||
&:hover {
|
||||
opacity: 0.96;
|
||||
|
|
@ -524,7 +524,7 @@ a.header-link {
|
|||
text-align: right;
|
||||
font-size: 0.9em;
|
||||
font-weight: 500;
|
||||
color: var(--link-branded-color);
|
||||
color: var(--link-brand-color);
|
||||
&.sub-comment-code-of-conduct {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
|
@ -534,7 +534,7 @@ a.header-link {
|
|||
margin: 5px 0px;
|
||||
}
|
||||
a {
|
||||
color: var(--link-branded-color);
|
||||
color: var(--link-brand-color);
|
||||
}
|
||||
}
|
||||
input[type='submit'] {
|
||||
|
|
@ -896,7 +896,7 @@ a.header-link {
|
|||
.details {
|
||||
padding: 0px;
|
||||
border-top-left-radius: 3px;
|
||||
color: var(--link-branded-color);
|
||||
color: var(--link-brand-color);
|
||||
position: relative;
|
||||
.comment-date {
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -1,109 +1,241 @@
|
|||
@import '../config/import';
|
||||
|
||||
$outlined-border-width: 2px;
|
||||
|
||||
// Basic styling
|
||||
.crayons-btn {
|
||||
// Setup
|
||||
--border-width: 0px;
|
||||
--shadow-color: rgba(0, 0, 0, 0.05);
|
||||
--vertical-padding: #{$su-2};
|
||||
--horizontal-padding: #{$su-4};
|
||||
--font-size: #{$fs-base};
|
||||
--with-icon-padding: #{$su-3};
|
||||
--icon-margin: #{$su-2};
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0.5em 1em;
|
||||
padding: calc(var(--vertical-padding) - var(--border-width))
|
||||
calc(var(--horizontal-padding) - var(--border-width));
|
||||
border-radius: $br-default;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
font-size: $fs-base;
|
||||
line-height: $lh-base;
|
||||
font-size: var(--font-size);
|
||||
line-height: $su-6; // intentionally not using $lh-* variable.
|
||||
font-weight: $fw-medium;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all $transition-props;
|
||||
border: none;
|
||||
}
|
||||
border: var(--border-width) solid;
|
||||
|
||||
// Styles
|
||||
.crayons-btn {
|
||||
background-color: var(--button-primary-bg);
|
||||
color: var(--button-primary-color);
|
||||
// Styles
|
||||
--bg: var(--button-primary-bg);
|
||||
--bg-hover: var(--button-primary-bg-hover);
|
||||
--border: transparent;
|
||||
--border-hover: transparent;
|
||||
--color: var(--button-primary-color);
|
||||
--color-hover: var(--button-primary-color-hover);
|
||||
--shadow: 0 1px 3px var(--shadow-color);
|
||||
--shadow-hover: 0 2px 5px var(--shadow-color);
|
||||
--bg-inverted: var(--button-primary-inverted-bg);
|
||||
--bg-inverted-hover: var(--button-primary-inverted-bg-hover);
|
||||
--color-inverted: var(--button-primary-inverted-color);
|
||||
--color-inverted-hover: var(--button-primary-inverted-color-hover);
|
||||
|
||||
background-color: var(--bg);
|
||||
border-color: var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
color: var(--color);
|
||||
|
||||
&[href]:hover,
|
||||
&:hover:enabled,
|
||||
&:active:enabled {
|
||||
background-color: var(--bg-hover);
|
||||
border-color: var(--border-hover);
|
||||
box-shadow: var(--shadow-hover);
|
||||
color: var(--color-hover);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.crayons-btn--inverted {
|
||||
--bg: var(--bg-inverted);
|
||||
--bg-hover: var(--bg-inverted-hover);
|
||||
--border: var(--border-inverted);
|
||||
--border-hover: var(--border-inverted-hover);
|
||||
--color: var(--color-inverted);
|
||||
--color-hover: var(--color-inverted-hover);
|
||||
}
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:enabled:not(&--disabled):hover,
|
||||
&:enabled:not(&--disabled):active,
|
||||
&--active:enabled:not(&--disabled) {
|
||||
background-color: var(--button-primary-bg-hover);
|
||||
color: var(--button-primary-color-hover);
|
||||
z-index: 2;
|
||||
&--s {
|
||||
--vertical-padding: #{$su-1};
|
||||
--horizontal-padding: #{$su-3};
|
||||
--font-size: #{$fs-s};
|
||||
--with-icon-padding: #{$su-2};
|
||||
--icon-margin: #{$su-1};
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
background-color: var(--button-secondary-bg);
|
||||
color: var(--button-secondary-color);
|
||||
|
||||
&:enabled:not(&--disabled):hover,
|
||||
&:enabled:not(&--disabled):active,
|
||||
&--active:enabled:not(&--disabled) {
|
||||
background-color: var(--button-secondary-bg-hover);
|
||||
color: var(--button-secondary-color-hover);
|
||||
}
|
||||
&--l {
|
||||
--vertical-padding: #{$su-3};
|
||||
--horizontal-padding: #{$su-5};
|
||||
--with-icon-padding: #{$su-3};
|
||||
--icon-margin: #{$su-2};
|
||||
}
|
||||
|
||||
&--outlined {
|
||||
padding: calc(0.5em - #{$outlined-border-width})
|
||||
calc(1em - #{$outlined-border-width});
|
||||
background-color: transparent;
|
||||
border: $outlined-border-width solid var(--button-outlined-bg);
|
||||
color: var(--button-outlined-color);
|
||||
&--xl {
|
||||
--vertical-padding: #{$su-4};
|
||||
--horizontal-padding: #{$su-6};
|
||||
--font-size: #{$fs-l};
|
||||
--with-icon-padding: #{$su-5};
|
||||
--icon-margin: #{$su-3};
|
||||
}
|
||||
}
|
||||
|
||||
&:enabled:not(&--disabled):hover,
|
||||
&:enabled:not(&--disabled):active,
|
||||
&--active:enabled:not(&--disabled) {
|
||||
background-color: transparent;
|
||||
color: var(--button-outlined-color-hover);
|
||||
border-color: var(--button-outlined-bg-hover);
|
||||
}
|
||||
.crayons-btn--secondary {
|
||||
--bg: var(--button-secondary-bg);
|
||||
--bg-hover: var(--button-secondary-bg-hover);
|
||||
--color: var(--button-secondary-color);
|
||||
--color-hover: var(--button-secondary-color-hover);
|
||||
--bg-inverted: var(--button-secondary-inverted-bg);
|
||||
--bg-inverted-hover: var(--button-secondary-inverted-bg-hover);
|
||||
--color-inverted: var(--button-secondary-inverted-color);
|
||||
--color-inverted-hover: var(--button-secondary-inverted-color-hover);
|
||||
}
|
||||
|
||||
.crayons-btn--outlined {
|
||||
--bg: var(--button-outlined-bg);
|
||||
--bg-hover: var(--button-outlined-bg-hover);
|
||||
--border: var(--button-outlined-border);
|
||||
--border-hover: var(--button-outlined-border-hover);
|
||||
--color: var(--button-outlined-color);
|
||||
--color-hover: var(--button-outlined-color-hover);
|
||||
--bg-inverted: var(--button-outlined-inverted-bg);
|
||||
--bg-inverted-hover: var(--button-outlined-inverted-bg-hover);
|
||||
--border-inverted: var(--button-outlined-inverted-border);
|
||||
--border-inverted-hover: var(--button-outlined-inverted-border-hover);
|
||||
--color-inverted: var(--button-outlined-inverted-color);
|
||||
--color-inverted-hover: var(--button-outlined-inverted-color-hover);
|
||||
|
||||
--border-width: 2px;
|
||||
}
|
||||
|
||||
.crayons-btn--danger {
|
||||
--bg: var(--accent-danger);
|
||||
--bg-hover: var(--accent-danger-darker);
|
||||
--color: var(--base-inverted);
|
||||
--color-hover: var(--base-inverted);
|
||||
--bg-inverted: var(--accent-danger);
|
||||
--bg-inverted-hover: var(--accent-danger-darker);
|
||||
--color-inverted: var(--base-inverted);
|
||||
--color-inverted-hover: var(--base-inverted);
|
||||
}
|
||||
|
||||
.crayons-btn--ghost {
|
||||
--bg: var(--button-ghost-bg);
|
||||
--bg-hover: var(--button-ghost-bg-hover);
|
||||
--color: var(--button-ghost-color);
|
||||
--color-hover: var(--button-ghost-color-hover);
|
||||
--shadow: none;
|
||||
--shadow-hover: none;
|
||||
--bg-inverted: var(--button-ghost-inverted-bg);
|
||||
--bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
|
||||
--color-inverted: var(--button-ghost-inverted-color);
|
||||
--color-inverted-hover: var(--button-ghost-inverted-color-hover);
|
||||
|
||||
&-brand {
|
||||
--bg: var(--button-ghost-bg);
|
||||
--bg-hover: var(--button-ghost-bg-hover);
|
||||
--color: var(--accent-brand);
|
||||
--color-hover: var(--accent-brand-darker);
|
||||
--shadow: none;
|
||||
--shadow-hover: none;
|
||||
--bg-inverted: var(--button-ghost-inverted-bg);
|
||||
--bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
|
||||
--color-inverted: var(--accent-brand-lighter);
|
||||
--color-inverted-hover: var(--accent-brand-lighter);
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background-color: var(--accent-danger);
|
||||
color: var(--base-inverted);
|
||||
|
||||
&:enabled:not(&--disabled):hover,
|
||||
&:enabled:not(&--disabled):active,
|
||||
&--active:enabled:not(&--disabled) {
|
||||
background-color: var(--accent-danger-darker);
|
||||
color: var(--base-inverted);
|
||||
}
|
||||
&-success {
|
||||
--bg: var(--button-ghost-bg);
|
||||
--bg-hover: var(--button-ghost-bg-hover);
|
||||
--color: var(--accent-success);
|
||||
--color-hover: var(--accent-success-darker);
|
||||
--shadow: none;
|
||||
--shadow-hover: none;
|
||||
--bg-inverted: var(--button-ghost-inverted-bg);
|
||||
--bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
|
||||
--color-inverted: var(--accent-success);
|
||||
--color-inverted-hover: var(--accent-success-darker);
|
||||
}
|
||||
|
||||
&--text {
|
||||
background-color: transparent;
|
||||
color: var(--link-brand);
|
||||
&-warning {
|
||||
--bg: var(--button-ghost-bg);
|
||||
--bg-hover: var(--button-ghost-bg-hover);
|
||||
--color: var(--accent-warning);
|
||||
--color-hover: var(--accent-warning-darker);
|
||||
--shadow: none;
|
||||
--shadow-hover: none;
|
||||
--bg-inverted: var(--button-ghost-inverted-bg);
|
||||
--bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
|
||||
--color-inverted: var(--accent-warning);
|
||||
--color-inverted-hover: var(--accent-warning-darker);
|
||||
}
|
||||
|
||||
&:enabled:not(&--disabled):hover,
|
||||
&:enabled:not(&--disabled):active,
|
||||
&--active:enabled:not(&--disabled) {
|
||||
background-color: transparent;
|
||||
color: var(--link-brand-hover);
|
||||
}
|
||||
&-danger {
|
||||
--bg: var(--button-ghost-bg);
|
||||
--bg-hover: var(--button-ghost-bg-hover);
|
||||
--color: var(--accent-danger);
|
||||
--color-hover: var(--accent-danger-darker);
|
||||
--shadow: none;
|
||||
--shadow-hover: none;
|
||||
--bg-inverted: var(--button-ghost-inverted-bg);
|
||||
--bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
|
||||
--color-inverted: var(--accent-danger);
|
||||
--color-inverted-hover: var(--accent-danger-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon alone
|
||||
.crayons-btn--icon-alone {
|
||||
padding-left: 0.75em;
|
||||
padding-right: 0.75em;
|
||||
.crayons-btn--icon,
|
||||
.crayons-btn--icon-rounded {
|
||||
--horizontal-padding: #{$su-2};
|
||||
padding-left: calc(var(--horizontal-padding) - var(--border-width));
|
||||
padding-right: calc(var(--horizontal-padding) - var(--border-width));
|
||||
&.crayons-btn--s {
|
||||
--horizontal-padding: #{$su-1};
|
||||
}
|
||||
|
||||
&.crayons-btn--l {
|
||||
--horizontal-padding: #{$su-3};
|
||||
}
|
||||
|
||||
&.crayons-btn--xl {
|
||||
--horizontal-padding: #{$su-4};
|
||||
}
|
||||
}
|
||||
|
||||
.crayons-btn--icon-rounded {
|
||||
border-radius: 1000px;
|
||||
}
|
||||
|
||||
// Icon Left
|
||||
.crayons-btn--icon-left {
|
||||
padding-left: 0.75em;
|
||||
padding-left: calc(var(--with-icon-padding) - var(--border-width));
|
||||
|
||||
.crayons-icon {
|
||||
margin-right: 0.5em;
|
||||
margin-right: var(--icon-margin);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon Right
|
||||
.crayons-btn--icon-right {
|
||||
padding-right: calc(var(--with-icon-padding) - var(--border-width));
|
||||
|
||||
.crayons-icon {
|
||||
margin-left: var(--icon-margin);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -115,11 +247,16 @@ $outlined-border-width: 2px;
|
|||
border-radius: 0;
|
||||
|
||||
+ .crayons-btn:not(.crayons-btn--outlined) {
|
||||
margin-left: 1px;
|
||||
box-shadow: var(--shadow), inset 1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
margin-left: -1px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-hover), inset 0 0 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
+ .crayons-btn--outlined {
|
||||
margin-left: -$outlined-border-width;
|
||||
margin-left: calc(-1 * var(--border-width));
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
|
|
|||
|
|
@ -3,14 +3,42 @@
|
|||
.crayons-link {
|
||||
color: var(--link-color);
|
||||
|
||||
&--branded {
|
||||
color: var(--link-branded-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--link-color-hover);
|
||||
}
|
||||
|
||||
&--brand {
|
||||
color: var(--accent-brand);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-brand-darker);
|
||||
}
|
||||
}
|
||||
|
||||
&--success {
|
||||
color: var(--accent-success);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-success-darker);
|
||||
}
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: var(--accent-warning);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-warning-darker);
|
||||
}
|
||||
}
|
||||
|
||||
&--danger {
|
||||
color: var(--accent-danger);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-danger-darker);
|
||||
}
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
color: var(--link-color-secondary);
|
||||
|
||||
|
|
|
|||
|
|
@ -88,31 +88,61 @@
|
|||
// Links
|
||||
--link-color: var(--base-90);
|
||||
--link-color-hover: var(--accent-brand-darker);
|
||||
--link-bg-hover: var(--base-0);
|
||||
--link-bg-hover-alt: var(--base-inverted);
|
||||
--link-brand-color: var(--accent-brand);
|
||||
--link-color-current: var(--base-100);
|
||||
--link-color-secondary: var(--base-60);
|
||||
--link-color-secondary-hover: var(--base-70);
|
||||
--link-branded-color: var(--accent-brand);
|
||||
--link-bg-hover: var(--base-0);
|
||||
--link-bg-hover-alt: var(--base-inverted);
|
||||
--link-bg-current: var(--base-inverted);
|
||||
|
||||
// Primary buttons
|
||||
--button-primary-bg: var(--accent-brand);
|
||||
--button-primary-color: var(--base-0);
|
||||
--button-primary-bg-hover: var(--accent-brand-darker);
|
||||
--button-primary-color: var(--base-0);
|
||||
--button-primary-color-hover: var(--base-0);
|
||||
//-- Inverted
|
||||
--button-primary-inverted-bg: var(--accent-brand);
|
||||
--button-primary-inverted-bg-hover: var(--accent-brand-darker);
|
||||
--button-primary-inverted-color: var(--base-0);
|
||||
--button-primary-inverted-color-hover: var(--base-0);
|
||||
|
||||
// Secondary buttons
|
||||
--button-secondary-bg: var(--base-20);
|
||||
--button-secondary-color: var(--base-80);
|
||||
--button-secondary-bg-hover: var(--base-30);
|
||||
--button-secondary-color: var(--base-80);
|
||||
--button-secondary-color-hover: var(--base-100);
|
||||
//-- Inverted
|
||||
--button-secondary-inverted-bg: var(--base-70);
|
||||
--button-secondary-inverted-bg-hover: var(--base-60);
|
||||
--button-secondary-inverted-color: var(--base-10);
|
||||
--button-secondary-inverted-color-hover: var(--base-0);
|
||||
|
||||
// Outlined buttons
|
||||
--button-outlined-bg: var(--base-20);
|
||||
--button-outlined-bg: transparent;
|
||||
--button-outlined-bg-hover: rgba(0, 0, 0, 0.035);
|
||||
--button-outlined-border: var(--base-20);
|
||||
--button-outlined-border-hover: var(--base-40);
|
||||
--button-outlined-color: var(--base-80);
|
||||
--button-outlined-bg-hover: var(--base-40);
|
||||
--button-outlined-color-hover: var(--base-100);
|
||||
//-- Inverted
|
||||
--button-outlined-inverted-bg: transparent;
|
||||
--button-outlined-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
||||
--button-outlined-inverted-border: var(--base-60);
|
||||
--button-outlined-inverted-border-hover: var(--base-40);
|
||||
--button-outlined-inverted-color: var(--base-30);
|
||||
--button-outlined-inverted-color-hover: var(--base-10);
|
||||
|
||||
// Ghost buttons
|
||||
--button-ghost-bg: transparent;
|
||||
--button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
|
||||
--button-ghost-color: var(--base-80);
|
||||
--button-ghost-color-hover: var(--base-100);
|
||||
//-- Inverted
|
||||
--button-ghost-inverted-bg: transparent;
|
||||
--button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
||||
--button-ghost-inverted-color: var(--base-30);
|
||||
--button-ghost-inverted-color-hover: var(--base-10);
|
||||
|
||||
// Forms
|
||||
--form-bg: var(--base-0);
|
||||
|
|
|
|||
|
|
@ -413,7 +413,7 @@
|
|||
(
|
||||
'w',
|
||||
'width',
|
||||
('0': 0, '25': 25%, '50': 50%, '100': 100%, 'auto': auto, 'full': 100vw),
|
||||
('0': 0, '25': 25%, '50': 50%, '100': 100%, 'auto': auto, 'full': 100vw, 'max': max-content),
|
||||
(),
|
||||
true
|
||||
),
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@
|
|||
padding: 10px 5px;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: var(--link-branded-color);
|
||||
color: var(--link-brand-color);
|
||||
}
|
||||
@media screen and (min-width: 950px) {
|
||||
font-size: 1.4em;
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
cursor: pointer;
|
||||
font-size: 0.8em;
|
||||
user-select: none;
|
||||
color: var(--link-branded-color);
|
||||
color: var(--link-brand-color);
|
||||
div {
|
||||
margin-top: 5px;
|
||||
background: var(--card-bg);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
overflow: hidden;
|
||||
max-width: 620px;
|
||||
a {
|
||||
color: var(--link-branded-color) !important;
|
||||
color: var(--link-brand-color) !important;
|
||||
}
|
||||
.readme-overview {
|
||||
padding: 0.8em 0.5em;
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@
|
|||
margin: 8px 0px;
|
||||
display: inline-block;
|
||||
border: 0px;
|
||||
background: var(--link-branded-color);
|
||||
background: var(--link-brand-color);
|
||||
@include themeable(color, theme-container-background, white);
|
||||
}
|
||||
}
|
||||
|
|
@ -146,7 +146,7 @@
|
|||
text-align: center;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
background: var(--link-branded-color);
|
||||
background: var(--link-brand-color);
|
||||
@include themeable(color, theme-container-background, white);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--link-branded-color);
|
||||
color: var(--link-brand-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -289,7 +289,7 @@
|
|||
}
|
||||
|
||||
input[type='checkbox']:checked {
|
||||
background: var(--link-branded-color);
|
||||
background: var(--link-brand-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ body {
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--link-branded-color);
|
||||
color: var(--link-brand-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -81,28 +81,58 @@
|
|||
--link-color-current: var(--accent-brand-lighter);
|
||||
--link-color-secondary: var(--accent-brand-darker);
|
||||
--link-color-secondary-hover: var(--accent-brand-darker);
|
||||
--link-branded-color: #e24ec1;
|
||||
--link-brand-color: #e24ec1;
|
||||
--link-bg-hover: var(--base-0);
|
||||
--link-bg-hover-alt: var(--base-0);
|
||||
--link-bg-current: var(--base-inverted);
|
||||
|
||||
// Primary buttons
|
||||
--button-primary-bg: var(--accent-brand);
|
||||
--button-primary-color: #0a0a0a;
|
||||
--button-primary-bg-hover: var(--accent-brand-darker);
|
||||
--button-primary-color: var(--base-0);
|
||||
--button-primary-color-hover: var(--base-0);
|
||||
//-- Inverted
|
||||
--button-primary-inverted-bg: var(--base-0);
|
||||
--button-primary-inverted-bg-hover: var(--base-20);
|
||||
--button-primary-inverted-color: var(--accent-brand);
|
||||
--button-primary-inverted-color-hover: var(--accent-brand-darker);
|
||||
|
||||
// Secondary buttons
|
||||
--button-secondary-bg: var(--base-20);
|
||||
--button-secondary-color: var(--base-80);
|
||||
--button-secondary-bg-hover: var(--base-30);
|
||||
--button-secondary-color-hover: var(--base-100);
|
||||
--button-secondary-bg: var(--base-10);
|
||||
--button-secondary-bg-hover: var(--base-20);
|
||||
--button-secondary-color: var(--accent-brand);
|
||||
--button-secondary-color-hover: var(--accent-brand-lighter);
|
||||
//-- Inverted
|
||||
--button-secondary-inverted-bg: var(--base-50);
|
||||
--button-secondary-inverted-bg-hover: var(--base-30);
|
||||
--button-secondary-inverted-color: var(--accent-brand);
|
||||
--button-secondary-inverted-color-hover: var(--accent-brand-lighter);
|
||||
|
||||
// Outlined buttons
|
||||
--button-outlined-bg: var(--accent-brand);
|
||||
--button-outlined-bg: transparent;
|
||||
--button-outlined-bg-hover: rgba(0, 0, 0, 0.035);
|
||||
--button-outlined-border: var(--accent-brand);
|
||||
--button-outlined-border-hover: var(--accent-brand-darker);
|
||||
--button-outlined-color: var(--accent-brand);
|
||||
--button-outlined-bg-hover: var(--accent-brand-lighter);
|
||||
--button-outlined-color-hover: var(--accent-brand-lighter);
|
||||
--button-outlined-color-hover: var(--accent-brand-darker);
|
||||
//-- Inverted
|
||||
--button-outlined-inverted-bg: transparent;
|
||||
--button-outlined-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
||||
--button-outlined-inverted-border: var(--accent-brand-darker);
|
||||
--button-outlined-inverted-border-hover: var(--accent-brand);
|
||||
--button-outlined-inverted-color: var(--accent-brand-darker);
|
||||
--button-outlined-inverted-color-hover: var(--accent-brand-darker);
|
||||
|
||||
// Ghost buttons
|
||||
--button-ghost-bg: transparent;
|
||||
--button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
|
||||
--button-ghost-color: var(--base-80);
|
||||
--button-ghost-color-hover: var(--base-100);
|
||||
//-- Inverted
|
||||
--button-ghost-inverted-bg: transparent;
|
||||
--button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
||||
--button-ghost-inverted-color: var(--base-30);
|
||||
--button-ghost-inverted-color-hover: var(--base-10);
|
||||
|
||||
// Forms
|
||||
--form-bg: var(--base-0);
|
||||
|
|
|
|||
|
|
@ -79,28 +79,58 @@
|
|||
--link-color-current: var(--base-100);
|
||||
--link-color-secondary: var(--base-70);
|
||||
--link-color-secondary-hover: var(--base-80);
|
||||
--link-branded-color: var(--accent-brand);
|
||||
--link-brand-color: var(--accent-brand);
|
||||
--link-bg-hover: var(--base-0);
|
||||
--link-bg-hover-alt: var(--base-10);
|
||||
--link-bg-current: var(--base-inverted);
|
||||
|
||||
// Primary buttons
|
||||
--button-primary-bg: var(--accent-brand);
|
||||
--button-primary-color: var(--base-0);
|
||||
--button-primary-bg-hover: var(--accent-brand-darker);
|
||||
--button-primary-bg: var(--base-90);
|
||||
--button-primary-bg-hover: var(--base-100);
|
||||
--button-primary-color: var(--base-10);
|
||||
--button-primary-color-hover: var(--base-0);
|
||||
//-- Inverted
|
||||
--button-primary-inverted-bg: var(--base-10);
|
||||
--button-primary-inverted-bg-hover: var(--base-0);
|
||||
--button-primary-inverted-color: var(--base-90);
|
||||
--button-primary-inverted-color-hover: var(--base-100);
|
||||
|
||||
// Secondary buttons
|
||||
--button-secondary-bg: var(--base-20);
|
||||
--button-secondary-color: var(--base-80);
|
||||
--button-secondary-bg-hover: var(--base-30);
|
||||
--button-secondary-color: var(--base-80);
|
||||
--button-secondary-color-hover: var(--base-100);
|
||||
//-- Inverted
|
||||
--button-secondary-inverted-bg: var(--base-70);
|
||||
--button-secondary-inverted-bg-hover: var(--base-60);
|
||||
--button-secondary-inverted-color: var(--base-10);
|
||||
--button-secondary-inverted-color-hover: var(--base-0);
|
||||
|
||||
// Outlined buttons
|
||||
--button-outlined-bg: var(--base-20);
|
||||
--button-outlined-bg: transparent;
|
||||
--button-outlined-bg-hover: rgba(0, 0, 0, 0.035);
|
||||
--button-outlined-border: var(--base-20);
|
||||
--button-outlined-border-hover: var(--base-40);
|
||||
--button-outlined-color: var(--base-80);
|
||||
--button-outlined-bg-hover: var(--base-30);
|
||||
--button-outlined-color-hover: var(--base-100);
|
||||
//-- Inverted
|
||||
--button-outlined-inverted-bg: transparent;
|
||||
--button-outlined-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
||||
--button-outlined-inverted-border: var(--base-60);
|
||||
--button-outlined-inverted-border-hover: var(--base-40);
|
||||
--button-outlined-inverted-color: var(--base-30);
|
||||
--button-outlined-inverted-color-hover: var(--base-10);
|
||||
|
||||
// Ghost buttons
|
||||
--button-ghost-bg: transparent;
|
||||
--button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
|
||||
--button-ghost-color: var(--base-80);
|
||||
--button-ghost-color-hover: var(--base-100);
|
||||
//-- Inverted
|
||||
--button-ghost-inverted-bg: transparent;
|
||||
--button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
||||
--button-ghost-inverted-color: var(--base-30);
|
||||
--button-ghost-inverted-color-hover: var(--base-10);
|
||||
|
||||
// Forms
|
||||
--form-bg: #f4f5f7;
|
||||
|
|
|
|||
|
|
@ -78,31 +78,61 @@
|
|||
// Links
|
||||
--link-color: var(--base-90);
|
||||
--link-color-hover: var(--accent-brand-lighter);
|
||||
--link-bg-hover: var(--base-0);
|
||||
--link-bg-hover-alt: var(--base-inverted);
|
||||
--link-brand-color: #17a1f6;
|
||||
--link-color-current: var(--base-100);
|
||||
--link-color-secondary: var(--base-70);
|
||||
--link-color-secondary-hover: var(--base-80);
|
||||
--link-branded-color: #17a1f6;
|
||||
--link-bg-hover: var(--base-0);
|
||||
--link-bg-hover-alt: var(--base-inverted);
|
||||
--link-bg-current: var(--base-inverted);
|
||||
|
||||
// Primary buttons
|
||||
--button-primary-bg: var(--accent-success);
|
||||
--button-primary-color: var(--base-0);
|
||||
--button-primary-bg-hover: var(--accent-success-darker);
|
||||
--button-primary-color: var(--base-0);
|
||||
--button-primary-color-hover: var(--base-inverted);
|
||||
//-- Inverted
|
||||
--button-primary-inverted-bg: var(--accent-success);
|
||||
--button-primary-inverted-bg-hover: var(--accent-success-darker);
|
||||
--button-primary-inverted-color: var(--base-0);
|
||||
--button-primary-inverted-color-hover: var(--base-0);
|
||||
|
||||
// Secondary buttons
|
||||
--button-secondary-bg: var(--base-20);
|
||||
--button-secondary-color: var(--base-80);
|
||||
--button-secondary-bg-hover: var(--base-30);
|
||||
--button-secondary-color: var(--base-80);
|
||||
--button-secondary-color-hover: var(--base-100);
|
||||
//-- Inverted
|
||||
--button-secondary-inverted-bg: var(--base-70);
|
||||
--button-secondary-inverted-bg-hover: var(--base-60);
|
||||
--button-secondary-inverted-color: var(--base-10);
|
||||
--button-secondary-inverted-color-hover: var(--base-0);
|
||||
|
||||
// Outlined buttons
|
||||
--button-outlined-bg: var(--base-20);
|
||||
--button-outlined-bg: transparent;
|
||||
--button-outlined-bg-hover: rgba(255, 255, 255, 0.035);
|
||||
--button-outlined-border: var(--base-20);
|
||||
--button-outlined-border-hover: var(--base-30);
|
||||
--button-outlined-color: var(--base-80);
|
||||
--button-outlined-bg-hover: var(--base-30);
|
||||
--button-outlined-color-hover: var(--base-100);
|
||||
//-- Inverted
|
||||
--button-outlined-inverted-bg: transparent;
|
||||
--button-outlined-inverted-bg-hover: rgba(0, 0, 0, 0.1);
|
||||
--button-outlined-inverted-border: var(--base-60);
|
||||
--button-outlined-inverted-border-hover: var(--base-40);
|
||||
--button-outlined-inverted-color: var(--base-30);
|
||||
--button-outlined-inverted-color-hover: var(--base-10);
|
||||
|
||||
// Ghost buttons
|
||||
--button-ghost-bg: transparent;
|
||||
--button-ghost-bg-hover: rgba(255, 255, 255, 0.035);
|
||||
--button-ghost-color: var(--base-80);
|
||||
--button-ghost-color-hover: var(--base-100);
|
||||
//-- Inverted
|
||||
--button-ghost-inverted-bg: transparent;
|
||||
--button-ghost-inverted-bg-hover: rgba(0, 0, 0, 0.1);
|
||||
--button-ghost-inverted-color: var(--base-30);
|
||||
--button-ghost-inverted-color-hover: var(--base-10);
|
||||
|
||||
// Forms
|
||||
--form-bg: var(--base-20);
|
||||
|
|
|
|||
|
|
@ -79,28 +79,58 @@
|
|||
--link-color-current: var(--base-100);
|
||||
--link-color-secondary: var(--base-70);
|
||||
--link-color-secondary-hover: var(--base-80);
|
||||
--link-branded-color: #4e57ef;
|
||||
--link-brand-color: #4e57ef;
|
||||
--link-bg-hover: var(--base-0);
|
||||
--link-bg-hover-alt: var(--base-inverted);
|
||||
--link-bg-current: var(--base-inverted);
|
||||
|
||||
// Primary buttons
|
||||
--button-primary-bg: var(--accent-brand);
|
||||
--button-primary-color: var(--base-0);
|
||||
--button-primary-bg-hover: var(--accent-brand-darker);
|
||||
--button-primary-color-hover: var(--base-inverted);
|
||||
--button-primary-color: var(--base-0);
|
||||
--button-primary-color-hover: var(--base-0);
|
||||
//-- Inverted
|
||||
--button-primary-inverted-bg: var(--accent-brand);
|
||||
--button-primary-inverted-bg-hover: var(--accent-brand-darker);
|
||||
--button-primary-inverted-color: var(--base-0);
|
||||
--button-primary-inverted-color-hover: var(--base-0);
|
||||
|
||||
// Secondary buttons
|
||||
--button-secondary-bg: var(--base-20);
|
||||
--button-secondary-color: var(--base-80);
|
||||
--button-secondary-bg-hover: var(--base-30);
|
||||
--button-secondary-color-hover: var(--base-100);
|
||||
--button-secondary-bg: var(--base-10);
|
||||
--button-secondary-bg-hover: var(--base-20);
|
||||
--button-secondary-color: var(--base-70);
|
||||
--button-secondary-color-hover: var(--base-90);
|
||||
//-- Inverted
|
||||
--button-secondary-inverted-bg: var(--base-60);
|
||||
--button-secondary-inverted-bg-hover: var(--base-60);
|
||||
--button-secondary-inverted-color: var(--base-10);
|
||||
--button-secondary-inverted-color-hover: var(--base-0);
|
||||
|
||||
// Outlined buttons
|
||||
--button-outlined-bg: var(--base-20);
|
||||
--button-outlined-color: var(--base-80);
|
||||
--button-outlined-bg-hover: var(--base-30);
|
||||
--button-outlined-color-hover: var(--base-100);
|
||||
--button-outlined-bg: transparent;
|
||||
--button-outlined-bg-hover: rgba(0, 0, 0, 0.035);
|
||||
--button-outlined-border: var(--base-20);
|
||||
--button-outlined-border-hover: var(--base-40);
|
||||
--button-outlined-color: var(--base-70);
|
||||
--button-outlined-color-hover: var(--base-90);
|
||||
//-- Inverted
|
||||
--button-outlined-inverted-bg: transparent;
|
||||
--button-outlined-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
||||
--button-outlined-inverted-border: var(--base-60);
|
||||
--button-outlined-inverted-border-hover: var(--base-40);
|
||||
--button-outlined-inverted-color: var(--base-30);
|
||||
--button-outlined-inverted-color-hover: var(--base-10);
|
||||
|
||||
// Ghost buttons
|
||||
--button-ghost-bg: transparent;
|
||||
--button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
|
||||
--button-ghost-color: var(--base-90);
|
||||
--button-ghost-color-hover: var(--base-100);
|
||||
//-- Inverted
|
||||
--button-ghost-inverted-bg: transparent;
|
||||
--button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
||||
--button-ghost-inverted-color: var(--base-30);
|
||||
--button-ghost-inverted-color-hover: var(--base-10);
|
||||
|
||||
// Forms
|
||||
--form-bg: #fff7f9;
|
||||
|
|
@ -119,7 +149,7 @@
|
|||
--box-darker: var(--base-100);
|
||||
|
||||
// Indicators
|
||||
--indicator-accent-bg: var(--link-branded-color);
|
||||
--indicator-accent-bg: var(--link-brand-color);
|
||||
--indicator-accent-color: var(--body-color-inverted);
|
||||
--indicator-critical-bg: var(--base-80);
|
||||
--indicator-critical-color: var(--body-color-inverted);
|
||||
|
|
|
|||
|
|
@ -104,6 +104,7 @@ export class CommentSubscription extends Component {
|
|||
<Button
|
||||
variant="outlined"
|
||||
icon={CogIcon}
|
||||
contentType="icon"
|
||||
onClick={(_event) => {
|
||||
this.setState({ showOptions: !showOptions });
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,10 @@ import { defaultChildrenPropTypes } from '../../src/components/common-prop-types
|
|||
function getAdditionalClassNames({
|
||||
variant,
|
||||
className,
|
||||
icon,
|
||||
contentType,
|
||||
size,
|
||||
inverted,
|
||||
disabled,
|
||||
children,
|
||||
}) {
|
||||
let additionalClassNames = '';
|
||||
|
||||
|
|
@ -15,17 +16,22 @@ function getAdditionalClassNames({
|
|||
additionalClassNames += ` crayons-btn--${variant}`;
|
||||
}
|
||||
|
||||
if (icon) {
|
||||
additionalClassNames +=
|
||||
children.length > 0
|
||||
? ' crayons-btn--icon-left'
|
||||
: ' crayons-btn--icon-alone';
|
||||
if (size && size.length > 0 && size !== 'default') {
|
||||
additionalClassNames += ` crayons-btn--${size}`;
|
||||
}
|
||||
|
||||
if (contentType && contentType.length > 0 && contentType !== 'text') {
|
||||
additionalClassNames += ` crayons-btn--${contentType}`;
|
||||
}
|
||||
|
||||
if (disabled) {
|
||||
additionalClassNames += ' crayons-btn--disabled';
|
||||
}
|
||||
|
||||
if (inverted) {
|
||||
additionalClassNames += ' crayons-btn--inverted';
|
||||
}
|
||||
|
||||
if (className && className.length > 0) {
|
||||
additionalClassNames += ` ${className}`;
|
||||
}
|
||||
|
|
@ -37,6 +43,9 @@ export const Button = ({
|
|||
children,
|
||||
variant = 'primary',
|
||||
tagName = 'button',
|
||||
inverted,
|
||||
contentType = 'text',
|
||||
size = 'default',
|
||||
className,
|
||||
icon,
|
||||
url,
|
||||
|
|
@ -59,8 +68,11 @@ export const Button = ({
|
|||
<ComponentName
|
||||
className={`crayons-btn${getAdditionalClassNames({
|
||||
variant,
|
||||
size,
|
||||
contentType,
|
||||
className,
|
||||
icon,
|
||||
inverted,
|
||||
disabled: tagName === 'a' && disabled,
|
||||
children,
|
||||
})}`}
|
||||
|
|
@ -71,8 +83,16 @@ export const Button = ({
|
|||
onBlur={onBlur}
|
||||
{...otherProps}
|
||||
>
|
||||
{Icon && <Icon />}
|
||||
{children}
|
||||
{contentType !== 'text' && contentType !== 'icon-right' && Icon && (
|
||||
<Icon />
|
||||
)}
|
||||
{(contentType === 'text' ||
|
||||
contentType === 'icon-left' ||
|
||||
contentType === 'icon-right') &&
|
||||
children}
|
||||
{contentType !== 'text' && contentType === 'icon-right' && Icon && (
|
||||
<Icon />
|
||||
)}
|
||||
</ComponentName>
|
||||
);
|
||||
};
|
||||
|
|
@ -85,6 +105,7 @@ Button.defaultProps = {
|
|||
url: undefined,
|
||||
buttonType: 'button',
|
||||
disabled: false,
|
||||
inverted: false,
|
||||
onClick: undefined,
|
||||
onMouseOver: undefined,
|
||||
onMouseOut: undefined,
|
||||
|
|
@ -94,14 +115,32 @@ Button.defaultProps = {
|
|||
|
||||
Button.propTypes = {
|
||||
children: defaultChildrenPropTypes.isRequired,
|
||||
variant: PropTypes.oneOf(['primary', 'secondary', 'outlined', 'danger'])
|
||||
.isRequired,
|
||||
variant: PropTypes.oneOf([
|
||||
'primary',
|
||||
'secondary',
|
||||
'outlined',
|
||||
'danger',
|
||||
'ghost',
|
||||
'ghost-brand',
|
||||
'ghost-success',
|
||||
'ghost-warning',
|
||||
'ghost-danger',
|
||||
]).isRequired,
|
||||
contentType: PropTypes.oneOf([
|
||||
'text',
|
||||
'icon-left',
|
||||
'icon-right',
|
||||
'icon',
|
||||
'icon-rounded',
|
||||
]).isRequired,
|
||||
inverted: PropTypes.bool,
|
||||
tagName: PropTypes.oneOf(['a', 'button']).isRequired,
|
||||
className: PropTypes.string,
|
||||
icon: PropTypes.node,
|
||||
url: PropTypes.string,
|
||||
buttonType: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
size: PropTypes.oneOf(['default', 's', 'l', 'xl']).isRequired,
|
||||
onClick: PropTypes.func,
|
||||
onMouseOver: PropTypes.func,
|
||||
onMouseOut: PropTypes.func,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
import { h } from 'preact';
|
||||
import { withKnobs, object, text, boolean } from '@storybook/addon-knobs/react';
|
||||
import {
|
||||
withKnobs,
|
||||
object,
|
||||
text,
|
||||
boolean,
|
||||
select,
|
||||
} from '@storybook/addon-knobs/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Button } from '@crayons';
|
||||
|
||||
|
|
@ -20,10 +26,53 @@ export default {
|
|||
|
||||
export const Default = () => (
|
||||
<Button
|
||||
variant={select(
|
||||
'variant',
|
||||
{
|
||||
Primary: 'primary',
|
||||
Secondary: 'secondary',
|
||||
Outlined: 'outlined',
|
||||
Danger: 'danger',
|
||||
Ghost: 'ghost',
|
||||
'Ghost Brand': 'ghost-brand',
|
||||
'Ghost Success': 'ghost-success',
|
||||
'Ghost Warning': 'ghost-warning',
|
||||
'Ghost Danger': 'ghost-danger',
|
||||
},
|
||||
'primary',
|
||||
)}
|
||||
size={select(
|
||||
'size',
|
||||
{
|
||||
Small: 's',
|
||||
Default: 'default',
|
||||
Large: 'l',
|
||||
'Extra Large': 'xl',
|
||||
},
|
||||
'default',
|
||||
)}
|
||||
contentType={select(
|
||||
'contentType',
|
||||
{
|
||||
Text: 'text',
|
||||
'Icon + Text': 'icon-left',
|
||||
'Text + Icon': 'icon-right',
|
||||
Icon: 'icon',
|
||||
'Icon Rounded': 'icon-rounded',
|
||||
},
|
||||
'text',
|
||||
)}
|
||||
icon={object('icon')}
|
||||
variant={text('variant')}
|
||||
inverted={boolean('inverted', false)}
|
||||
className={text('className')}
|
||||
tagName={text('tagName', 'button')}
|
||||
tagName={select(
|
||||
'tagName',
|
||||
{
|
||||
Button: 'button',
|
||||
A: 'a',
|
||||
},
|
||||
'button',
|
||||
)}
|
||||
url={text('url')}
|
||||
buttonType={text('buttonType')}
|
||||
disabled={boolean('disabled', false)}
|
||||
|
|
@ -34,67 +83,10 @@ export const Default = () => (
|
|||
);
|
||||
|
||||
Default.story = {
|
||||
name: 'default',
|
||||
name: 'Buttons',
|
||||
};
|
||||
|
||||
export const Secondary = () => (
|
||||
<Button
|
||||
variant={text('variant', 'secondary')}
|
||||
icon={object('icon')}
|
||||
className={text('className')}
|
||||
tagName={text('tagName', 'button')}
|
||||
url={text('url')}
|
||||
buttonType={text('buttonType')}
|
||||
disabled={boolean('disabled', false)}
|
||||
{...commonProps}
|
||||
>
|
||||
Hello world!
|
||||
</Button>
|
||||
);
|
||||
|
||||
Secondary.story = {
|
||||
name: 'secondary',
|
||||
};
|
||||
|
||||
export const Outlined = () => (
|
||||
<Button
|
||||
variant={text('variant', 'outlined')}
|
||||
icon={object('icon')}
|
||||
className={text('className')}
|
||||
tagName={text('tagName', 'button')}
|
||||
url={text('url')}
|
||||
buttonType={text('buttonType')}
|
||||
disabled={boolean('disabled', false)}
|
||||
{...commonProps}
|
||||
>
|
||||
Hello world!
|
||||
</Button>
|
||||
);
|
||||
|
||||
Outlined.story = {
|
||||
name: 'outlined',
|
||||
};
|
||||
|
||||
export const Danger = () => (
|
||||
<Button
|
||||
variant={text('variant', 'danger')}
|
||||
icon={object('icon')}
|
||||
className={text('className')}
|
||||
tagName={text('tagName', 'button')}
|
||||
url={text('url')}
|
||||
buttonType={text('buttonType')}
|
||||
disabled={boolean('disabled', false)}
|
||||
{...commonProps}
|
||||
>
|
||||
Hello world!
|
||||
</Button>
|
||||
);
|
||||
|
||||
Danger.story = {
|
||||
name: 'danger',
|
||||
};
|
||||
|
||||
export const IconWithText = () => {
|
||||
export const ButtonWithIcon = () => {
|
||||
const Icon = () => (
|
||||
<svg
|
||||
width="24"
|
||||
|
|
@ -108,10 +100,53 @@ export const IconWithText = () => {
|
|||
|
||||
return (
|
||||
<Button
|
||||
variant={select(
|
||||
'variant',
|
||||
{
|
||||
Primary: 'primary',
|
||||
Secondary: 'secondary',
|
||||
Outlined: 'outlined',
|
||||
Danger: 'danger',
|
||||
Ghost: 'ghost',
|
||||
'Ghost Brand': 'ghost-brand',
|
||||
'Ghost Success': 'ghost-success',
|
||||
'Ghost Warning': 'ghost-warning',
|
||||
'Ghost Danger': 'ghost-danger',
|
||||
},
|
||||
'primary',
|
||||
)}
|
||||
size={select(
|
||||
'size',
|
||||
{
|
||||
Small: 's',
|
||||
Default: 'default',
|
||||
Large: 'l',
|
||||
'Extra Large': 'xl',
|
||||
},
|
||||
'default',
|
||||
)}
|
||||
contentType={select(
|
||||
'contentType',
|
||||
{
|
||||
Text: 'text',
|
||||
'Icon + Text': 'icon-left',
|
||||
'Text + Icon': 'icon-right',
|
||||
Icon: 'icon',
|
||||
'Icon Rounded': 'icon-rounded',
|
||||
},
|
||||
'icon-left',
|
||||
)}
|
||||
icon={object('icon', Icon)}
|
||||
variant={text('variant')}
|
||||
inverted={boolean('inverted', false)}
|
||||
className={text('className')}
|
||||
tagName={text('tagName', 'button')}
|
||||
tagName={select(
|
||||
'tagName',
|
||||
{
|
||||
Button: 'button',
|
||||
A: 'a',
|
||||
},
|
||||
'button',
|
||||
)}
|
||||
url={text('url')}
|
||||
buttonType={text('buttonType')}
|
||||
disabled={boolean('disabled', false)}
|
||||
|
|
@ -122,55 +157,6 @@ export const IconWithText = () => {
|
|||
);
|
||||
};
|
||||
|
||||
IconWithText.story = {
|
||||
name: 'icon with text',
|
||||
};
|
||||
|
||||
export const IconOnly = () => {
|
||||
const Icon = () => (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="crayons-icon"
|
||||
>
|
||||
<path d="M9.99999 15.172L19.192 5.979L20.607 7.393L9.99999 18L3.63599 11.636L5.04999 10.222L9.99999 15.172Z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
return (
|
||||
<Button
|
||||
icon={object('icon', Icon)}
|
||||
variant={text('variant')}
|
||||
className={text('className')}
|
||||
tagName={text('tagName', 'button')}
|
||||
url={text('url')}
|
||||
buttonType={text('buttonType')}
|
||||
disabled={boolean('disabled', false)}
|
||||
{...commonProps}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
IconOnly.story = {
|
||||
name: 'icon only',
|
||||
};
|
||||
|
||||
export const ButtonAsLink = () => (
|
||||
<Button
|
||||
variant={text('variant')}
|
||||
className={text('className')}
|
||||
tagName={text('tagName', 'a')}
|
||||
icon={object('icon')}
|
||||
url={text('url', '#')}
|
||||
buttonType={text('buttonType')}
|
||||
disabled={boolean('disabled', false)}
|
||||
{...commonProps}
|
||||
>
|
||||
Hello world!
|
||||
</Button>
|
||||
);
|
||||
|
||||
ButtonAsLink.story = {
|
||||
name: 'button as link',
|
||||
ButtonWithIcon.story = {
|
||||
name: 'Buttons with Icon',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,57 +7,97 @@ export default {
|
|||
};
|
||||
|
||||
export const Default = () => (
|
||||
<a href="/" className="crayons-btn">
|
||||
<button type="button" className="crayons-btn">
|
||||
Button label
|
||||
</a>
|
||||
</button>
|
||||
);
|
||||
|
||||
Default.story = {
|
||||
name: 'default',
|
||||
};
|
||||
|
||||
export const Full = () => (
|
||||
<a href="/" className="crayons-btn crayons-btn--full">
|
||||
Full Button label
|
||||
</a>
|
||||
);
|
||||
|
||||
Full.story = {
|
||||
name: 'full',
|
||||
name: 'Default',
|
||||
};
|
||||
|
||||
export const Secondary = () => (
|
||||
<a href="/" className="crayons-btn crayons-btn--secondary">
|
||||
<button type="button" className="crayons-btn crayons-btn--secondary">
|
||||
Secondary Button label
|
||||
</a>
|
||||
</button>
|
||||
);
|
||||
|
||||
Secondary.story = {
|
||||
name: 'secondary',
|
||||
name: 'Secondary',
|
||||
};
|
||||
|
||||
export const Outlined = () => (
|
||||
<a href="/" className="crayons-btn crayons-btn--outlined">
|
||||
<button type="button" className="crayons-btn crayons-btn--outlined">
|
||||
Outlined Button label
|
||||
</a>
|
||||
</button>
|
||||
);
|
||||
|
||||
Outlined.story = {
|
||||
name: 'outlined',
|
||||
name: 'Outlined',
|
||||
};
|
||||
|
||||
export const Danger = () => (
|
||||
<a href="/" className="crayons-btn crayons-btn--danger">
|
||||
<button type="button" className="crayons-btn crayons-btn--danger">
|
||||
Danger Button label
|
||||
</a>
|
||||
</button>
|
||||
);
|
||||
|
||||
Danger.story = {
|
||||
name: 'story',
|
||||
name: 'Danger',
|
||||
};
|
||||
|
||||
export const Ghost = () => (
|
||||
<button type="button" className="crayons-btn crayons-btn--ghost">
|
||||
Ghost Button label
|
||||
</button>
|
||||
);
|
||||
|
||||
Ghost.story = {
|
||||
name: 'Ghost',
|
||||
};
|
||||
|
||||
export const GhostBrand = () => (
|
||||
<button type="button" className="crayons-btn crayons-btn--ghost-brand">
|
||||
Ghost Brand Button label
|
||||
</button>
|
||||
);
|
||||
|
||||
GhostBrand.story = {
|
||||
name: 'Ghost Brand',
|
||||
};
|
||||
|
||||
export const GhostSuccess = () => (
|
||||
<button type="button" className="crayons-btn crayons-btn--ghost-success">
|
||||
Ghost Success Button label
|
||||
</button>
|
||||
);
|
||||
|
||||
GhostSuccess.story = {
|
||||
name: 'Ghost Success',
|
||||
};
|
||||
|
||||
export const GhostWarning = () => (
|
||||
<button type="button" className="crayons-btn crayons-btn--ghost-warning">
|
||||
Ghost Warning Button label
|
||||
</button>
|
||||
);
|
||||
|
||||
GhostWarning.story = {
|
||||
name: 'Ghost Warning',
|
||||
};
|
||||
|
||||
export const GhostDanger = () => (
|
||||
<button type="button" className="crayons-btn crayons-btn--ghost-danger">
|
||||
Ghost Danger Button label
|
||||
</button>
|
||||
);
|
||||
|
||||
GhostDanger.story = {
|
||||
name: 'Ghost Danger',
|
||||
};
|
||||
|
||||
export const IconLeft = () => (
|
||||
<a href="/" className="crayons-btn crayons-btn--icon-left">
|
||||
<button type="button" className="crayons-btn crayons-btn--icon-left">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
|
|
@ -67,18 +107,16 @@ export const IconLeft = () => (
|
|||
<path d="M9.99999 15.172L19.192 5.979L20.607 7.393L9.99999 18L3.63599 11.636L5.04999 10.222L9.99999 15.172Z" />
|
||||
</svg>
|
||||
Button
|
||||
</a>
|
||||
</button>
|
||||
);
|
||||
|
||||
IconLeft.story = {
|
||||
name: 'icon to the left',
|
||||
name: 'Icon to the left',
|
||||
};
|
||||
|
||||
export const SecondaryFullIconLeft = () => (
|
||||
<a
|
||||
href="/"
|
||||
className="crayons-btn crayons-btn--secondary crayons-btn--full crayons-btn--icon-left"
|
||||
>
|
||||
export const IconRight = () => (
|
||||
<button type="button" className="crayons-btn crayons-btn--icon-right">
|
||||
Button
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
|
|
@ -87,10 +125,43 @@ export const SecondaryFullIconLeft = () => (
|
|||
>
|
||||
<path d="M9.99999 15.172L19.192 5.979L20.607 7.393L9.99999 18L3.63599 11.636L5.04999 10.222L9.99999 15.172Z" />
|
||||
</svg>
|
||||
Button
|
||||
</a>
|
||||
</button>
|
||||
);
|
||||
|
||||
SecondaryFullIconLeft.story = {
|
||||
name: 'secondary & full & icon to the left',
|
||||
IconRight.story = {
|
||||
name: 'Icon to the right',
|
||||
};
|
||||
|
||||
export const IconAlone = () => (
|
||||
<button type="button" className="crayons-btn crayons-btn--icon">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="crayons-icon"
|
||||
>
|
||||
<path d="M9.99999 15.172L19.192 5.979L20.607 7.393L9.99999 18L3.63599 11.636L5.04999 10.222L9.99999 15.172Z" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
|
||||
IconAlone.story = {
|
||||
name: 'Icon alone',
|
||||
};
|
||||
|
||||
export const IconRounded = () => (
|
||||
<button type="button" className="crayons-btn crayons-btn--icon-rounded">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="crayons-icon"
|
||||
>
|
||||
<path d="M9.99999 15.172L19.192 5.979L20.607 7.393L9.99999 18L3.63599 11.636L5.04999 10.222L9.99999 15.172Z" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
|
||||
IconRounded.story = {
|
||||
name: 'Icon rounded',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
import { h } from 'preact';
|
||||
|
||||
import '../../storybook-utiltiies/designSystem.scss';
|
||||
|
||||
export default {
|
||||
title: 'Components/Buttons/HTML',
|
||||
};
|
||||
|
||||
export const Default = () => (
|
||||
<button type="button" className="crayons-btn">
|
||||
Button label
|
||||
</button>
|
||||
);
|
||||
|
||||
Default.story = {
|
||||
name: 'Default',
|
||||
};
|
||||
|
||||
export const Small = () => (
|
||||
<button type="button" className="crayons-btn crayons-btn--s">
|
||||
Small Button label
|
||||
</button>
|
||||
);
|
||||
|
||||
Small.story = {
|
||||
name: 'Small',
|
||||
};
|
||||
|
||||
export const Large = () => (
|
||||
<button type="button" className="crayons-btn crayons-btn--l">
|
||||
Large Button label
|
||||
</button>
|
||||
);
|
||||
|
||||
Large.story = {
|
||||
name: 'Large',
|
||||
};
|
||||
|
||||
export const XLarge = () => (
|
||||
<button type="button" className="crayons-btn crayons-btn--xl">
|
||||
Extra Large Button label
|
||||
</button>
|
||||
);
|
||||
|
||||
XLarge.story = {
|
||||
name: 'Extra Large',
|
||||
};
|
||||
|
|
@ -55,7 +55,11 @@ describe('<Button /> component', () => {
|
|||
</svg>
|
||||
);
|
||||
|
||||
const tree = render(<Button icon={Icon}>Hello world!</Button>);
|
||||
const tree = render(
|
||||
<Button icon={Icon} contentType="icon-left">
|
||||
Hello world!
|
||||
</Button>,
|
||||
);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
|
|
@ -71,7 +75,7 @@ describe('<Button /> component', () => {
|
|||
</svg>
|
||||
);
|
||||
|
||||
const tree = render(<Button icon={Icon} />);
|
||||
const tree = render(<Button icon={Icon} contentType="icon" />);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ exports[`<Button /> component should render a button with with an icon when an i
|
|||
|
||||
exports[`<Button /> component should render a button with with an icon when an icon is set and there is no button text 1`] = `
|
||||
<button
|
||||
class="crayons-btn crayons-btn--icon-alone"
|
||||
class="crayons-btn crayons-btn--icon"
|
||||
disabled={false}
|
||||
type="button"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,19 @@ export default {
|
|||
};
|
||||
|
||||
export const Default = () => {
|
||||
return (
|
||||
<ButtonGroup>
|
||||
<Button variant="outlined">Action 1</Button>
|
||||
<Button variant="outlined">Action 2</Button>
|
||||
</ButtonGroup>
|
||||
);
|
||||
};
|
||||
|
||||
Default.story = {
|
||||
name: 'Text buttons',
|
||||
};
|
||||
|
||||
export const TextIcon = () => {
|
||||
const Icon = () => (
|
||||
<svg
|
||||
width="24"
|
||||
|
|
@ -21,8 +34,12 @@ export const Default = () => {
|
|||
|
||||
return (
|
||||
<ButtonGroup>
|
||||
<Button>Hello World!</Button>
|
||||
<Button icon={Icon} />
|
||||
<Button variant="secondary">Action 1</Button>
|
||||
<Button variant="secondary" icon={Icon} contentType="icon" />
|
||||
</ButtonGroup>
|
||||
);
|
||||
};
|
||||
|
||||
TextIcon.story = {
|
||||
name: 'Text button + Icon',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,20 +12,9 @@ exports[`<ButtonGroup /> component should render 1`] = `
|
|||
Hello World!
|
||||
</button>
|
||||
<button
|
||||
class="crayons-btn crayons-btn--icon-alone"
|
||||
class="crayons-btn"
|
||||
disabled={false}
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="crayons-icon"
|
||||
height="24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.99999 15.172L19.192 5.979L20.607 7.393L9.99999 18L3.63599 11.636L5.04999 10.222L9.99999 15.172Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -48,6 +48,11 @@
|
|||
.container > .body > *+* {
|
||||
margin-top: 16px !important;
|
||||
}
|
||||
|
||||
.buttons-table td,
|
||||
.buttons-table th {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
|
|
@ -563,28 +568,186 @@
|
|||
<p>It is ok to use ONLY Secondary or outlined button without being accompanied by Primary one.</p>
|
||||
<p>For Stacking buttons (vertically or horizontally) please use 8px spacing unit for default size buttons (no matter if stacking horizontally or vertically).</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="crayons-btn">Button label</a><br><br>
|
||||
<a href="#" class="crayons-btn crayons-btn--full">Full Button label</a><br><br>
|
||||
<a href="#" class="crayons-btn crayons-btn--secondary">Secondary Button label</a><br><br>
|
||||
<a href="#" class="crayons-btn crayons-btn--outlined">Outlined Button label</a><br><br>
|
||||
<a href="#" class="crayons-btn crayons-btn--text">Text Button label</a><br><br>
|
||||
<a href="#" class="crayons-btn crayons-btn--danger">Danger Button label</a><br><br>
|
||||
<a href="#" class="crayons-btn crayons-btn--icon-alone"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="crayons-icon"><path d="M9.99999 15.172L19.192 5.979L20.607 7.393L9.99999 18L3.63599 11.636L5.04999 10.222L9.99999 15.172Z" /></svg></a><br><br>
|
||||
<a href="#" class="crayons-btn crayons-btn--icon-left"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="crayons-icon"><path d="M9.99999 15.172L19.192 5.979L20.607 7.393L9.99999 18L3.63599 11.636L5.04999 10.222L9.99999 15.172Z" /></svg>Button</a><br><br>
|
||||
<a href="#" class="crayons-btn crayons-btn--secondary crayons-btn--full crayons-btn--icon-left"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="crayons-icon"><path d="M9.99999 15.172L19.192 5.979L20.607 7.393L9.99999 18L3.63599 11.636L5.04999 10.222L9.99999 15.172Z" /></svg>Button</a>
|
||||
<h3>Styles: </h3>
|
||||
<div class="buttons-table overflow-x-auto">
|
||||
<table class="w-max">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Style</th>
|
||||
<th>Default</th>
|
||||
<th>--icon-left</th>
|
||||
<th>--icon-right</th>
|
||||
<th>--icon</th>
|
||||
<th>--icon-rounded</th>
|
||||
<th>[disabled]</th>
|
||||
<th>--inverted</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="fs-s">.crayons-btn</td>
|
||||
<td><button class="crayons-btn">Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn" disabled>Button label</button></td>
|
||||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--inverted">Button label</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-s">.crayons-btn--secondary</td>
|
||||
<td><button class="crayons-btn crayons-btn--secondary">Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--secondary crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--secondary crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--secondary crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--secondary crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--secondary" disabled>Button label</button></td>
|
||||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--secondary crayons-btn--inverted">Button label</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-s">.crayons-btn--outlined</td>
|
||||
<td><button class="crayons-btn crayons-btn--outlined">Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--outlined crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--outlined crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--outlined crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--outlined crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--outlined" disabled>Button label</button></td>
|
||||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--outlined crayons-btn--inverted">Button label</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-s">.crayons-btn--ghost</td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost">Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost" disabled>Button label</button></td>
|
||||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--ghost crayons-btn--inverted">Button label</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-s">.crayons-btn--ghost-brand</td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-brand">Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-brand crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-brand crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-brand crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-brand crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-brand" disabled>Button label</button></td>
|
||||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--ghost-brand crayons-btn--inverted">Button label</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-s">.crayons-btn--ghost-success</td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-success">Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-success crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-success crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-success crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-success crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-success" disabled>Button label</button></td>
|
||||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Button label</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-s">.crayons-btn--ghost-warning</td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-warning">Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-warning crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-warning crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-warning crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-warning crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-warning" disabled>Button label</button></td>
|
||||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--ghost-warning crayons-btn--inverted">Button label</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-s">.crayons-btn--ghost-danger</td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-danger">Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-danger crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-danger crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-danger crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-danger crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--ghost-danger" disabled>Button label</button></td>
|
||||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--ghost-danger crayons-btn--inverted">Button label</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-s">.crayons-btn--danger</td>
|
||||
<td><button class="crayons-btn crayons-btn--danger">Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--danger crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--danger crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--danger crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--danger crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--danger" disabled>Button label</button></td>
|
||||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--danger crayons-btn--inverted">Button label</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<pre><%= '
|
||||
<a href="#" class="crayons-btn">Button label</a>
|
||||
<a href="#" class="... crayons-btn--full">Full Button label</a>
|
||||
<a href="#" class="... crayons-btn--secondary">Secondary Button label</a>
|
||||
<a href="#" class="... crayons-btn--outlined">Outlined Button label</a>
|
||||
<a href="#" class="... crayons-btn--text">Text Button label</a>
|
||||
<a href="#" class="... crayons-btn--ghost">Ghost Button label</a>
|
||||
<a href="#" class="... crayons-btn--ghost-brand">Ghost Brand Button label</a>
|
||||
<a href="#" class="... crayons-btn--ghost-success">Ghost Success Button label</a>
|
||||
<a href="#" class="... crayons-btn--ghost-warning">Ghost Warning Button label</a>
|
||||
<a href="#" class="... crayons-btn--ghost-danger">Ghost Danger Button label</a>
|
||||
<a href="#" class="... crayons-btn--danger">Danger Button label</a>
|
||||
<a href="#" class="... crayons-btn--icon-alone"><svg class="crayons-icon" ...>...</svg></a>
|
||||
<a href="#" class="... crayons-btn--icon-left"><svg class="crayons-icon" ...>...</svg>Button</a>
|
||||
<a href="#" class="... crayons-btn--secondary crayons-btn--full crayons-btn--icon-left"><svg class="crayons-icon" ...>...</svg>Button</a>
|
||||
<a href="#" class="... crayons-btn--icon"><svg class="crayons-icon" ...>...</svg></a>
|
||||
<a href="#" class="... crayons-btn--icon-rounded"><svg class="crayons-icon" ...>...</svg></a>
|
||||
<a href="#" class="... crayons-btn--icon-left"><svg class="crayons-icon" ...>...</svg>Button label</a>
|
||||
<a href="#" class="... crayons-btn--icon-right">Button label<svg class="crayons-icon" ...>...</svg></a>
|
||||
<a href="#" class="crayons-btn[--...] crayons-btn--inverted">Inverted style button</a>
|
||||
'.rstrip %></pre>
|
||||
|
||||
<div class="body">
|
||||
<h2>Sizes</h2>
|
||||
<p>Buttons come with bunch of sizes.</p>
|
||||
</div>
|
||||
<div class="buttons-table overflow-x-auto">
|
||||
<table class="w-max">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Style</th>
|
||||
<th>--s</th>
|
||||
<th>Default</th>
|
||||
<th>--l</th>
|
||||
<th>--xl</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="fs-s">Normal</td>
|
||||
<td><button class="crayons-btn crayons-btn--s">Button label</button></td>
|
||||
<td><button class="crayons-btn">Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--l">Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--xl">Button label</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-s">Icon left</td>
|
||||
<td><button class="crayons-btn crayons-btn--icon-left crayons-btn--s"><%= inline_svg_tag("small-bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--icon-left crayons-btn--l"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||||
<td><button class="crayons-btn crayons-btn--icon-left crayons-btn--xl"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-s">Icon right</td>
|
||||
<td><button class="crayons-btn crayons-btn--icon-right crayons-btn--s">Button label<%= inline_svg_tag("small-bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--icon-right crayons-btn--l">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--icon-right crayons-btn--xl">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fs-s">Only icon</td>
|
||||
<td><button class="crayons-btn crayons-btn--icon crayons-btn--s"><%= inline_svg_tag("small-bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--icon crayons-btn--l"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
<td><button class="crayons-btn crayons-btn--icon crayons-btn--xl"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<pre><%= '
|
||||
<a href="#" class="... crayons-btn--s">Small</a>
|
||||
<a href="#" class="crayons-btn">Default size</a>
|
||||
<a href="#" class="... crayons-btn--l">Large</a>
|
||||
<a href="#" class="... crayons-btn--xl">Extra Large</a>
|
||||
'.rstrip %></pre>
|
||||
|
||||
<div class="body">
|
||||
|
|
@ -598,19 +761,19 @@
|
|||
<div class="crayons-btn-group mb-4">
|
||||
<a href="#" class="crayons-btn">Action 1</a>
|
||||
<a href="#" class="crayons-btn">Action 2</a>
|
||||
<a href="#" class="crayons-btn crayons-btn--icon-alone"><%= inline_svg_tag("cog.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Preferences") %></a>
|
||||
<a href="#" class="crayons-btn crayons-btn--icon"><%= inline_svg_tag("cog.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Preferences") %></a>
|
||||
</div>
|
||||
|
||||
<div class="crayons-btn-group mb-4">
|
||||
<a href="#" class="crayons-btn crayons-btn--secondary">Action 1</a>
|
||||
<a href="#" class="crayons-btn crayons-btn--secondary">Action 2</a>
|
||||
<a href="#" class="crayons-btn crayons-btn--secondary crayons-btn--icon-alone"><%= inline_svg_tag("cog.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Preferences") %></a>
|
||||
<a href="#" class="crayons-btn crayons-btn--secondary crayons-btn--icon"><%= inline_svg_tag("cog.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Preferences") %></a>
|
||||
</div>
|
||||
|
||||
<div class="crayons-btn-group mb-4">
|
||||
<a href="#" class="crayons-btn crayons-btn--outlined">Action 1</a>
|
||||
<a href="#" class="crayons-btn crayons-btn--outlined">Action 2</a>
|
||||
<a href="#" class="crayons-btn crayons-btn--outlined crayons-btn--icon-alone"><%= inline_svg_tag("cog.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Preferences") %></a>
|
||||
<a href="#" class="crayons-btn crayons-btn--outlined crayons-btn--icon"><%= inline_svg_tag("cog.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Preferences") %></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue