New colors (#6650)
* add tons of colors * add tons of colors * moving cheese around and prepping for new theming system * documenting * . * moving theme code to own files * whitespaces
This commit is contained in:
ludwiczakpawel
GitHub
parent
693f27d000
commit
cad93674ff
35 changed files with 1519 additions and 451 deletions
|
|
@ -1,49 +1,26 @@
|
|||
@import '../vars/variables';
|
||||
|
||||
// box() - generating classes for different style
|
||||
//
|
||||
// This mixin automates process of generating classes for different
|
||||
// types of boxes: filled & outlined, each with variations
|
||||
// for several levels of elevation (box-shadow).
|
||||
//
|
||||
// @param {object} $this Caching current parent
|
||||
// @param {color} $color-1 Background color for filled variation
|
||||
// @param {color} $color-2 Accent color for border & shadow
|
||||
@mixin box($this: $this, $color-1: $smoke-90, $color-2: $smoke-100) {
|
||||
border-color: $color-2;
|
||||
|
||||
&#{$this}--filled {
|
||||
background-color: $color-1;
|
||||
}
|
||||
|
||||
@for $i from 1 through 3 {
|
||||
&#{$this + '--level-' + $i} {
|
||||
box-shadow: #{pow(2, $i) + px} #{pow(2, $i) + px} 0 $color-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../config/import';
|
||||
|
||||
.crayons-box {
|
||||
$this: &; // Caching current element, source: https://css-tricks.com/snippets/sass/caching-current-selector-sass/
|
||||
border: 2px solid;
|
||||
border-radius: $br-default;
|
||||
background-color: $snowflake;
|
||||
background-color: var(--container-bg);
|
||||
|
||||
@include box($this, $smoke-90, $smoke-100);
|
||||
@include box($this, var(--box), var(--box-darker));
|
||||
|
||||
&--danger {
|
||||
@include box($this, $raspberry, $raspberry-darker);
|
||||
@include box($this, var(--accent-danger), var(--accent-danger-darker));
|
||||
}
|
||||
|
||||
&--success {
|
||||
@include box($this, $avocado, $avocado-darker);
|
||||
@include box($this, var(--accent-success), var(--accent-success-darker));
|
||||
}
|
||||
|
||||
&--warning {
|
||||
@include box($this, $peanut, $peanut-darker);
|
||||
@include box($this, var(--accent-warning), var(--accent-warning-darker));
|
||||
}
|
||||
|
||||
&--info {
|
||||
@include box($this, $dolphin, $dolphin-darker);
|
||||
@include box($this, var(--accent-brand), var(--accent-brand-darker));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
|
||||
// Color
|
||||
@include generate-classes(
|
||||
|
|
@ -31,4 +31,4 @@
|
|||
'current': currentColor,
|
||||
),
|
||||
$colors
|
||||
);
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
|
||||
// Opacity
|
||||
@include generate-classes(
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
|
||||
// Flex flow
|
||||
@include generate-classes(
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
|
||||
// Gap
|
||||
@include generate-classes(
|
||||
|
|
@ -15,15 +15,15 @@
|
|||
'grid-cols',
|
||||
'grid-template-columns',
|
||||
(
|
||||
'none': none,
|
||||
'1': repeat(1,minmax(0,1fr)),
|
||||
'2': repeat(2,minmax(0,1fr)),
|
||||
'3': repeat(3,minmax(0,1fr)),
|
||||
'4': repeat(4,minmax(0,1fr)),
|
||||
'5': repeat(5,minmax(0,1fr)),
|
||||
'6': repeat(6,minmax(0,1fr)),
|
||||
'7': repeat(7,minmax(0,1fr)),
|
||||
'8': repeat(8,minmax(0,1fr)),
|
||||
'none': none,
|
||||
'1': repeat(1, minmax(0, 1fr)),
|
||||
'2': repeat(2, minmax(0, 1fr)),
|
||||
'3': repeat(3, minmax(0, 1fr)),
|
||||
'4': repeat(4, minmax(0, 1fr)),
|
||||
'5': repeat(5, minmax(0, 1fr)),
|
||||
'6': repeat(6, minmax(0, 1fr)),
|
||||
'7': repeat(7, minmax(0, 1fr)),
|
||||
'8': repeat(8, minmax(0, 1fr)),
|
||||
)
|
||||
);
|
||||
|
||||
|
|
@ -32,11 +32,11 @@
|
|||
'grid-rows',
|
||||
'grid-template-columns',
|
||||
(
|
||||
'none': none,
|
||||
'1': repeat(1,minmax(0,1fr)),
|
||||
'2': repeat(2,minmax(0,1fr)),
|
||||
'3': repeat(3,minmax(0,1fr)),
|
||||
'4': repeat(4,minmax(0,1fr)),
|
||||
'none': none,
|
||||
'1': repeat(1, minmax(0, 1fr)),
|
||||
'2': repeat(2, minmax(0, 1fr)),
|
||||
'3': repeat(3, minmax(0, 1fr)),
|
||||
'4': repeat(4, minmax(0, 1fr)),
|
||||
)
|
||||
);
|
||||
|
||||
|
|
@ -45,9 +45,9 @@
|
|||
'grid-flow',
|
||||
'grid-auto-flow',
|
||||
(
|
||||
'row': row,
|
||||
'col': column,
|
||||
'row-dense': row dense,
|
||||
'col-dense': column dense,
|
||||
'row': row,
|
||||
'col': column,
|
||||
'row-dense': row dense,
|
||||
'col-dense': column dense,
|
||||
)
|
||||
);
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
|
||||
// Display
|
||||
.hidden {
|
||||
|
|
@ -47,11 +47,11 @@
|
|||
|
||||
// Visibility
|
||||
.visible {
|
||||
visiblity: visible !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visiblity: hidden !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
// Box sizing
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
|
||||
// Positions
|
||||
.static {
|
||||
|
|
@ -192,7 +192,6 @@
|
|||
)
|
||||
);
|
||||
|
||||
|
||||
// Smooth scrolling on iOS
|
||||
.scrolling-touch {
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
|
||||
// Width
|
||||
@include generate-classes(
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
|
||||
// Margin
|
||||
@include generate-classes(
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
|
||||
// Font family
|
||||
@include generate-classes(
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
|
||||
// avatar-logo() - Generates styles for Avatars or Logos component
|
||||
//
|
||||
|
|
@ -29,7 +29,8 @@
|
|||
|
||||
&::after {
|
||||
content: '';
|
||||
border: 1px solid rgba($smoke-100, 0.15);
|
||||
border: 1px solid var(--body-color);
|
||||
opacity: 0.15;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
|
@ -61,5 +62,5 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include avatar-logo('avatar', 100%, $smoke-60);
|
||||
@include avatar-logo('logo', $br-default, $snowflake);
|
||||
@include avatar-logo('avatar', 100%, var(--widget-color-tertiary));
|
||||
@include avatar-logo('logo', $br-default, var(--body-color-inverted));
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
|
||||
// Basic styling
|
||||
.crayons-btn {
|
||||
|
|
@ -19,81 +19,59 @@
|
|||
|
||||
// Styles
|
||||
.crayons-btn {
|
||||
background-color: $dolphin;
|
||||
color: $snowflake;
|
||||
background-color: var(--button-primary-bg);
|
||||
color: var(--button-primary-color);
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
color: rgba($snowflake, 0.8);
|
||||
background-color: $dolphin-lighter;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $dolphin-darker;
|
||||
background-color: var(--button-primary-bg-hover);
|
||||
color: var(--button-primary-color-hover);
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
background-color: $smoke-20;
|
||||
color: $smoke-80;
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
color: $smoke-40;
|
||||
background-color: $smoke-10;
|
||||
}
|
||||
background-color: var(--button-secondary-bg);
|
||||
color: var(--button-secondary-color);
|
||||
|
||||
&:hover {
|
||||
color: $smoke-100;
|
||||
background-color: $smoke-30;
|
||||
background-color: var(--button-secondary-bg-hover);
|
||||
color: var(--button-secondary-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&--outlined {
|
||||
border: 2px solid $smoke-30;
|
||||
color: $smoke-80;
|
||||
padding: 0.375em 1em;
|
||||
background-color: transparent;
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
color: $smoke-40;
|
||||
border-color: $smoke-20;
|
||||
background-color: transparent;
|
||||
}
|
||||
border: 2px solid var(--button-outlined-bg);
|
||||
color: var(--button-outlined-color);
|
||||
|
||||
&:hover {
|
||||
color: $smoke-100;
|
||||
border-color: $smoke-40;
|
||||
background-color: transparent;
|
||||
color: var(--button-outlined-color-hover);
|
||||
border-color: var(--button-outlined-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background-color: $raspberry;
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
color: rgba($snowflake, 0.8);
|
||||
background-color: $raspberry-lighter;
|
||||
}
|
||||
background-color: var(--accent-danger);
|
||||
color: var(--base-inverted);
|
||||
|
||||
&:hover {
|
||||
background-color: $raspberry-darker;
|
||||
background-color: var(--accent-danger-darker);
|
||||
color: var(--base-inverted);
|
||||
}
|
||||
}
|
||||
|
||||
&--text {
|
||||
background-color: transparent;
|
||||
color: $dolphin;
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
background-color: transparent;
|
||||
color: $dolphin-lighter;
|
||||
}
|
||||
color: var(--link-brand);
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: $dolphin-darker;
|
||||
color: var(--link-brand-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
@import '../base/boxes';
|
||||
|
||||
%dropdown-style {
|
||||
|
|
|
|||
|
|
@ -1,34 +1,29 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
|
||||
%form-styling {
|
||||
background-color: $smoke-00;
|
||||
border: 1px solid $smoke-30;
|
||||
background-color: var(--form-bg);
|
||||
border: 1px solid var(--form-border);
|
||||
color: var(--body-color);
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border-radius: $br-default;
|
||||
transition: all $transition-props;
|
||||
|
||||
&-hover {
|
||||
border-color: $smoke-40;
|
||||
border-color: var(--form-border-hover);
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
color: $smoke-60;
|
||||
background-color: $smoke-10;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&-checked {
|
||||
background-color: $dolphin;
|
||||
border-color: $dolphin-darker;
|
||||
color: $snowflake;
|
||||
background-color: var(--form-border-focus);
|
||||
border-color: var(--form-border-focus);
|
||||
color: var(--form-bg-focus);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&-checked-disabled {
|
||||
background-color: $dolphin-lighter;
|
||||
border-color: $dolphin-lighter;
|
||||
color: rgba($snowflake, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Text inputs and textareas.
|
||||
|
|
@ -41,7 +36,7 @@
|
|||
@extend %form-styling;
|
||||
|
||||
&::placeholder {
|
||||
color: $smoke-60;
|
||||
color: var(--form-placeholder-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -49,9 +44,9 @@
|
|||
}
|
||||
|
||||
&:focus {
|
||||
background-color: $snowflake;
|
||||
border-color: $dolphin;
|
||||
box-shadow: 1px 1px 0 $dolphin;
|
||||
background-color: var(--form-bg-focus);
|
||||
border-color: var(--form-border-focus);
|
||||
box-shadow: 1px 1px 0 var(--form-border-focus);
|
||||
}
|
||||
|
||||
&--disabled,
|
||||
|
|
@ -94,7 +89,7 @@
|
|||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
@extend %form-styling-checked-disabled;
|
||||
@extend %form-styling-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -121,7 +116,7 @@
|
|||
$this: &;
|
||||
|
||||
&__label {
|
||||
color: $smoke-90;
|
||||
color: var(--label-primary);
|
||||
font-weight: $fw-medium;
|
||||
|
||||
+ .crayons-field__description {
|
||||
|
|
@ -130,7 +125,7 @@
|
|||
}
|
||||
|
||||
&__description {
|
||||
color: $smoke-60;
|
||||
color: var(--label-secondary);
|
||||
font-size: $fs-s;
|
||||
font-weight: $fw-normal; // for when it's inside --label
|
||||
margin: 0; //todo remove
|
||||
|
|
@ -149,8 +144,8 @@
|
|||
transition: all $transition-props;
|
||||
|
||||
&:hover {
|
||||
background: $smoke-10;
|
||||
box-shadow: 0 0 0 $su-1 $smoke-10;
|
||||
background: var(--body-bg);
|
||||
box-shadow: 0 0 0 $su-1 var(--body-bg);
|
||||
}
|
||||
|
||||
#{$this}__label {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
|
||||
// indicator() - Generates styles for Indicators
|
||||
//
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
@mixin indicator($this, $name, $color-1) {
|
||||
&#{'--' + $name} {
|
||||
background-color: $color-1;
|
||||
color: $snowflake;
|
||||
color: var(--body-color-inverted);
|
||||
&#{$this + '--outlined'} {
|
||||
background-color: transparent;
|
||||
color: $color-1;
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
font-family: $ff-accent;
|
||||
font-size: $fs-xs;
|
||||
padding: $su-1;
|
||||
background-color: $smoke-20;
|
||||
background-color: var(--button-secondary-bg);
|
||||
text-align: center;
|
||||
line-height: $lh-tight;
|
||||
border-radius: $br-default;
|
||||
|
|
@ -35,13 +35,13 @@
|
|||
|
||||
&--outlined {
|
||||
background-color: transparent;
|
||||
border: 1px solid $smoke-20;
|
||||
color: $smoke-80;
|
||||
border: 1px solid var(--button-secondary-bg);
|
||||
color: var(--button-secondary-color);
|
||||
}
|
||||
|
||||
@include indicator(&, accent, $dolphin);
|
||||
@include indicator(&, critical, $raspberry);
|
||||
@include indicator(&, inverted, $smoke-90);
|
||||
@include indicator(&, accent, var(--accent-brand));
|
||||
@include indicator(&, critical, var(--accent-danger));
|
||||
@include indicator(&, inverted, var(--widget-color));
|
||||
|
||||
// Circle, no text
|
||||
&--bullet {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
@import '../base/boxes';
|
||||
|
||||
%modal-style {
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
|
||||
.crayons-nav-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $su-2;
|
||||
border-radius: $br-default;
|
||||
color: $smoke-90;
|
||||
color: var(--link-dimmed-color);
|
||||
|
||||
&:hover:not(&--current) {
|
||||
background: $smoke-00;
|
||||
color: $smoke-100;
|
||||
background: var(--link-dimmed-bg-hover);
|
||||
color: var(--link-dimmed-color-hover);
|
||||
}
|
||||
|
||||
&--current {
|
||||
font-weight: $fw-medium;
|
||||
color: $smoke-100;
|
||||
background: $snowflake;
|
||||
background: var(--link-dimmed-bg-current);
|
||||
color: var(--link-dimmed-color-current);
|
||||
}
|
||||
|
||||
.crayons-icon {
|
||||
|
|
@ -44,16 +44,16 @@
|
|||
|
||||
&__item {
|
||||
padding: 0 0.5em;
|
||||
color: $smoke-80;
|
||||
color: var(--link-dimmed-secondary-color);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
color: $smoke-100;
|
||||
color: var(--link-dimmed-color-hover);
|
||||
}
|
||||
|
||||
&--current {
|
||||
color: $smoke-100;
|
||||
color: var(--link-dimmed-color-current);
|
||||
font-weight: $fw-medium;
|
||||
|
||||
&::after {
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
bottom: -2px;
|
||||
height: 2px;
|
||||
content: '';
|
||||
background-color: $dolphin;
|
||||
background-color: var(--accent-brand);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../vars/variables';
|
||||
@import '../config/import';
|
||||
@import '../base/boxes';
|
||||
|
||||
%notice-style {
|
||||
|
|
|
|||
132
app/assets/stylesheets/config/_colors.scss
Normal file
132
app/assets/stylesheets/config/_colors.scss
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// Colors. /////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
//
|
||||
// All --base-* and --accent-* color variables will be used to generate
|
||||
// utlity-first classes (see config/import.scss & base/colors.scss for
|
||||
// reference). Other color variables are more functional and define usage
|
||||
// of particular colors in components and views.
|
||||
|
||||
:root {
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// Foundamental color variables. ///////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// Base
|
||||
--base-100: #08090a;
|
||||
--base-90: #202428;
|
||||
--base-80: #363d44;
|
||||
--base-70: #4d5760;
|
||||
--base-60: #64707d;
|
||||
--base-50: #7d8a97;
|
||||
--base-40: #99a3ad;
|
||||
--base-30: #b5bdc4;
|
||||
--base-20: #d2d6db;
|
||||
--base-10: #eef0f1;
|
||||
--base-0: #f9fafa;
|
||||
--base-inverted: #fff;
|
||||
|
||||
// Accent colors
|
||||
--accent-brand: #3b49df;
|
||||
--accent-brand-darker: #1827ce;
|
||||
--accent-brand-lighter: #8d95f2;
|
||||
|
||||
// Success
|
||||
--accent-success: #26d9ca;
|
||||
--accent-success-darker: #1ab3a6;
|
||||
--accent-success-lighter: #79ece2;
|
||||
|
||||
// Warning
|
||||
--accent-warning: #ffcf4c;
|
||||
--accent-warning-darker: #f5b400;
|
||||
--accent-warning-lighter: #ffe499;
|
||||
|
||||
// Danger
|
||||
--accent-danger: #dc1818;
|
||||
--accent-danger-darker: #c20a0a;
|
||||
--accent-danger-lighter: #ec5050;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// Functional color variables. /////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// Main colors
|
||||
--body-bg: var(--base-10);
|
||||
--body-color: var(--base-100);
|
||||
--body-color-inverted: var(--base-inverted);
|
||||
|
||||
// Main content containers
|
||||
--container-bg: var(--base-inverted);
|
||||
--container-color: var(--base-100);
|
||||
--container-color-secondary: var(--base-70);
|
||||
--container-color-tertiary: var(--base-50);
|
||||
|
||||
// Secondary content containers
|
||||
--widget-bg: var(--base-0);
|
||||
--widget-color: var(--base-90);
|
||||
--widget-color-secondary: var(--base-70);
|
||||
--widget-color-tertiary: var(--base-50);
|
||||
--widget-headline: var(--base-100);
|
||||
|
||||
// Header
|
||||
--header-bg: var(--base-inverted);
|
||||
--header-icons-color: var(--base-70);
|
||||
--header-icons-color-hover: var(--base-100);
|
||||
|
||||
// Logo
|
||||
--logo-bg: var(--base-100);
|
||||
--logo-color: var(--base-inverted);
|
||||
|
||||
// Footer
|
||||
--footer-bg: var(--base-inverted);
|
||||
--footer-copy-color: var(--base-80);
|
||||
--footer-copy-secondary-color: var(--base-60);
|
||||
--footer-link-color: var(--base-80);
|
||||
--footer-link-color-hover: var(--base-100);
|
||||
|
||||
// Links in content
|
||||
--link-brand-color: var(--accent-brand);
|
||||
--link-brand-color-hover: var(--accent-brand-darker);
|
||||
|
||||
// Greyscale links, for places where we don't want to make them use accent color
|
||||
--link-dimmed-color: var(--base-90);
|
||||
--link-dimmed-color-secondary: var(--base-80);
|
||||
--link-dimmed-bg-hover: var(--base-0);
|
||||
--link-dimmed-color-hover: var(--base-100);
|
||||
--link-dimmed-bg-current: var(--base-inverted);
|
||||
--link-dimmed-color-current: var(--base-100);
|
||||
|
||||
// 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-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);
|
||||
|
||||
// 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);
|
||||
|
||||
// Forms
|
||||
--form-bg: var(--base-0);
|
||||
--form-bg-focus: var(--base-0);
|
||||
--form-border: var(--base-30);
|
||||
--form-border-hover: var(--base-40);
|
||||
--form-border-focus: var(--accent-brand);
|
||||
--form-placeholder-color: var(--base-60);
|
||||
|
||||
// Form lables
|
||||
--label-primary: var(--base-90);
|
||||
--label-secondary: var(--base-60);
|
||||
|
||||
// Default box
|
||||
--box: var(--base-90);
|
||||
--box-darker: var(--base-100);
|
||||
}
|
||||
225
app/assets/stylesheets/config/_import.scss
vendored
Normal file
225
app/assets/stylesheets/config/_import.scss
vendored
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// Colors. /////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
//
|
||||
// List of colors to be used to generate utility-frist classes,
|
||||
// using generate-classes() function. See files from /base folder
|
||||
// for reference.
|
||||
//
|
||||
// These colors are defined using some colors CSS variables defined
|
||||
// in config/_colors.scss. We only utilize some of these variables
|
||||
// for utility-classes because it doesn't make much sense to create
|
||||
// utility-class for ever single variable in config/_colors.scss.
|
||||
|
||||
$colors: (
|
||||
'base-100': var(--base-100),
|
||||
'base-90': var(--base-90),
|
||||
'base-80': var(--base-80),
|
||||
'base-70': var(--base-70),
|
||||
'base-60': var(--base-60),
|
||||
'base-50': var(--base-50),
|
||||
'base-40': var(--base-40),
|
||||
'base-30': var(--base-30),
|
||||
'base-20': var(--base-20),
|
||||
'base-10': var(--base-10),
|
||||
'base-0': var(--base-0),
|
||||
'base-inverted': var(--base-inverted),
|
||||
'accent-brand': var(--accent-brand),
|
||||
'accent-brand-darker': var(--accent-brand-darker),
|
||||
'accent-brand-lighter': var(--accent-brand-lighter),
|
||||
'accent-success': var(--accent-success),
|
||||
'accent-success-darker': var(--accent-success-darker),
|
||||
'accent-success-lighter': var(--accent-success-lighter),
|
||||
'accent-warninig': var(--accent-warning),
|
||||
'accent-warninig-darker': var(--accent-warning-darker),
|
||||
'accent-warninig-lighter': var(--accent-warning-lighter),
|
||||
'accent-danger': var(--accent-danger),
|
||||
'accent-danger-darker': var(--accent-danger-darker),
|
||||
'accent-danger-lighter': var(--accent-danger-lighter),
|
||||
);
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// [DRAFT] Responsiveness Breakpoints. /////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
//
|
||||
// List of breakpoints for our responsivness. Right now these are not
|
||||
// used anywhere. They are here as a placeholder.
|
||||
|
||||
$breakpoint-s: 640px;
|
||||
$breakpoint-m: 768px;
|
||||
$breakpoint-l: 1024px;
|
||||
$breakpoint-xl: 1280px;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// Spacing Units. //////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
//
|
||||
// List of spacing units to use across all our components.
|
||||
// • $(negaitve-)spacing-units variables are used for
|
||||
// generate-classes() function.
|
||||
|
||||
$su-1: 0.25rem; // 4px
|
||||
$su-2: 0.5rem; // 8px
|
||||
$su-3: 0.75rem; // 12px
|
||||
$su-4: 1rem; // 16px
|
||||
$su-5: 1.25rem; // 20px
|
||||
$su-6: 1.5rem; // 24px
|
||||
$su-7: 2rem; // 32px
|
||||
$su-8: 3rem; // 48px
|
||||
$su-9: 4rem; // 64px
|
||||
$su-10: 8rem; // 128px
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
$spacing-units: (
|
||||
'1': $su-1,
|
||||
'2': $su-2,
|
||||
'3': $su-3,
|
||||
'4': $su-4,
|
||||
'5': $su-5,
|
||||
'6': $su-6,
|
||||
'7': $su-7,
|
||||
'8': $su-8,
|
||||
'9': $su-9,
|
||||
'10': $su-10,
|
||||
);
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
$negative-spacing-units: (
|
||||
'1': -$su-1,
|
||||
'2': -$su-2,
|
||||
'3': -$su-3,
|
||||
'4': -$su-4,
|
||||
'5': -$su-5,
|
||||
'6': -$su-6,
|
||||
'7': -$su-7,
|
||||
'8': -$su-8,
|
||||
'9': -$su-9,
|
||||
'10': -$su-10,
|
||||
);
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// Border radius ///////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
$br-default: 3px;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// Transitions /////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
$transition-props: cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// Typography. /////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
//
|
||||
// List of variables for typography.
|
||||
// • Font families
|
||||
// • Font sizes
|
||||
// • Font weights
|
||||
// • Line heights
|
||||
|
||||
// Font families
|
||||
$ff-default: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
|
||||
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
$ff-accent: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
|
||||
monospace;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// Font sizes
|
||||
$fs-xs: 0.75rem; // 12px
|
||||
$fs-s: 0.875rem; // 14px
|
||||
$fs-base: 1rem; // 16px
|
||||
$fs-l: 1.125rem; // 18px
|
||||
$fs-xl: 1.25rem; // 20px
|
||||
$fs-2xl: 1.5rem; // 24px
|
||||
$fs-3xl: 1.875rem; // 30px
|
||||
$fs-4xl: 2.25rem; // 36px
|
||||
$fs-5xl: 3rem; // 48px
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// Font weights
|
||||
$fw-normal: 400;
|
||||
$fw-medium: 500;
|
||||
$fw-bold: 700;
|
||||
$fw-heavy: 800;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// Line heights
|
||||
$lh-tight: 1.25; // 20px for 16px font-size
|
||||
$lh-base: 1.5; // 24px for 16px font-size
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// Helpers /////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
//
|
||||
// Generators & functions utilized in other SCSS files. They are meant to simplify
|
||||
// process of creating styles etc.
|
||||
|
||||
// pow() - Raise number to the nth power
|
||||
//
|
||||
// @param {number} $base The base number
|
||||
// @param {number} $exponents The exponent to which to raise $base
|
||||
|
||||
@function pow($base, $exponents) {
|
||||
$raised: 1;
|
||||
|
||||
@for $i from 1 through $exponents {
|
||||
$raised: $raised * $base;
|
||||
}
|
||||
|
||||
@return $raised;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// generate-classes()
|
||||
//
|
||||
// Generating classes for Tailwind approach.
|
||||
//
|
||||
// @param {string} $prefix Prefix for utility class, for example `mr`
|
||||
// @param {string || list} $properties Defines CSS property(ies) that, for example `margin-right`
|
||||
// @param {list} $values-1 List of values for which we gonna generate classes
|
||||
// @param {list} $values-2 Additional list of values, useful when we want to combine two lists.
|
||||
|
||||
@mixin generate-classes($prefix, $properties, $values-1, $values-2: ()) {
|
||||
$values: map-merge($values-1, $values-2);
|
||||
@each $name, $value in $values {
|
||||
.#{$prefix}-#{$name} {
|
||||
@each $property in $properties {
|
||||
#{$property}: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// box() - generating classes for different style
|
||||
//
|
||||
// This mixin automates process of generating classes for different
|
||||
// types of boxes: filled & outlined, each with variations
|
||||
// for several levels of elevation (box-shadow).
|
||||
//
|
||||
// @param {object} $this Caching current parent
|
||||
// @param {color} $color-1 Background color for filled variation
|
||||
// @param {color} $color-2 Accent color for border & shadow
|
||||
|
||||
@mixin box($this: $this, $color-1: var(--box), $color-2: var(--box-darker)) {
|
||||
border-color: $color-2;
|
||||
|
||||
&#{$this}--filled {
|
||||
background-color: $color-1;
|
||||
}
|
||||
|
||||
@for $i from 1 through 3 {
|
||||
&#{$this + '--level-' + $i} {
|
||||
box-shadow: #{pow(2, $i) + px} #{pow(2, $i) + px} 0 $color-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@import 'config/colors';
|
||||
|
||||
@import 'variables';
|
||||
@import 'fundamentals';
|
||||
@import 'scaffolds';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import 'vars/variables';
|
||||
@import 'config/import';
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
|
|
|||
38
app/assets/stylesheets/themes/hacker.scss
Normal file
38
app/assets/stylesheets/themes/hacker.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
:root {
|
||||
--theme-background: #0a0a0a;
|
||||
--theme-color: #42ff87;
|
||||
--theme-opposite-color: #0d1219;
|
||||
--theme-logo-background: #42ff87;
|
||||
--theme-logo-color: #0a0a0a;
|
||||
--theme-code-background: #29292e;
|
||||
--theme-code-color: #42ff87;
|
||||
--theme-reaction-background: #202c3d;
|
||||
--theme-anchor-color: #e24ec1;
|
||||
--theme-secondary-color: #ebebeb;
|
||||
--theme-secondary-color-border: 1px solid #222f3f;
|
||||
--theme-top-bar-background: #1c1c1c;
|
||||
--theme-top-bar-background-hover: #27384c;
|
||||
--theme-top-bar-color: #fff;
|
||||
--theme-top-bar-search-background: #0a0a0a;
|
||||
--theme-top-bar-search-color: #42ff87;
|
||||
--theme-top-bar-write-background: #0a0a0a;
|
||||
--theme-top-bar-write-color: #42ff87;
|
||||
--theme-container-background: #030303;
|
||||
--theme-container-accent-background: #000f0b;
|
||||
--theme-invert-image: invert();
|
||||
--theme-container-background-hover: #1c2c3f;
|
||||
--theme-gradient-background: linear-gradient(
|
||||
to right,
|
||||
#010f06 8%,
|
||||
#121a16 18%,
|
||||
#010f06 33%
|
||||
);
|
||||
--theme-container-color: #42ff87;
|
||||
--theme-container-box-shadow: none;
|
||||
--theme-container-border: 1px solid #22303f;
|
||||
--theme-subtle-border: 1px solid #1f2c3a;
|
||||
--theme-social-icon-invert: invert(100);
|
||||
--theme-current-article-background: #1143ca;
|
||||
--theme-series-article-background: #006655;
|
||||
--theme-series-article-hover: #004035;
|
||||
}
|
||||
36
app/assets/stylesheets/themes/minimal.scss
Normal file
36
app/assets/stylesheets/themes/minimal.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
:root {
|
||||
--theme-background: #fcfcfc;
|
||||
--theme-color: #0a0a0a;
|
||||
--theme-opposite-color: #ffffff;
|
||||
--theme-logo-background: #e3e5ed;
|
||||
--theme-logo-color: #232426;
|
||||
--theme-code-background: #f9f9f9;
|
||||
--theme-code-color: #37383d;
|
||||
--theme-reaction-background: #eff0f2;
|
||||
--theme-anchor-color: #757ec6;
|
||||
--theme-secondary-color: #505159;
|
||||
--theme-secondary-color-border: 1px solid #e3e3e5;
|
||||
--theme-top-bar-background: #ffffff;
|
||||
--theme-top-bar-background-hover: #f9f9f9;
|
||||
--theme-top-bar-color: #0a0a0a;
|
||||
--theme-top-bar-search-background: #f4f5f7;
|
||||
--theme-top-bar-search-color: #0a0a0a;
|
||||
--theme-top-bar-write-background: #ffffff;
|
||||
--theme-top-bar-write-color: #0a0a0a;
|
||||
--theme-container-background: #ffffff;
|
||||
--theme-container-accent-background: #f4f5f7;
|
||||
--theme-invert-image: none;
|
||||
--theme-container-background-hover: #efefef;
|
||||
--theme-gradient-background: linear-gradient(
|
||||
to right,
|
||||
#f6f6f6 8%,
|
||||
#f0f0f0 18%,
|
||||
#f6f6f6 33%
|
||||
);
|
||||
--theme-container-color: #0a0a0a;
|
||||
--theme-container-box-shadow: none;
|
||||
--theme-container-border: 1px solid #e3e3e5;
|
||||
--theme-subtle-border: 1px solid #fcfcfc;
|
||||
--theme-social-icon-color: rgba(80, 81, 89, 0);
|
||||
--theme-social-icon-invert: invert(0);
|
||||
}
|
||||
39
app/assets/stylesheets/themes/night.scss
Normal file
39
app/assets/stylesheets/themes/night.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
:root {
|
||||
--theme-background: #0d1219;
|
||||
--theme-color: #fff;
|
||||
--theme-opposite-color: #0d1219;
|
||||
--theme-logo-background: #0a0a0a;
|
||||
--theme-logo-color: #fff;
|
||||
--theme-code-background: #29292e;
|
||||
--theme-code-color: #e6db74;
|
||||
--theme-reaction-background: #202c3d;
|
||||
--theme-anchor-color: #17a1f6;
|
||||
--theme-secondary-color: #cedae2;
|
||||
--theme-secondary-color-border: 1px solid #1c283b;
|
||||
--theme-top-bar-background: #1c2938;
|
||||
--theme-top-bar-background-hover: #27384c;
|
||||
--theme-top-bar-color: #fff;
|
||||
--theme-top-bar-search-background: #424a54;
|
||||
--theme-top-bar-search-color: #fff;
|
||||
--theme-top-bar-write-background: #00af81;
|
||||
--theme-top-bar-write-color: #fff;
|
||||
--theme-container-background: #141f2d;
|
||||
--theme-container-accent-background: #202c3d;
|
||||
--theme-container-background-hover: #1c2c3f;
|
||||
--theme-gradient-background: linear-gradient(
|
||||
to right,
|
||||
#293d56 8%,
|
||||
#282833 18%,
|
||||
#293d56 33%
|
||||
);
|
||||
--theme-container-color: #fff;
|
||||
--theme-container-box-shadow: none;
|
||||
--theme-container-border: 1px solid #22303f;
|
||||
--theme-subtle-border: 1px solid #1f2c3a;
|
||||
--theme-social-icon-invert: invert(100);
|
||||
--theme-social-icon-color: #cedae2;
|
||||
--theme-invert-image: invert();
|
||||
--theme-current-article-background: #1143ca;
|
||||
--theme-series-article-background: #314d9c;
|
||||
--theme-series-article-hover: #1b2e63;
|
||||
}
|
||||
37
app/assets/stylesheets/themes/pink.scss
Normal file
37
app/assets/stylesheets/themes/pink.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
:root {
|
||||
--theme-background: #fff7f9;
|
||||
--theme-color: #0a0a0a;
|
||||
--theme-opposite-color: #fff7f9;
|
||||
--theme-logo-background: #fff7f9;
|
||||
--theme-logo-color: #ff4983;
|
||||
--theme-code-background: #f9f9fa;
|
||||
--theme-code-color: #f92671;
|
||||
--theme-reaction-background: #eff0f2;
|
||||
--theme-anchor-color: #4e57ef;
|
||||
--theme-secondary-color: #4e57ef;
|
||||
--theme-secondary-color-border: 1px solid #ffe5ec;
|
||||
--theme-top-bar-background: #ff4983;
|
||||
--theme-top-bar-background-hover: #ff5b8f;
|
||||
--theme-top-bar-color: #fff;
|
||||
--theme-top-bar-search-background: #fff7f9;
|
||||
--theme-top-bar-search-color: #000;
|
||||
--theme-top-bar-write-background: #ff4983;
|
||||
--theme-top-bar-write-color: #fff;
|
||||
--theme-container-background: #fff;
|
||||
--theme-container-accent-background: #ffccdb;
|
||||
--theme-invert-image: none;
|
||||
--theme-container-background-hover: #ffe5eb;
|
||||
--theme-gradient-background: linear-gradient(
|
||||
to right,
|
||||
#fff 8%,
|
||||
#ffceda 18%,
|
||||
#fff7f9 33%
|
||||
);
|
||||
--theme-container-color: #333;
|
||||
--theme-container-box-shadow: none;
|
||||
--theme-container-border: 1px solid #ff4983;
|
||||
--theme-subtle-border: 1px solid #ffa8c3;
|
||||
--theme-social-icon-color: rgba(255, 204, 219, 0);
|
||||
--theme-social-icon-invert: invert(0);
|
||||
--theme-prime-option-border-color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
$smoke-100: #08090a;
|
||||
$smoke-90: #202428;
|
||||
$smoke-80: #363d44;
|
||||
$smoke-70: #4d5760;
|
||||
$smoke-60: #64707d;
|
||||
$smoke-50: #7d8a97;
|
||||
$smoke-40: #99a3ad;
|
||||
$smoke-30: #b5bdc4;
|
||||
$smoke-20: #d2d6db;
|
||||
$smoke-10: #eef0f1;
|
||||
$smoke-00: #f9fafa;
|
||||
|
||||
$snowflake: #fff;
|
||||
|
||||
$dolphin: #3b49df;
|
||||
$dolphin-darker: #1827ce;
|
||||
$dolphin-lighter: #8d95f2;
|
||||
|
||||
$avocado: #26d9ca;
|
||||
$avocado-darker: #1ab3a6;
|
||||
$avocado-lighter: #79ece2;
|
||||
|
||||
$peanut: #ffcf4c;
|
||||
$peanut-darker: #f5b400;
|
||||
$peanut-lighter: #ffe499;
|
||||
|
||||
$raspberry: #dc1818;
|
||||
$raspberry-darker: #c20a0a;
|
||||
$raspberry-lighter: #ec5050;
|
||||
|
||||
$colors: (
|
||||
'smoke-100': $smoke-100,
|
||||
'smoke-90': $smoke-90,
|
||||
'smoke-80': $smoke-80,
|
||||
'smoke-70': $smoke-70,
|
||||
'smoke-60': $smoke-60,
|
||||
'smoke-50': $smoke-50,
|
||||
'smoke-40': $smoke-40,
|
||||
'smoke-30': $smoke-30,
|
||||
'smoke-20': $smoke-20,
|
||||
'smoke-10': $smoke-10,
|
||||
'smoke-00': $smoke-00,
|
||||
'snowflake': $snowflake,
|
||||
'dolphin': $dolphin,
|
||||
'dolphin-darker': $dolphin-darker,
|
||||
'dolphin-lighter': $dolphin-lighter,
|
||||
'avocado': $avocado,
|
||||
'avocado-darker': $avocado-darker,
|
||||
'avocado-lighter': $avocado-lighter,
|
||||
'peanut': $peanut,
|
||||
'peanut-darker': $peanut-darker,
|
||||
'peanut-lighter': $peanut-lighter,
|
||||
'raspberry': $raspberry,
|
||||
'raspberry-darker': $raspberry-darker,
|
||||
'raspberry-lighter': $raspberry-lighter,
|
||||
);
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
$su-1: 0.25rem; // 4px
|
||||
$su-2: 0.5rem; // 8px
|
||||
$su-3: 0.75rem; // 12px
|
||||
$su-4: 1rem; // 16px
|
||||
$su-5: 1.25rem; // 20px
|
||||
$su-6: 1.5rem; // 24px
|
||||
$su-7: 2rem; // 32px
|
||||
$su-8: 3rem; // 48px
|
||||
$su-9: 4rem; // 64px
|
||||
$su-10: 8rem; // 128px
|
||||
|
||||
$spacing-units: (
|
||||
'1': $su-1,
|
||||
'2': $su-2,
|
||||
'3': $su-3,
|
||||
'4': $su-4,
|
||||
'5': $su-5,
|
||||
'6': $su-6,
|
||||
'7': $su-7,
|
||||
'8': $su-8,
|
||||
'9': $su-9,
|
||||
'10': $su-10,
|
||||
);
|
||||
|
||||
$negative-spacing-units: (
|
||||
'1': -$su-1,
|
||||
'2': -$su-2,
|
||||
'3': -$su-3,
|
||||
'4': -$su-4,
|
||||
'5': -$su-5,
|
||||
'6': -$su-6,
|
||||
'7': -$su-7,
|
||||
'8': -$su-8,
|
||||
'9': -$su-9,
|
||||
'10': -$su-10,
|
||||
);
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
// Font stacks
|
||||
$ff-default: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
|
||||
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
$ff-accent: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
|
||||
monospace;
|
||||
|
||||
// Font sizes
|
||||
$fs-xs: 0.75rem; // 12px
|
||||
$fs-s: 0.875rem; // 14px
|
||||
$fs-base: 1rem; // 16px
|
||||
$fs-l: 1.125rem; // 18px
|
||||
$fs-xl: 1.25rem; // 20px
|
||||
$fs-2xl: 1.5rem; // 24px
|
||||
$fs-3xl: 1.875rem; // 30px
|
||||
$fs-4xl: 2.25rem; // 36px
|
||||
$fs-5xl: 3rem; // 48px
|
||||
|
||||
// Line heights
|
||||
$lh-tight: 1.25; // 20px for 16px font-size
|
||||
$lh-base: 1.5; // 24px for 16px font-size
|
||||
|
||||
// Font weights
|
||||
$fw-normal: 400;
|
||||
$fw-medium: 500;
|
||||
$fw-bold: 700;
|
||||
$fw-heavy: 800;
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
// Border radius
|
||||
$br-default: 3px;
|
||||
|
||||
// Break points
|
||||
$breakpoint-s: 640px;
|
||||
$breakpoint-m: 768px;
|
||||
$breakpoint-l: 1024px;
|
||||
$breakpoint-xl: 1280px;
|
||||
|
||||
// Transitions
|
||||
$transition-props: cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms;
|
||||
|
||||
// pow() - Raise number to the nth power
|
||||
//
|
||||
// @param {number} $base The base number
|
||||
// @param {number} $exponents The exponent to which to raise $base
|
||||
@function pow($base, $exponents) {
|
||||
$raised: 1;
|
||||
|
||||
@for $i from 1 through $exponents {
|
||||
$raised: $raised * $base;
|
||||
}
|
||||
|
||||
@return $raised;
|
||||
}
|
||||
|
||||
// generate-classes()
|
||||
//
|
||||
// Generating classes for Tailwind approach.
|
||||
//
|
||||
// @param {string} $prefix Prefix for utility class, for example `mr`
|
||||
// @param {string || list} $properties Defines CSS property(ies) that, for example `margin-right`
|
||||
// @param {list} $values-1 List of values for which we gonna generate classes
|
||||
// @param {list} $values-2 Additional list of values, useful when we want to combine two lists.
|
||||
@mixin generate-classes($prefix, $properties, $values-1, $values-2: ()) {
|
||||
$values: map-merge($values-1, $values-2);
|
||||
@each $name, $value in $values {
|
||||
.#{$prefix}-#{$name} {
|
||||
@each $property in $properties {
|
||||
#{$property}: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import 'utils';
|
||||
@import 'colors';
|
||||
@import 'spacing-units';
|
||||
@import 'typography';
|
||||
|
|
@ -83,6 +83,12 @@ class PagesController < ApplicationController
|
|||
)
|
||||
end
|
||||
|
||||
def crayons
|
||||
@page = Page.find_by(slug: "crayons")
|
||||
render :show if @page
|
||||
set_surrogate_key_header "crayons_page"
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def latest_published_thread(tag_name)
|
||||
|
|
|
|||
|
|
@ -3,139 +3,13 @@
|
|||
var bodyClass = localStorage.getItem('config_body_class');
|
||||
document.body.className = bodyClass;
|
||||
if (bodyClass.includes('night-theme')) {
|
||||
document.getElementById('body-styles').innerHTML = '<style>\
|
||||
:root {\
|
||||
--theme-background: #0d1219;\
|
||||
--theme-color: #fff;\
|
||||
--theme-opposite-color: #0d1219;\
|
||||
--theme-logo-background: #0a0a0a;\
|
||||
--theme-logo-color: #fff;\
|
||||
--theme-code-background: #29292e;\
|
||||
--theme-code-color: #e6db74;\
|
||||
--theme-reaction-background: #202c3d;\
|
||||
--theme-anchor-color: #17a1f6;\
|
||||
--theme-secondary-color: #cedae2;\
|
||||
--theme-secondary-color-border: 1px solid #1c283b;\
|
||||
--theme-top-bar-background: #1c2938;\
|
||||
--theme-top-bar-background-hover: #27384c;\
|
||||
--theme-top-bar-color: #fff;\
|
||||
--theme-top-bar-search-background: #424a54;\
|
||||
--theme-top-bar-search-color: #fff;\
|
||||
--theme-top-bar-write-background: #00af81;\
|
||||
--theme-top-bar-write-color: #fff;\
|
||||
--theme-container-background: #141f2d;\
|
||||
--theme-container-accent-background: #202c3d;\
|
||||
--theme-container-background-hover: #1c2c3f;\
|
||||
--theme-gradient-background: linear-gradient(to right, #293d56 8%, #282833 18%, #293d56 33%);\
|
||||
--theme-container-color: #fff;\
|
||||
--theme-container-box-shadow: none;\
|
||||
--theme-container-border: 1px solid #22303f;\
|
||||
--theme-subtle-border: 1px solid #1f2c3a;\
|
||||
--theme-social-icon-invert: invert(100);\
|
||||
--theme-social-icon-color: #cedae2;\
|
||||
--theme-invert-image: invert();\
|
||||
--theme-current-article-background: #1143ca;\
|
||||
--theme-series-article-background: #314d9c;\
|
||||
--theme-series-article-hover: #1b2e63;</style>'
|
||||
document.getElementById('body-styles').innerHTML = '<style><%= Rails.application.assets["themes/night.css"].to_s.squish.html_safe %></style>';
|
||||
} else if (bodyClass.includes('ten-x-hacker-theme')) {
|
||||
document.getElementById('body-styles').innerHTML = '<style>\
|
||||
:root {\
|
||||
--theme-background: #0a0a0a;\
|
||||
--theme-color: #42ff87;\
|
||||
--theme-opposite-color: #0d1219;\
|
||||
--theme-logo-background: #42ff87;\
|
||||
--theme-logo-color: #0a0a0a;\
|
||||
--theme-code-background: #29292e;\
|
||||
--theme-code-color: #42ff87;\
|
||||
--theme-reaction-background: #202c3d;\
|
||||
--theme-anchor-color: #e24ec1;\
|
||||
--theme-secondary-color: #ebebeb;\
|
||||
--theme-secondary-color-border: 1px solid #222f3f;\
|
||||
--theme-top-bar-background: #1c1c1c;\
|
||||
--theme-top-bar-background-hover: #27384c;\
|
||||
--theme-top-bar-color: #fff;\
|
||||
--theme-top-bar-search-background: #0a0a0a;\
|
||||
--theme-top-bar-search-color: #42ff87;\
|
||||
--theme-top-bar-write-background: #0a0a0a;\
|
||||
--theme-top-bar-write-color: #42ff87;\
|
||||
--theme-container-background: #030303;\
|
||||
--theme-container-accent-background: #000f0b;\
|
||||
--theme-invert-image: invert();\
|
||||
--theme-container-background-hover: #1c2c3f;\
|
||||
--theme-gradient-background: linear-gradient(to right, #010f06 8%, #121a16 18%, #010f06 33%);\
|
||||
--theme-container-color: #42ff87;\
|
||||
--theme-container-box-shadow: none;\
|
||||
--theme-container-border: 1px solid #22303f;\
|
||||
--theme-subtle-border: 1px solid #1f2c3a;\
|
||||
--theme-social-icon-invert: invert(100);\
|
||||
--theme-current-article-background: #1143ca;\
|
||||
--theme-series-article-background: #006655;\
|
||||
--theme-series-article-hover: #004035;</style>'
|
||||
document.getElementById('body-styles').innerHTML = '<style><%= Rails.application.assets["themes/hacker.css"].to_s.squish.html_safe %></style>'
|
||||
} else if (bodyClass.includes('pink-theme')) {
|
||||
document.getElementById('body-styles').innerHTML = '<style>\
|
||||
:root {\
|
||||
--theme-background: #FFF7F9;\
|
||||
--theme-color: #0a0a0a;\
|
||||
--theme-opposite-color: #fff7f9;\
|
||||
--theme-logo-background: #fff7f9;\
|
||||
--theme-logo-color: #ff4983;\
|
||||
--theme-code-background: #f9f9fa;\
|
||||
--theme-code-color: #f92671;\
|
||||
--theme-reaction-background: #eff0f2;\
|
||||
--theme-anchor-color: #4e57ef;\
|
||||
--theme-secondary-color: #4e57ef;\
|
||||
--theme-secondary-color-border: 1px solid #ffe5ec;\
|
||||
--theme-top-bar-background: #ff4983;\
|
||||
--theme-top-bar-background-hover: #ff5b8f;\
|
||||
--theme-top-bar-color: #fff;\
|
||||
--theme-top-bar-search-background: #FFF7F9;\
|
||||
--theme-top-bar-search-color: #000;\
|
||||
--theme-top-bar-write-background: #ff4983;\
|
||||
--theme-top-bar-write-color: #fff;\
|
||||
--theme-container-background: #fff;\
|
||||
--theme-container-accent-background: #ffccdb;\
|
||||
--theme-invert-image: none;\
|
||||
--theme-container-background-hover: #ffe5eb;\
|
||||
--theme-gradient-background: linear-gradient(to right, #fff 8%, #ffceda 18%, #FFF7F9 33%);\
|
||||
--theme-container-color: #333;\
|
||||
--theme-container-box-shadow: none;\
|
||||
--theme-container-border: 1px solid #ff4983;\
|
||||
--theme-subtle-border: 1px solid #ffa8c3;\
|
||||
--theme-social-icon-color: rgba(255, 204, 219, 0);\
|
||||
--theme-social-icon-invert: invert(0);\
|
||||
--theme-prime-option-border-color: rgba(255, 255, 255, 0.55)</style>'
|
||||
document.getElementById('body-styles').innerHTML = '<style><%= Rails.application.assets["themes/pink.css"].to_s.squish.html_safe %></style>'
|
||||
} else if(bodyClass.includes('minimal-light-theme')) {
|
||||
document.getElementById('body-styles').innerHTML = '<style>\
|
||||
:root {\
|
||||
--theme-background: #fcfcfc;\
|
||||
--theme-color: #0a0a0a;\
|
||||
--theme-opposite-color: #ffffff;\
|
||||
--theme-logo-background: #e3e5ed;\
|
||||
--theme-logo-color: #232426;\
|
||||
--theme-code-background: #f9f9f9;\
|
||||
--theme-code-color: #37383d;\
|
||||
--theme-reaction-background: #eff0f2;\
|
||||
--theme-anchor-color: #757ec6;\
|
||||
--theme-secondary-color: #505159;\
|
||||
--theme-secondary-color-border: 1px solid #e3e3e5;\
|
||||
--theme-top-bar-background: #ffffff;\
|
||||
--theme-top-bar-background-hover: #f9f9f9;\
|
||||
--theme-top-bar-color: #0a0a0a;\
|
||||
--theme-top-bar-search-background: #f4f5f7;\
|
||||
--theme-top-bar-search-color: #0a0a0a;\
|
||||
--theme-top-bar-write-background: #ffffff;\
|
||||
--theme-top-bar-write-color: #0a0a0a;\
|
||||
--theme-container-background: #ffffff;\
|
||||
--theme-container-accent-background: #f4f5f7;\
|
||||
--theme-invert-image: none\
|
||||
--theme-container-background-hover: #efefef;\
|
||||
--theme-gradient-background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);\
|
||||
--theme-container-color: #0a0a0a;\
|
||||
--theme-container-box-shadow: none;\
|
||||
--theme-container-border: 1px solid #e3e3e5;\
|
||||
--theme-subtle-border: 1px solid #fcfcfc;\
|
||||
--theme-social-icon-color: rgba(80, 81, 89, 0);\
|
||||
--theme-social-icon-invert: invert(0)</style>'
|
||||
document.getElementById('body-styles').innerHTML = '<style><%= Rails.application.assets["themes/minimal.css"].to_s.squish.html_safe %></style>'
|
||||
}
|
||||
if (navigator.userAgent === 'DEV-Native-ios') {
|
||||
document.getElementsByTagName("body")[0].classList.add("dev-ios-native-body");
|
||||
|
|
|
|||
894
app/views/pages/crayons.html.erb
Normal file
894
app/views/pages/crayons.html.erb
Normal file
|
|
@ -0,0 +1,894 @@
|
|||
<% title "Crayons" %>
|
||||
<style>
|
||||
.container {
|
||||
padding: 48px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.container *,
|
||||
.container *:before,
|
||||
.container *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container > *+* {
|
||||
margin-top: 32px !important;
|
||||
}
|
||||
|
||||
.container > pre {
|
||||
padding: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container > .body {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
border-bottom: 1px solid lightgrey;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.container > .body h2 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container > .body p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container > .body ul,
|
||||
.container > .body ol {
|
||||
margin: 0 0 0 24px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container > .body > *+* {
|
||||
margin-top: 16px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="body">
|
||||
<h2>Main Typography</h2>
|
||||
<p>Default font is set to 16px (fs-base). It should be standard in UI. Smaller and bigger font sizes should be used carefully with respect to good visual rythm between elements.</p>
|
||||
<p>XS size should be used as little as possible in edge cases. Even though it’s readable we could consider it not meeting DEV’s standards. So keep it for like “asterisk copy” etc.</p>
|
||||
<p>By default you should be using Regular font weight.</p>
|
||||
<p>Medium should be used to emphasize something but not make it as loud as Bold.</p>
|
||||
<p>Heavy should be used only for bigger title.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="fs-xs">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-s">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-base">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-l">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-xl">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-2xl">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-3xl">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-4xl">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-5xl">Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="fs-xs fw-medium">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-s fw-medium">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-base fw-medium">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-l fw-medium">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-xl fw-medium">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-2xl fw-medium">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-3xl fw-medium">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-4xl fw-medium">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-5xl fw-medium">Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="fs-xs fw-bold">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-s fw-bold">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-base fw-bold">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-l fw-bold">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-xl fw-bold">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-2xl fw-bold">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-3xl fw-bold">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-4xl fw-bold">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-5xl fw-bold">Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="fs-xs fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-s fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-base fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-l fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-xl fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-2xl fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-3xl fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-4xl fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="fs-5xl fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 24px;">
|
||||
<span class="ff-accent">Line height: 1.5 – .lh-base (default)</span>
|
||||
<span class="ff-accent">Line height: 1.25 – .lh-tight</span>
|
||||
|
||||
<h3 class="fs-2xl fw-bold">This is a bit longer text title to present line-height difference.</h3>
|
||||
<h3 class="fs-2xl fw-bold lh-tight">This is a bit longer text title to present line-height difference.</h3>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore iusto, molestias. Ex asperiores modi libero id laudantium ipsum perspiciatis, architecto enim suscipit delectus odit, explicabo quas, voluptatum quibusdam, distinctio ut.</p>
|
||||
<p class="lh-tight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore iusto, molestias. Ex asperiores modi libero id laudantium ipsum perspiciatis, architecto enim suscipit delectus odit, explicabo quas, voluptatum quibusdam, distinctio ut.</p>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<!-- font sizes -->
|
||||
<p class="fs-xs">...</p> <!-- 12px -->
|
||||
<p class="fs-s">...</p> <!-- 14px -->
|
||||
<p class="fs-base">...</p> <!-- default: 16px -->
|
||||
<p class="fs-l">...</p> <!-- 18px -->
|
||||
<p class="fs-xl">...</p> <!-- 20px -->
|
||||
<p class="fs-2xl">...</p> <!-- 24px -->
|
||||
<p class="fs-3xl">...</p> <!-- 30px -->
|
||||
<p class="fs-4xl">...</p> <!-- 36px -->
|
||||
<p class="fs-5xl">...</p> <!-- 48px -->
|
||||
|
||||
<!-- font weights -->
|
||||
<p class="... fw-normal">...</p> <!-- default: regular -->
|
||||
<p class="... fw-medium">...</p>
|
||||
<p class="... fw-bold">...</p>
|
||||
<p class="... fw-heavy">...</p>
|
||||
|
||||
<!-- line heights -->
|
||||
<p class="... lh-base"></p> <!-- default: 1.5 -->
|
||||
<p class="... lh-tight"></p> <!-- tight: 1.25 -->
|
||||
'.rstrip %></pre>
|
||||
|
||||
<div class="body">
|
||||
<h2>Accent typography</h2>
|
||||
<p>Its main purpose is to add a bit of flavor to DEV brand but it should never be the main font.</p>
|
||||
<p>Please, do not overuse Accent typography.</p>
|
||||
<p>We strongly encourage to limit number of sizes and weights to what presetned below.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="ff-accent fs-xs">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="ff-accent fs-s">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="ff-accent fs-base">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="ff-accent fs-l">Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="ff-accent fs-xs fw-bold">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="ff-accent fs-s fw-bold">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="ff-accent fs-base fw-bold">Lorem ipsum dolor sit amet.</p>
|
||||
<p class="ff-accent fs-l fw-bold">Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<!-- font sizes -->
|
||||
<p class="ff-accent fs-xs">...</p> <!-- 12px -->
|
||||
<p class="ff-accent fs-s">...</p> <!-- 14px -->
|
||||
<p class="ff-accent fs-base">...</p> <!-- default: 16px -->
|
||||
<p class="ff-accent fs-l">...</p> <!-- 18px -->
|
||||
|
||||
<!-- font weights -->
|
||||
<p class="... fw-normal">...</p> <!-- default: regular -->
|
||||
<p class="... fw-bold">...</p>
|
||||
|
||||
<!-- line heights -->
|
||||
<p class="... lh-base"></p> <!-- default: 1.5 -->
|
||||
<p class="... lh-tight"></p> <!-- tight: 1.25 -->
|
||||
'.rstrip %></pre>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="body">
|
||||
<h2>Form elements</h2>
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" class="crayons-textfield" placeholder="This is placeholder..."><br><br>
|
||||
<input type="text" class="crayons-textfield" placeholder="This is placeholder..." value="Disabled field" disabled>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<input type="text" class="crayons-textfield" placeholder="This is placeholder...">
|
||||
<input type="text" class="crayons-textfield" placeholder="This is placeholder..." value="Disabled field" disabled>
|
||||
'.rstrip %></pre>
|
||||
|
||||
<div>
|
||||
<textarea class="crayons-textfield" placeholder="This is palceholder..."></textarea><br><br>
|
||||
<textarea class="crayons-textfield" placeholder="This is palceholder..." disabled>Disabled textarea</textarea>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<textarea class="crayons-textfield" placeholder="This is palceholder..."></textarea>
|
||||
<textarea class="crayons-textfield" placeholder="This is palceholder..." disabled>Disabled textarea</textarea>
|
||||
'.rstrip %></pre>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" class="crayons-checkbox">
|
||||
<input type="checkbox" class="crayons-checkbox" checked>
|
||||
<input type="checkbox" class="crayons-checkbox" disabled>
|
||||
<input type="checkbox" class="crayons-checkbox" checked disabled>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<input type="checkbox" class="crayons-checkbox">
|
||||
<input type="checkbox" class="crayons-checkbox" checked>
|
||||
<input type="checkbox" class="crayons-checkbox" disabled>
|
||||
<input type="checkbox" class="crayons-checkbox" checked disabled>
|
||||
'.rstrip %></pre>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="n1" class="crayons-radio">
|
||||
<input type="radio" name="n1" class="crayons-radio" checked>
|
||||
<input type="radio" name="n2" class="crayons-radio" disabled>
|
||||
<input type="radio" name="n2" class="crayons-radio" checked disabled>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<input type="radio" name="n1" class="crayons-radio">
|
||||
<input type="radio" name="n1" class="crayons-radio" checked>
|
||||
<input type="radio" name="n2" class="crayons-radio" disabled>
|
||||
<input type="radio" name="n2" class="crayons-radio" checked disabled>
|
||||
'.rstrip %></pre>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="body">
|
||||
<h2>Field Component</h2>
|
||||
<p>Because of accessibility most (ideally all) fields should have label above.</p>
|
||||
<p>Fields can also have optional description - between Label and Field itself.</p>
|
||||
<p>Fields can also have additional optional description, for example characters count.</p>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<label for="t1" class="crayons-field__label">
|
||||
Textfield Label
|
||||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||||
</label>
|
||||
<input type="text" id="t1" class="crayons-textfield" placeholder="This is placeholder...">
|
||||
<p class="crayons-field__description">Another description just in case...</p>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<div class="crayons-field">
|
||||
<label for="t1" class="crayons-field__label">
|
||||
Textfield Label
|
||||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||||
</label>
|
||||
<input type="text" id="t1" class="crayons-textfield" placeholder="This is placeholder...">
|
||||
<p class="crayons-field__description">Another description just in case...</p>
|
||||
</div>
|
||||
'.rstrip %></pre>
|
||||
|
||||
<div class="body">
|
||||
<h2>Fields with Checkboxes & Radios</h2>
|
||||
<p>Labels for checkboxes and radios should be placed next to the form element.</p>
|
||||
<p>Using additional description is optional.</p>
|
||||
<p>It is possible to group checkboxes or radios into logical sections. Section may require having it’s own label (title).</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<input type="checkbox" id="c2" class="crayons-checkbox">
|
||||
<label for="c2" class="crayons-field__label">
|
||||
Raspberry
|
||||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<input type="checkbox" id="c2" class="crayons-checkbox">
|
||||
<label for="c2" class="crayons-field__label">
|
||||
Raspberry
|
||||
<p class="crayons-field__description">This is...</p>
|
||||
</label>
|
||||
</div>
|
||||
'.rstrip %></pre>
|
||||
|
||||
<div>
|
||||
<div class="crayons-fields">
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<input type="checkbox" id="c3" class="crayons-checkbox">
|
||||
<label for="c3" class="crayons-field__label">
|
||||
Avocado
|
||||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<input type="checkbox" id="c4" class="crayons-checkbox">
|
||||
<label for="c4" class="crayons-field__label">
|
||||
Raspberry
|
||||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<input type="checkbox" id="c5" class="crayons-checkbox">
|
||||
<label for="c5" class="crayons-field__label">
|
||||
Peanut
|
||||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<div class="crayons-fields">
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<input type="checkbox" id="c3" class="crayons-checkbox">
|
||||
<label for="c3" class="crayons-field__label">
|
||||
Avocado
|
||||
<p class="crayons-field__description">This is...</p>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
...
|
||||
</div>
|
||||
|
||||
...
|
||||
</div>
|
||||
'.rstrip %></pre>
|
||||
|
||||
<div>
|
||||
<div class="crayons-fields crayons-fields--horizontal">
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<input type="checkbox" id="c6" class="crayons-checkbox">
|
||||
<label for="c6" class="crayons-field__label">Avocado</label>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<input type="checkbox" id="c7" class="crayons-checkbox">
|
||||
<label for="c7" class="crayons-field__label">Raspberry</label>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<input type="checkbox" id="c8" class="crayons-checkbox">
|
||||
<label for="c8" class="crayons-field__label">Peanut</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<div class="crayons-fields crayons-fields--horizontal">
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<input type="checkbox" id="c3" class="crayons-checkbox">
|
||||
<label for="c3" class="crayons-field__label">Avocado</label>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
...
|
||||
</div>
|
||||
|
||||
...
|
||||
</div>
|
||||
'.rstrip %></pre>
|
||||
|
||||
|
||||
<div>
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
<input type="radio" name="name1" id="r2" class="crayons-radio">
|
||||
<label for="r2" class="crayons-field__label">
|
||||
Raspberry
|
||||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
<input type="radio" name="name1" id="r2" class="crayons-radio">
|
||||
<label for="r2" class="crayons-field__label">
|
||||
Raspberry
|
||||
<p class="crayons-field__description">This is...</p>
|
||||
</label>
|
||||
</div>
|
||||
'.rstrip %></pre>
|
||||
|
||||
<div>
|
||||
<div class="crayons-fields">
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
<input type="radio" name="name2" id="r3" class="crayons-radio">
|
||||
<label for="r3" class="crayons-field__label">
|
||||
Avocado
|
||||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
<input type="radio" name="name2" id="r4" class="crayons-radio">
|
||||
<label for="r4" class="crayons-field__label">
|
||||
Raspberry
|
||||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
<input type="radio" name="name2" id="r5" class="crayons-radio">
|
||||
<label for="r5" class="crayons-field__label">
|
||||
Peanut
|
||||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<div class="crayons-fields">
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
<input type="radio" name="name2" id="r3" class="crayons-radio">
|
||||
<label for="r3" class="crayons-field__label">
|
||||
Avocado
|
||||
<p class="crayons-field__description">This is...</p>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
...
|
||||
</div>
|
||||
|
||||
...
|
||||
</div>
|
||||
'.rstrip %></pre>
|
||||
|
||||
<div>
|
||||
<div class="crayons-fields crayons-fields--horizontal">
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
<input type="radio" name="name3" id="r6" class="crayons-radio">
|
||||
<label for="r6" class="crayons-field__label">Avocado</label>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
<input type="radio" name="name3" id="r7" class="crayons-radio">
|
||||
<label for="r7" class="crayons-field__label">Raspberry</label>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
<input type="radio" name="name3" id="r8" class="crayons-radio">
|
||||
<label for="r8" class="crayons-field__label">Peanut</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<div class="crayons-fields crayons-fields--horizontal">
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
<input type="radio" name="name3" id="r6" class="crayons-radio">
|
||||
<label for="r6" class="crayons-field__label">Avocado</label>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
...
|
||||
</div>
|
||||
|
||||
...
|
||||
</div>
|
||||
'.rstrip %></pre>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="body">
|
||||
<h2>Buttons</h2>
|
||||
<p>Use Danger style only for destructive actions like removing something. Do not use it for, for example “unfollow” action.</p>
|
||||
<p>If you have to use several buttons together, keep in mind you should always have ONE Primary button. Rest of them should be Secondary and/or Outlined and/or Text buttons.</p>
|
||||
<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-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>
|
||||
</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--danger">Danger Button label</a>
|
||||
<a href="#" class="... crayons-btn--icon-left"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="crayons-icon">...</svg>Button</a>
|
||||
<a href="#" class="... 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">...</svg>Button</a>
|
||||
'.rstrip %></pre>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="body">
|
||||
<h2>Boxes</h2>
|
||||
<p>“Box” will be a background element used for many other components, for example banners, dropdowns, modals. This component does not have any guidelines in terms of placement or spacing, since it’s supposed to be used to build other components.</p>
|
||||
<p>There are:</p>
|
||||
<ul>
|
||||
<li>2 types: outlined & filled,</li>
|
||||
<li>5 styles: default, danger, warning, info, success,</li>
|
||||
<li>4 eleveations: 0, 1, 2, 3.</li>
|
||||
</ul>
|
||||
<p>By default use “outlined” type unless you really have to make something stand out - then use “filled”. But double check if it makes sense since “filled” style really steals attention.</p>
|
||||
<p>Use style that makes the most sense for you current use case. It’s pretty obvious when to use Danger, Warning and Success. But for Default and Info - it’s more up to designer to make a good call :).</p>
|
||||
<p>Elevations should define what kind of element it is:</p>
|
||||
<ul>
|
||||
<li>0: something inside content.</li>
|
||||
<li>1: that can also be used in content but for elements that need more attention, like notices...</li>
|
||||
<li>2: dropdowns</li>
|
||||
<li>3: modals</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 16px;">
|
||||
<div class="crayons-box">box, level 0</div>
|
||||
<div class="crayons-box crayons-box--level-1">box, level 1</div>
|
||||
<div class="crayons-box crayons-box--level-2">box, level 2</div>
|
||||
<div class="crayons-box crayons-box--level-3">box, level 3</div>
|
||||
<div class="crayons-box crayons-box--filled ">filled box, level 0</div>
|
||||
<div class="crayons-box crayons-box--filled crayons-box--level-1">filled box, level 1</div>
|
||||
<div class="crayons-box crayons-box--filled crayons-box--level-2">filled box, level 2</div>
|
||||
<div class="crayons-box crayons-box--filled crayons-box--level-3">filled box, level 3</div>
|
||||
|
||||
<div class="crayons-box crayons-box--danger">box, level 0</div>
|
||||
<div class="crayons-box crayons-box--danger crayons-box--level-1">box, level 1</div>
|
||||
<div class="crayons-box crayons-box--danger crayons-box--level-2">box, level 2</div>
|
||||
<div class="crayons-box crayons-box--danger crayons-box--level-3">box, level 3</div>
|
||||
<div class="crayons-box crayons-box--danger crayons-box--filled ">filled box, level 0</div>
|
||||
<div class="crayons-box crayons-box--danger crayons-box--filled crayons-box--level-1">filled box, level 1</div>
|
||||
<div class="crayons-box crayons-box--danger crayons-box--filled crayons-box--level-2">filled box, level 2</div>
|
||||
<div class="crayons-box crayons-box--danger crayons-box--filled crayons-box--level-3">filled box, level 3</div>
|
||||
|
||||
<div class="crayons-box crayons-box--warning">box, level 0</div>
|
||||
<div class="crayons-box crayons-box--warning crayons-box--level-1">box, level 1</div>
|
||||
<div class="crayons-box crayons-box--warning crayons-box--level-2">box, level 2</div>
|
||||
<div class="crayons-box crayons-box--warning crayons-box--level-3">box, level 3</div>
|
||||
<div class="crayons-box crayons-box--warning crayons-box--filled ">filled box, level 0</div>
|
||||
<div class="crayons-box crayons-box--warning crayons-box--filled crayons-box--level-1">filled box, level 1</div>
|
||||
<div class="crayons-box crayons-box--warning crayons-box--filled crayons-box--level-2">filled box, level 2</div>
|
||||
<div class="crayons-box crayons-box--warning crayons-box--filled crayons-box--level-3">filled box, level 3</div>
|
||||
|
||||
<div class="crayons-box crayons-box--success">box, level 0</div>
|
||||
<div class="crayons-box crayons-box--success crayons-box--level-1">box, level 1</div>
|
||||
<div class="crayons-box crayons-box--success crayons-box--level-2">box, level 2</div>
|
||||
<div class="crayons-box crayons-box--success crayons-box--level-3">box, level 3</div>
|
||||
<div class="crayons-box crayons-box--success crayons-box--filled ">filled box, level 0</div>
|
||||
<div class="crayons-box crayons-box--success crayons-box--filled crayons-box--level-1">filled box, level 1</div>
|
||||
<div class="crayons-box crayons-box--success crayons-box--filled crayons-box--level-2">filled box, level 2</div>
|
||||
<div class="crayons-box crayons-box--success crayons-box--filled crayons-box--level-3">filled box, level 3</div>
|
||||
|
||||
<div class="crayons-box crayons-box--info">box, level 0</div>
|
||||
<div class="crayons-box crayons-box--info crayons-box--level-1">box, level 1</div>
|
||||
<div class="crayons-box crayons-box--info crayons-box--level-2">box, level 2</div>
|
||||
<div class="crayons-box crayons-box--info crayons-box--level-3">box, level 3</div>
|
||||
<div class="crayons-box crayons-box--info crayons-box--filled ">filled box, level 0</div>
|
||||
<div class="crayons-box crayons-box--info crayons-box--filled crayons-box--level-1">filled box, level 1</div>
|
||||
<div class="crayons-box crayons-box--info crayons-box--filled crayons-box--level-2">filled box, level 2</div>
|
||||
<div class="crayons-box crayons-box--info crayons-box--filled crayons-box--level-3">filled box, level 3</div>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<!-- default: outlined, black -->
|
||||
<div class="crayons-box">box, level 0</div>
|
||||
|
||||
<-- levels 0-3 -->
|
||||
<div class="... crayons-box--level-1">box, level 1</div>
|
||||
<div class="... crayons-box--level-2">box, level 2</div>
|
||||
<div class="... crayons-box--level-3">box, level 3</div>
|
||||
|
||||
<-- filled variation -->
|
||||
<div class="... crayons-box--filled">filled box, level 0</div>
|
||||
|
||||
<-- styles: danger, success, warning, info -->
|
||||
<div class="... crayons-box--danger">
|
||||
<div class="... crayons-box--success">
|
||||
<div class="... crayons-box--warning">
|
||||
<div class="... crayons-box--info">
|
||||
'.rstrip %></pre>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="body">
|
||||
<h2>Dropdowns</h2>
|
||||
<p>Dropdowns should have position relative to it’s trigger. They can be used for some 2nd level navigations, contextual configurations, etc...</p>
|
||||
<p>Dropdowns should not be bigger than 320px.</p>
|
||||
<p>Dropdown default padding should be dependent on width:</p>
|
||||
<ul>
|
||||
<li><250px: 16px</li>
|
||||
<li>251 - 320px: 24px</li>
|
||||
</ul>
|
||||
<p>If you need to utilize entire dropdown area and you have to get rid of default padding, please use modifier class <code>crayons-dropdown--padding-0</code>.</p>
|
||||
<p>FYI: Dropdowns use “Box” component as background, with Level 3 elevation.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="crayons-dropdown">
|
||||
Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="crayons-dropdown crayons-dropdown--l">
|
||||
Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="crayons-dropdown crayons-dropdown--padding-0">
|
||||
Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<div class="crayons-dropdown">
|
||||
Hey, ...
|
||||
</div>
|
||||
|
||||
<div class="... crayons-dropdown--l">
|
||||
Hey, ...
|
||||
</div>
|
||||
|
||||
<div class="... crayons-dropdown--padding-0">
|
||||
Hey, ...
|
||||
</div>
|
||||
'.rstrip %></pre>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="body">
|
||||
<h2>Modals</h2>
|
||||
<p>Modals should be positioned centered in relation to entire viewport. So relation to its tirgger doesn’t really matter.<p>
|
||||
<p>There are 3 sizes of modals:</p>
|
||||
<ul>
|
||||
<li>S(mall): 480px width with 24px padding</li>
|
||||
<li>Default: 640px width with 32px padding</li>
|
||||
<li>L(arge): 800px width with 48px padding</li>
|
||||
</ul>
|
||||
<p>Use your best judgements when choosing the right size.</p>
|
||||
<p>If you need to utilize entire modal area and you have to get rid of default padding, please use modifier class <code>crayons-modal--padding-0</code>.</p>
|
||||
<p>FYI: Modals use “Box” component as background, with Level 3 elevation.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="crayons-modal">
|
||||
Hey, I'm a Default Modal content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="crayons-modal crayons-modal--s">
|
||||
Hey, I'm a Small Modal content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="crayons-modal crayons-modal--l">
|
||||
Hey, I'm a Large Modal content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="crayons-modal crayons-modal--padding-0">
|
||||
Hey, I'm a modal content with no padding! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<div class="crayons-modal">
|
||||
Hey, ...
|
||||
</div>
|
||||
|
||||
<div class="... crayons-modal--s">
|
||||
Hey, ...
|
||||
</div>
|
||||
|
||||
<div class="... crayons-modal--l">
|
||||
Hey, ...
|
||||
</div>
|
||||
|
||||
<div class="... crayons-modal--padding-0">
|
||||
Hey, ...
|
||||
</div>
|
||||
'.rstrip %></pre>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="body">
|
||||
<h2>Notices</h2>
|
||||
<p>Use Notices to focus user on specific piece of content, for example (but not limited to):</p>
|
||||
<ul>
|
||||
<li>alerts after form submission, </li>
|
||||
<li>box with tip like “Did you know..?”</li>
|
||||
<li>etc...</li>
|
||||
</ul>
|
||||
<p>This should be simple message. And this is exactly what this Figma component let you do.</p>
|
||||
<p>By default, this component has 16px padding.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="crayons-notice">This is Default Notice content.</div><br>
|
||||
<div class="crayons-notice crayons-notice--danger">This is Default Notice content.</div><br>
|
||||
<div class="crayons-notice crayons-notice--warning">This is Warning Notice content.</div><br>
|
||||
<div class="crayons-notice crayons-notice--success">This is Success Notice content.</div><br>
|
||||
<div class="crayons-notice crayons-notice--info">This is Info Notice content.</div>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<!-- Default -->
|
||||
<div class="crayons-notice">This...</div>
|
||||
|
||||
<!-- Styles: danger, warning, success, info -->
|
||||
<div class="... crayons-notice--danger">This...</div>
|
||||
<div class="... crayons-notice--warning">This...</div>
|
||||
<div class="... crayons-notice--success">This...</div>
|
||||
<div class="... crayons-notice--info">This...</div>
|
||||
'.rstrip %></pre>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="body">
|
||||
<h2>Indicators</h2>
|
||||
<p>Indicators are meant to be used to inform user about, for example, unread notifications. They supposed to steal user's attention and make him notice or click specific element.</p>
|
||||
<p>We should keep in mind to never show too many indicators at the same time. Use your best judgment.</p>
|
||||
<p>There're two types of indicators:</p>
|
||||
<ul>
|
||||
<li>Rectangle with label (text or number)</li>
|
||||
<li>Bullet - just a circle without any text on it.</li>
|
||||
</ul>
|
||||
<p>And there're four styles to pick from:</p>
|
||||
<ul>
|
||||
<li>Default (grey) - nothing really crucial, basic information about something.</li>
|
||||
<li>Accent (blueish) - something we want user to be aware of but it's also not crucial information</li>
|
||||
<li>Critical (red) - something super important, don't overuse it!!</li>
|
||||
<li>Inverted (dark grey) - alternative to the default one, especially when we need to show two defautl indicators next to each other.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<span class="crayons-indicator">Label</span>
|
||||
<span class="crayons-indicator crayons-indicator--outlined">Outlined</span>
|
||||
<span class="crayons-indicator">1</span>
|
||||
<span class="crayons-indicator crayons-indicator--bullet"></span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="crayons-indicator crayons-indicator--accent">Label</span>
|
||||
<span class="crayons-indicator crayons-indicator--outlined crayons-indicator--accent">Outlined</span>
|
||||
<span class="crayons-indicator crayons-indicator--accent">1</span>
|
||||
<span class="crayons-indicator crayons-indicator--accent crayons-indicator--bullet"></span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="crayons-indicator crayons-indicator--critical">Label</span>
|
||||
<span class="crayons-indicator crayons-indicator--outlined crayons-indicator--critical">Outlined</span>
|
||||
<span class="crayons-indicator crayons-indicator--critical">1</span>
|
||||
<span class="crayons-indicator crayons-indicator--critical crayons-indicator--bullet"></span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="crayons-indicator crayons-indicator--inverted">Label</span>
|
||||
<span class="crayons-indicator crayons-indicator--outlined crayons-indicator--inverted">Outlined</span>
|
||||
<span class="crayons-indicator crayons-indicator--inverted">1</span>
|
||||
<span class="crayons-indicator crayons-indicator--inverted crayons-indicator--bullet"></span>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<span class="crayons-indicator">Label</span>
|
||||
<span class="crayons-indicator">1</span>
|
||||
<span class="crayons-indicator crayons-indicator--bullet"></span>
|
||||
|
||||
<!-- styles: accent, critical, inverted -->
|
||||
<span class="... crayons-indicator--accent">...</span>
|
||||
<span class="... crayons-indicator--critical">...</span>
|
||||
<span class="... crayons-indicator--inverted">...</span>
|
||||
'.rstrip %></pre>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="body">
|
||||
<h2>Avatars & Logos</h2>
|
||||
<p>An image representing a user is called an avatar.</p>
|
||||
<p>An image representing a company or organization is called a logo.</p>
|
||||
<p>To make a distinction between these two different entities we should keep them visually different. For Avatars, we gonna use circle shape. And for Logos we gonna use square shape. This will help recognize what is what in a heartbeat.</p>
|
||||
<p>Each of these will be available in 5 different sizes (use your best judgment in picking right size):</p>
|
||||
<ul>
|
||||
<li>Default: 24px</li>
|
||||
<li>L(arge): 32px</li>
|
||||
<li>XL(arge): 48px</li>
|
||||
<li>2XL(arge): 64px</li>
|
||||
<li>3XL(arge): 128px</li>
|
||||
</ul>
|
||||
<p>Remember to use descriptive alt="" values!</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="crayons-avatar"><img src="<%= asset_path("ben.jpg") %>" class="crayons-avatar__image" alt="Ben" /></span>
|
||||
<span class="crayons-avatar crayons-avatar--l"><img src="<%= asset_path("ben.jpg") %>" class="crayons-avatar__image" alt="Ben" /></span>
|
||||
<span class="crayons-avatar crayons-avatar--xl"><img src="<%= asset_path("ben.jpg") %>" class="crayons-avatar__image" alt="Ben" /></span>
|
||||
<span class="crayons-avatar crayons-avatar--2xl"><img src="<%= asset_path("ben.jpg") %>" class="crayons-avatar__image" alt="Ben" /></span>
|
||||
<span class="crayons-avatar crayons-avatar--3xl"><img src="<%= asset_path("ben.jpg") %>" class="crayons-avatar__image" alt="Ben" /></span>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<span class="crayons-avatar"><img src="..." class="crayons-avatar__image" alt="..." /></span>
|
||||
|
||||
<!-- sizes: l, xl, 2xl, 3xl -->
|
||||
<span class="... crayons-avatar--l">...</span>
|
||||
<span class="... crayons-avatar--xl">...</span>
|
||||
<span class="... crayons-avatar--2xl">...</span>
|
||||
<span class="... crayons-avatar--3xl">...</span>
|
||||
'.rstrip %></pre>
|
||||
|
||||
<div>
|
||||
<span class="crayons-logo"><img src="<%= asset_path("apple-icon.png") %>" class="crayons-logo__image" alt="Acme Inc." /></span>
|
||||
<span class="crayons-logo crayons-logo--l"><img src="<%= asset_path("apple-icon.png") %>" class="crayons-logo__image" alt="Acme Inc." /></span>
|
||||
<span class="crayons-logo crayons-logo--xl"><img src="<%= asset_path("apple-icon.png") %>" class="crayons-logo__image" alt="Acme Inc." /></span>
|
||||
<span class="crayons-logo crayons-logo--2xl"><img src="<%= asset_path("apple-icon.png") %>" class="crayons-logo__image" alt="Acme Inc." /></span>
|
||||
<span class="crayons-logo crayons-logo--3xl"><img src="<%= asset_path("apple-icon.png") %>" class="crayons-logo__image" alt="Acme Inc." /></span>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<span class="crayons-logo"><img src="..." class="crayons-logo__image" alt="..." /></span>
|
||||
|
||||
<!-- sizes: l, xl, 2xl, 3xl -->
|
||||
<span class="... crayons-logo--l">...</span>
|
||||
<span class="... crayons-logo--xl">...</span>
|
||||
<span class="... crayons-logo--2xl">...</span>
|
||||
<span class="... crayons-logo--3xl">...</span>
|
||||
'.rstrip %></pre>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="body">
|
||||
<h2>Navigation: Main nav</h2>
|
||||
<p>Used as main nav in left sidebar or dropdowns...</p>
|
||||
<p>Can contain icons.</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-smoke-10">
|
||||
<a href="#" class="crayons-nav-block crayons-nav-block--current"><span class="crayons-icon">🏡</span>Home</a>
|
||||
<a href="#" class="crayons-nav-block"><span class="crayons-icon">📻</span>Podcasts</a>
|
||||
<a href="#" class="crayons-nav-block"><span class="crayons-icon">🏷</span>Tags</a>
|
||||
<a href="#" class="crayons-nav-block"><span class="crayons-icon">📑</span>Listings <span class="crayons-indicator">3</span></a>
|
||||
<a href="#" class="crayons-nav-block"><span class="crayons-icon">👍</span>Code of Conduct</a>
|
||||
<a href="#" class="crayons-nav-block crayons-nav-block--indented">More...</a>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<a href="#" class="crayons-nav-block">...</a>
|
||||
<a href="#" class="crayons-nav-block crayons-nav-block--current">...</a>
|
||||
|
||||
<!-- icon inside -->
|
||||
<a href="#" class="crayons-nav-block"><span class="crayons-icon">📻</span>...</a>
|
||||
<a href="#" class="crayons-nav-block"><svg class="crayons-icon" ...>...</svg>...</a>
|
||||
|
||||
<!-- indicator inside -->
|
||||
<a href="#" class="crayons-nav-block">...<span class="crayons-indicator">3</span></a>
|
||||
|
||||
<!-- indented -->
|
||||
<a href="#" class="crayons-nav-block crayons-nav-block--indented">More...</a>
|
||||
'.rstrip %></pre>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="body">
|
||||
<h2>Navigation: Tabs</h2>
|
||||
<p>Use tabs as 2nd level navigation or filtering options.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="crayons-tabs">
|
||||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Feed</a>
|
||||
<a href="#" class="crayons-tabs__item">Popular</a>
|
||||
<a href="#" class="crayons-tabs__item">Latest</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre><%='
|
||||
<div class="crayons-tabs">
|
||||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Feed</a>
|
||||
<a href="#" class="crayons-tabs__item">Popular</a>
|
||||
<a href="#" class="crayons-tabs__item">Latest</a>
|
||||
</div>
|
||||
'.rstrip %></pre>
|
||||
</div>
|
||||
|
|
@ -320,6 +320,7 @@ Rails.application.routes.draw do
|
|||
get "/shop", to: redirect("https://shop.dev.to/")
|
||||
get "/mod" => "moderations#index", :as => :mod
|
||||
get "/mod/:tag" => "moderations#index"
|
||||
get "/page/crayons" => "pages#crayons"
|
||||
|
||||
post "/fallback_activity_recorder" => "ga_events#create"
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue