CSS Components, Variables + Utility classes (#6334)
* move kbd where it should be * initial cleanup * do we even need that? * sponsorships * cleanups on articles.scss mostly * initial cleanups to scaffolds * moving cheese around * color variables, variables cleanups * adding spacing units * variables cleanup * adding topbar height variable * a bit of top-bar refactor * a bit of top-bar refactor * a bit of top-bar refactor * simpler animation * top bar search and responsivness * loggged out version * remove unnecessary comment * fixing svg icons * search cleanup * top bar cleanups * . * dropdown in header * removing fill from svgs to make them work in other themes * remove test element * topbar icons recreated * introducing variables & buttons component * more variables * Whoops * init modal component * init modal component * init form component * form component * . * variables naming * . * tiny cleanups * formatting * whoops * Test * component avatars * components page + fixes * indicators * init boxes * boxes * im an idiot * radios, checkboxes * maybe im smart * whoops. i am dumb and blind * checkboxes and radios * better documentation, code examples, avatars rewritten * notices, modals, dropdowns * . * oh damn you * checkboxes & radios * forms * generating tailwind classes * i broke things * spacing units * typography, spacing * positioning * overflow * . * getting rid of cards for now * formatting * adding reset to global styles to avoid jumping layout * change url for crayons test page to not be top-level * additional style for indicators, colors, navigation, grid * tabs * backgrounds * flexbox * . * . * im not sure why schema change was here... * same about this one... * this file shouldnt be in my commit either * adding comments and mentally dropping IE10 support :D * . * referencing boxes.scss file * new line * get rid of font-size from body Co-authored-by: rhymes <rhymesete@gmail.com>
This commit is contained in:
ludwiczakpawel
GitHub
parent
3161c9d901
commit
ca97c21e16
34 changed files with 2938 additions and 43 deletions
|
|
@ -1,29 +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: #1a2be5;
|
||||
$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;
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
$su-1: 4px;
|
||||
$su-2: 8px;
|
||||
$su-3: 12px;
|
||||
$su-4: 16px;
|
||||
$su-5: 20px;
|
||||
$su-6: 24px;
|
||||
$su-7: 32px;
|
||||
$su-8: 48px;
|
||||
$su-9: 64px;
|
||||
49
app/assets/stylesheets/base/boxes.scss
Normal file
49
app/assets/stylesheets/base/boxes.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
@include box($this, $smoke-90, $smoke-100);
|
||||
|
||||
&--danger {
|
||||
@include box($this, $raspberry, $raspberry-darker);
|
||||
}
|
||||
|
||||
&--success {
|
||||
@include box($this, $avocado, $avocado-darker);
|
||||
}
|
||||
|
||||
&--warning {
|
||||
@include box($this, $peanut, $peanut-darker);
|
||||
}
|
||||
|
||||
&--info {
|
||||
@include box($this, $dolphin, $dolphin-darker);
|
||||
}
|
||||
}
|
||||
34
app/assets/stylesheets/base/colors.scss
Normal file
34
app/assets/stylesheets/base/colors.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
@import '../vars/variables';
|
||||
|
||||
// Color
|
||||
@include generate-classes(
|
||||
'color',
|
||||
'color',
|
||||
(
|
||||
'transparent': transparent,
|
||||
'current': currentColor,
|
||||
),
|
||||
$colors
|
||||
);
|
||||
|
||||
// Background Color
|
||||
@include generate-classes(
|
||||
'bg',
|
||||
'background-color',
|
||||
(
|
||||
'transparent': transparent,
|
||||
'current': currentColor,
|
||||
),
|
||||
$colors
|
||||
);
|
||||
|
||||
// Border Color
|
||||
@include generate-classes(
|
||||
'border',
|
||||
'border-color',
|
||||
(
|
||||
'transparent': transparent,
|
||||
'current': currentColor,
|
||||
),
|
||||
$colors
|
||||
);
|
||||
124
app/assets/stylesheets/base/decorations.scss
Normal file
124
app/assets/stylesheets/base/decorations.scss
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
@import '../vars/variables';
|
||||
|
||||
// Opacity
|
||||
@include generate-classes(
|
||||
'opacity',
|
||||
'opacity',
|
||||
(
|
||||
'100': 1,
|
||||
'75': 0.75,
|
||||
'50': 0.5,
|
||||
'25': 0.25,
|
||||
'0': 0,
|
||||
)
|
||||
);
|
||||
|
||||
// Box Shadow
|
||||
.shadow-none {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// Cursor
|
||||
@include generate-classes(
|
||||
'cursor',
|
||||
'cursor',
|
||||
(
|
||||
'auto': auto,
|
||||
'default': default,
|
||||
'pointer': pointer,
|
||||
'wait': wait,
|
||||
'text': text,
|
||||
'move': move,
|
||||
'not-allowed': not-allowed,
|
||||
)
|
||||
);
|
||||
|
||||
// Outline
|
||||
.outline-none {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
// Pointer events
|
||||
@include generate-classes(
|
||||
'pointer-events',
|
||||
'pointer-events',
|
||||
(
|
||||
'auto': auto,
|
||||
'none': none,
|
||||
)
|
||||
);
|
||||
|
||||
// Screen reader only
|
||||
.sr-only {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
white-space: nowrap !important;
|
||||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
// Border radius
|
||||
@include generate-classes(
|
||||
'radius',
|
||||
'border-radius',
|
||||
(
|
||||
'default': $br-default,
|
||||
'0': 0,
|
||||
'full': 9999px,
|
||||
)
|
||||
);
|
||||
|
||||
// Background Position
|
||||
@include generate-classes(
|
||||
'bg',
|
||||
'background-position',
|
||||
(
|
||||
'bottom': bottom,
|
||||
'center': center,
|
||||
'left': left,
|
||||
'right': right,
|
||||
'top': top,
|
||||
'left-bottom': left bottom,
|
||||
'left-top': left top,
|
||||
'right-bottom': right bottom,
|
||||
'right-top': right top,
|
||||
)
|
||||
);
|
||||
|
||||
// Background Repeat
|
||||
@include generate-classes(
|
||||
'bg',
|
||||
'background-repeat',
|
||||
(
|
||||
'repeat': repeat,
|
||||
'repeat-x': repeat-x,
|
||||
'repeat-y': repeat-y,
|
||||
'no-repeat': no-repeat,
|
||||
)
|
||||
);
|
||||
|
||||
// Background Size
|
||||
@include generate-classes(
|
||||
'bg',
|
||||
'background-size',
|
||||
(
|
||||
'auto': auto,
|
||||
'cover': cover,
|
||||
'contain': contain,
|
||||
)
|
||||
);
|
||||
|
||||
// Background Attachement
|
||||
@include generate-classes(
|
||||
'bg',
|
||||
'background-attachment',
|
||||
(
|
||||
'fixed': fixed,
|
||||
'local': local,
|
||||
'scroll': scroll,
|
||||
)
|
||||
);
|
||||
119
app/assets/stylesheets/base/flexbox.scss
Normal file
119
app/assets/stylesheets/base/flexbox.scss
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
@import '../vars/variables';
|
||||
|
||||
// Flex flow
|
||||
@include generate-classes(
|
||||
'flex',
|
||||
'flex-direction',
|
||||
(
|
||||
'row': row,
|
||||
'col': column,
|
||||
'row-reverse': row-reverse,
|
||||
'col-reverse': column-reverse,
|
||||
)
|
||||
);
|
||||
|
||||
// Flex wrap
|
||||
@include generate-classes(
|
||||
'flex',
|
||||
'flex-wrap',
|
||||
(
|
||||
'wrap': wrap,
|
||||
'nowrap': nowrap,
|
||||
'wrap-reverse': wrap-reverse,
|
||||
)
|
||||
);
|
||||
|
||||
// Align items
|
||||
@include generate-classes(
|
||||
'items',
|
||||
'align-items',
|
||||
(
|
||||
'stretch': stretch,
|
||||
'start': flex-start,
|
||||
'center': center,
|
||||
'end': flex-end,
|
||||
'baseline': baseline,
|
||||
)
|
||||
);
|
||||
|
||||
// Align content
|
||||
@include generate-classes(
|
||||
'content',
|
||||
'align-content',
|
||||
(
|
||||
'start': flex-start,
|
||||
'center': center,
|
||||
'end': flex-end,
|
||||
'between': space-between,
|
||||
'around': space-around,
|
||||
)
|
||||
);
|
||||
|
||||
// Align self
|
||||
@include generate-classes(
|
||||
'self',
|
||||
'align-self',
|
||||
(
|
||||
'auto': auto,
|
||||
'start': flex-start,
|
||||
'center': center,
|
||||
'end': flex-end,
|
||||
'stretch': stretch,
|
||||
)
|
||||
);
|
||||
|
||||
// Justify content
|
||||
@include generate-classes(
|
||||
'justify',
|
||||
'justify-content',
|
||||
(
|
||||
'start': flex-start,
|
||||
'center': center,
|
||||
'end': flex-end,
|
||||
'between': space-between,
|
||||
'around': space-around,
|
||||
)
|
||||
);
|
||||
|
||||
// Flex
|
||||
@include generate-classes(
|
||||
'flex',
|
||||
'flex',
|
||||
(
|
||||
'initial': 0 auto,
|
||||
'1': 1 1 0%,
|
||||
'auto': 1 1 auto,
|
||||
'none': none,
|
||||
)
|
||||
);
|
||||
|
||||
// Flex grow
|
||||
@include generate-classes(
|
||||
'grow',
|
||||
'flex-grow',
|
||||
(
|
||||
'0': 0,
|
||||
'1': 1,
|
||||
)
|
||||
);
|
||||
|
||||
// Flex shrink
|
||||
@include generate-classes(
|
||||
'shrink',
|
||||
'flex-shrink',
|
||||
(
|
||||
'0': 0,
|
||||
'1': 1,
|
||||
)
|
||||
);
|
||||
|
||||
// Order
|
||||
@include generate-classes(
|
||||
'order',
|
||||
'order',
|
||||
(
|
||||
'first': -9999,
|
||||
'last': 9999,
|
||||
'0': 0,
|
||||
)
|
||||
);
|
||||
53
app/assets/stylesheets/base/grid.scss
Normal file
53
app/assets/stylesheets/base/grid.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
@import '../vars/variables';
|
||||
|
||||
// Gap
|
||||
@include generate-classes(
|
||||
'gap',
|
||||
'grid-gap',
|
||||
(
|
||||
'0': 0,
|
||||
),
|
||||
$spacing-units
|
||||
);
|
||||
|
||||
// Grid Template Columns
|
||||
@include generate-classes(
|
||||
'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)),
|
||||
)
|
||||
);
|
||||
|
||||
// Grid Template Rows
|
||||
@include generate-classes(
|
||||
'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)),
|
||||
)
|
||||
);
|
||||
|
||||
// Grid Flow
|
||||
@include generate-classes(
|
||||
'grid-flow',
|
||||
'grid-auto-flow',
|
||||
(
|
||||
'row': row,
|
||||
'col': column,
|
||||
'row-dense': row dense,
|
||||
'col-dense': column dense,
|
||||
)
|
||||
);
|
||||
13
app/assets/stylesheets/base/icons.scss
Normal file
13
app/assets/stylesheets/base/icons.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.crayons-icon {
|
||||
vertical-align: bottom;
|
||||
-moz-transform: rotate(360deg);
|
||||
|
||||
// If we ever have an icon with its own colors that we don't want to overwrite,
|
||||
// lets use modifier class `.crayons-icon__default`. It will prevent applying
|
||||
// currentColor from parent element.
|
||||
&:not(#{& + --default}) {
|
||||
* {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
152
app/assets/stylesheets/base/layout.scss
Normal file
152
app/assets/stylesheets/base/layout.scss
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
@import '../vars/variables';
|
||||
|
||||
// Display
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.inline-flex {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid !important;
|
||||
}
|
||||
|
||||
// Floats
|
||||
@include generate-classes(
|
||||
'float',
|
||||
'float',
|
||||
(
|
||||
'left': left,
|
||||
'right': right,
|
||||
'none': none,
|
||||
'unset': unset,
|
||||
)
|
||||
);
|
||||
|
||||
.clear {
|
||||
clear: both !important;
|
||||
}
|
||||
|
||||
// Visibility
|
||||
.visible {
|
||||
visiblity: visible !important;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visiblity: hidden !important;
|
||||
}
|
||||
|
||||
// Box sizing
|
||||
@include generate-classes(
|
||||
'box',
|
||||
'box-sizing',
|
||||
(
|
||||
'border': border-box,
|
||||
'content': content-box,
|
||||
)
|
||||
);
|
||||
|
||||
// Table layout
|
||||
@include generate-classes(
|
||||
'table',
|
||||
'table-layout',
|
||||
(
|
||||
'auto': auto,
|
||||
'fixed': fixed,
|
||||
)
|
||||
);
|
||||
|
||||
// Border style
|
||||
@include generate-classes(
|
||||
'border',
|
||||
'border-style',
|
||||
(
|
||||
'solid': solid,
|
||||
'dashed': dashed,
|
||||
'dotted': dotted,
|
||||
'none': none,
|
||||
)
|
||||
);
|
||||
|
||||
// Border width
|
||||
@include generate-classes(
|
||||
'border',
|
||||
'border-width',
|
||||
(
|
||||
'1': 1px,
|
||||
'2': 2px,
|
||||
'3': 3px,
|
||||
'4': 4px,
|
||||
'8': 8px,
|
||||
)
|
||||
);
|
||||
|
||||
// Border top width
|
||||
@include generate-classes(
|
||||
'border',
|
||||
'border-top-width',
|
||||
(
|
||||
't-1': 1px,
|
||||
't-2': 2px,
|
||||
't-3': 3px,
|
||||
't-4': 4px,
|
||||
't-8': 8px,
|
||||
)
|
||||
);
|
||||
|
||||
// Border bottom width
|
||||
@include generate-classes(
|
||||
'border',
|
||||
'border-bottom-width',
|
||||
(
|
||||
'b-1': 1px,
|
||||
'b-2': 2px,
|
||||
'b-3': 3px,
|
||||
'b-4': 4px,
|
||||
'b-8': 8px,
|
||||
)
|
||||
);
|
||||
|
||||
// Border left width
|
||||
@include generate-classes(
|
||||
'border',
|
||||
'border-left-width',
|
||||
(
|
||||
'l-1': 1px,
|
||||
'l-2': 2px,
|
||||
'l-3': 3px,
|
||||
'l-4': 4px,
|
||||
'l-8': 8px,
|
||||
)
|
||||
);
|
||||
|
||||
// Border right width
|
||||
@include generate-classes(
|
||||
'border',
|
||||
'border-right-width',
|
||||
(
|
||||
'r-1': 1px,
|
||||
'r-2': 2px,
|
||||
'r-3': 3px,
|
||||
'r-4': 4px,
|
||||
'r-8': 8px,
|
||||
)
|
||||
);
|
||||
202
app/assets/stylesheets/base/positioning.scss
Normal file
202
app/assets/stylesheets/base/positioning.scss
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
@import '../vars/variables';
|
||||
|
||||
// Positions
|
||||
.static {
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky !important;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
// All directions
|
||||
@include generate-classes(
|
||||
'all',
|
||||
(top, left, right, bottom),
|
||||
(
|
||||
'auto': auto,
|
||||
'unset': unset,
|
||||
'0': 0,
|
||||
)
|
||||
);
|
||||
|
||||
// Top
|
||||
@include generate-classes(
|
||||
'top',
|
||||
'top',
|
||||
(
|
||||
'auto': auto,
|
||||
'unset': unset,
|
||||
'0': 0,
|
||||
'1': $su-1,
|
||||
'2': $su-2,
|
||||
'3': $su-3,
|
||||
'4': $su-4,
|
||||
)
|
||||
);
|
||||
|
||||
// Top negative
|
||||
@include generate-classes(
|
||||
'-top',
|
||||
'top',
|
||||
(
|
||||
'1': -$su-1,
|
||||
'2': -$su-2,
|
||||
'3': -$su-3,
|
||||
'4': -$su-4,
|
||||
)
|
||||
);
|
||||
|
||||
// Bottom
|
||||
@include generate-classes(
|
||||
'bottom',
|
||||
'bottom',
|
||||
(
|
||||
'auto': auto,
|
||||
'unset': unset,
|
||||
'0': 0,
|
||||
'1': $su-1,
|
||||
'2': $su-2,
|
||||
'3': $su-3,
|
||||
'4': $su-4,
|
||||
)
|
||||
);
|
||||
|
||||
// Bottom negative
|
||||
@include generate-classes(
|
||||
'-bottom',
|
||||
'bottom',
|
||||
(
|
||||
'1': -$su-1,
|
||||
'2': -$su-2,
|
||||
'3': -$su-3,
|
||||
'4': -$su-4,
|
||||
)
|
||||
);
|
||||
|
||||
// Left
|
||||
@include generate-classes(
|
||||
'left',
|
||||
'left',
|
||||
(
|
||||
'auto': auto,
|
||||
'unset': unset,
|
||||
'0': 0,
|
||||
'1': $su-1,
|
||||
'2': $su-2,
|
||||
'3': $su-3,
|
||||
'4': $su-4,
|
||||
)
|
||||
);
|
||||
|
||||
// Left negative
|
||||
@include generate-classes(
|
||||
'-left',
|
||||
'left',
|
||||
(
|
||||
'1': -$su-1,
|
||||
'2': -$su-2,
|
||||
'3': -$su-3,
|
||||
'4': -$su-4,
|
||||
)
|
||||
);
|
||||
|
||||
// Right
|
||||
@include generate-classes(
|
||||
'left',
|
||||
'left',
|
||||
(
|
||||
'auto': auto,
|
||||
'unset': unset,
|
||||
'0': 0,
|
||||
'1': $su-1,
|
||||
'2': $su-2,
|
||||
'3': $su-3,
|
||||
'4': $su-4,
|
||||
)
|
||||
);
|
||||
|
||||
// Right negative
|
||||
@include generate-classes(
|
||||
'-right',
|
||||
'right',
|
||||
(
|
||||
'1': -$su-1,
|
||||
'2': -$su-2,
|
||||
'3': -$su-3,
|
||||
'4': -$su-4,
|
||||
)
|
||||
);
|
||||
|
||||
// Z-index
|
||||
@include generate-classes(
|
||||
'z',
|
||||
'z-index',
|
||||
(
|
||||
'z-negative': -1,
|
||||
'z-0': 0,
|
||||
'z-10': 10,
|
||||
'z-20': 20,
|
||||
'z-30': 30,
|
||||
'z-40': 40,
|
||||
'z-50': 50,
|
||||
'z-auto': auto,
|
||||
)
|
||||
);
|
||||
|
||||
// Overflow
|
||||
@include generate-classes(
|
||||
'overflow',
|
||||
'overflow',
|
||||
(
|
||||
'auto': auto,
|
||||
'visible': visible,
|
||||
'scroll': scroll,
|
||||
'hidden': hidden,
|
||||
)
|
||||
);
|
||||
|
||||
// Overflow X
|
||||
@include generate-classes(
|
||||
'overflow-x',
|
||||
'overflow-x',
|
||||
(
|
||||
'auto': auto,
|
||||
'visible': visible,
|
||||
'scroll': scroll,
|
||||
'hidden': hidden,
|
||||
)
|
||||
);
|
||||
|
||||
// Overflow Y
|
||||
@include generate-classes(
|
||||
'overflow-y',
|
||||
'overflow-y',
|
||||
(
|
||||
'auto': auto,
|
||||
'visible': visible,
|
||||
'scroll': scroll,
|
||||
'hidden': hidden,
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
// Smooth scrolling on iOS
|
||||
.scrolling-touch {
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
}
|
||||
.scrolling-auto {
|
||||
-webkit-overflow-scrolling: auto !important;
|
||||
}
|
||||
136
app/assets/stylesheets/base/reset.scss
Normal file
136
app/assets/stylesheets/base/reset.scss
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
// TODO: uncomment when we're ready!
|
||||
// *,
|
||||
// *::before,
|
||||
// *::after {
|
||||
// box-sizing: border-box;
|
||||
// }
|
||||
|
||||
// Remove default padding
|
||||
ul[class],
|
||||
ol[class] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1.5;
|
||||
-webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS.
|
||||
}
|
||||
|
||||
// Remove default margin
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p,
|
||||
ul[class],
|
||||
ol[class],
|
||||
li,
|
||||
figure,
|
||||
figcaption,
|
||||
blockquote,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Set core body defaults
|
||||
body {
|
||||
min-height: 100vh;
|
||||
scroll-behavior: smooth;
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// Render the `main` element consistently in IE.
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Remove list styles on ul, ol elements with a class attribute
|
||||
ul[class],
|
||||
ol[class] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
// Unify styling
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Correct the inability to style clickable types in iOS and Safari.
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
// Remove the inner border and padding in Firefox.
|
||||
button::-moz-focus-inner,
|
||||
[type='button']::-moz-focus-inner,
|
||||
[type='reset']::-moz-focus-inner,
|
||||
[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button:-moz-focusring,
|
||||
[type='button']:-moz-focusring,
|
||||
[type='reset']:-moz-focusring,
|
||||
[type='submit']:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
// Add the correct font weight in Chrome, Edge, and Safari.
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
// Add the correct font size in all browsers.
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
//Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
// Remove all animations and transitions for people that prefer not to see them
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
61
app/assets/stylesheets/base/sizing.scss
Normal file
61
app/assets/stylesheets/base/sizing.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
@import '../vars/variables';
|
||||
|
||||
// Width
|
||||
@include generate-classes(
|
||||
'w',
|
||||
'width',
|
||||
(
|
||||
'0': 0,
|
||||
'25': 25%,
|
||||
'50': 50%,
|
||||
'100': 100%,
|
||||
'auto': auto,
|
||||
'full': 100vw,
|
||||
)
|
||||
);
|
||||
|
||||
// Min width
|
||||
@include generate-classes(
|
||||
'min-w',
|
||||
'min-width',
|
||||
(
|
||||
'0': 0,
|
||||
'100': 100%,
|
||||
)
|
||||
);
|
||||
|
||||
// Height
|
||||
@include generate-classes(
|
||||
'h',
|
||||
'height',
|
||||
(
|
||||
'0': 0,
|
||||
'25': 25%,
|
||||
'50': 50%,
|
||||
'100': 100%,
|
||||
'auto': auto,
|
||||
'full': 100vh,
|
||||
)
|
||||
);
|
||||
|
||||
// Min height
|
||||
@include generate-classes(
|
||||
'min-h',
|
||||
'min-height',
|
||||
(
|
||||
'0': 0,
|
||||
'100': 100%,
|
||||
'full': 100vh,
|
||||
)
|
||||
);
|
||||
|
||||
// Max height
|
||||
@include generate-classes(
|
||||
'max-h',
|
||||
'max-height',
|
||||
(
|
||||
'0': 0,
|
||||
'100': 100%,
|
||||
'full': 100vh,
|
||||
)
|
||||
);
|
||||
195
app/assets/stylesheets/base/spacing.scss
Normal file
195
app/assets/stylesheets/base/spacing.scss
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
@import '../vars/variables';
|
||||
|
||||
// Margin
|
||||
@include generate-classes(
|
||||
'm',
|
||||
'margin',
|
||||
(
|
||||
'auto': auto,
|
||||
'unset': unset,
|
||||
'0': 0,
|
||||
),
|
||||
$spacing-units
|
||||
);
|
||||
|
||||
// Margin negative
|
||||
@include generate-classes('-m', 'margin', $negative-spacing-units);
|
||||
|
||||
// Margin top & bottom
|
||||
@include generate-classes(
|
||||
'my',
|
||||
('margin-top', 'margin-bottom'),
|
||||
(
|
||||
'auto': auto,
|
||||
'unset': unset,
|
||||
'0': 0,
|
||||
),
|
||||
$spacing-units
|
||||
);
|
||||
|
||||
// Margin top & bottom negative
|
||||
@include generate-classes(
|
||||
'-my',
|
||||
('margin-top', 'margin-bottom'),
|
||||
$negative-spacing-units
|
||||
);
|
||||
|
||||
// Margin left & right
|
||||
@include generate-classes(
|
||||
'mx',
|
||||
('margin-left', 'margin-right'),
|
||||
(
|
||||
'auto': auto,
|
||||
'unset': unset,
|
||||
'0': 0,
|
||||
),
|
||||
$spacing-units
|
||||
);
|
||||
|
||||
// Margin left & right negative
|
||||
@include generate-classes(
|
||||
'-mx',
|
||||
('margin-left', 'margin-right'),
|
||||
$negative-spacing-units
|
||||
);
|
||||
|
||||
// Margin top
|
||||
@include generate-classes(
|
||||
'mt',
|
||||
'margin-top',
|
||||
(
|
||||
'auto': auto,
|
||||
'unset': unset,
|
||||
'0': 0,
|
||||
),
|
||||
$spacing-units
|
||||
);
|
||||
|
||||
// Margin top negative
|
||||
@include generate-classes('-mt', 'margin-top', $negative-spacing-units);
|
||||
|
||||
// Margin bottom
|
||||
@include generate-classes(
|
||||
'mb',
|
||||
'margin-bottom',
|
||||
(
|
||||
'auto': auto,
|
||||
'unset': unset,
|
||||
'0': 0,
|
||||
),
|
||||
$spacing-units
|
||||
);
|
||||
|
||||
// Margin bottom negative
|
||||
@include generate-classes('-mb', 'margin-bottom', $negative-spacing-units);
|
||||
|
||||
// Margin left
|
||||
@include generate-classes(
|
||||
'ml',
|
||||
'margin-left',
|
||||
(
|
||||
'auto': auto,
|
||||
'unset': unset,
|
||||
'0': 0,
|
||||
),
|
||||
$spacing-units
|
||||
);
|
||||
|
||||
// Margin left negative
|
||||
@include generate-classes('-ml', 'margin-left', $negative-spacing-units);
|
||||
|
||||
// Margin right
|
||||
@include generate-classes(
|
||||
'mr',
|
||||
'margin-right',
|
||||
(
|
||||
'auto': auto,
|
||||
'unset': unset,
|
||||
'0': 0,
|
||||
),
|
||||
$spacing-units
|
||||
);
|
||||
|
||||
// Margin right negative
|
||||
@include generate-classes('-mr', 'margin-right', $negative-spacing-units);
|
||||
|
||||
///////////////////
|
||||
// Paddings
|
||||
///////////////////
|
||||
|
||||
// Padding
|
||||
@include generate-classes(
|
||||
'p',
|
||||
'padding',
|
||||
(
|
||||
'0': 0,
|
||||
'unset': unset,
|
||||
),
|
||||
$spacing-units
|
||||
);
|
||||
|
||||
// Padding top & bottom
|
||||
@include generate-classes(
|
||||
'py',
|
||||
('padding-top', 'padding-bottom'),
|
||||
(
|
||||
'0': 0,
|
||||
'unset': unset,
|
||||
),
|
||||
$spacing-units
|
||||
);
|
||||
|
||||
// Padding left & right
|
||||
@include generate-classes(
|
||||
'px',
|
||||
('padding-left', 'padding-right'),
|
||||
(
|
||||
'0': 0,
|
||||
'unset': unset,
|
||||
),
|
||||
$spacing-units
|
||||
);
|
||||
|
||||
// Padding top
|
||||
@include generate-classes(
|
||||
'pt',
|
||||
'padding-top',
|
||||
(
|
||||
'0': 0,
|
||||
'unset': unset,
|
||||
),
|
||||
$spacing-units
|
||||
);
|
||||
|
||||
// Padding bottom
|
||||
@include generate-classes(
|
||||
'pb',
|
||||
'padding-bottom',
|
||||
(
|
||||
'0': 0,
|
||||
'unset': unset,
|
||||
),
|
||||
$spacing-units
|
||||
);
|
||||
|
||||
// Padding left
|
||||
@include generate-classes(
|
||||
'pl',
|
||||
'padding-left',
|
||||
(
|
||||
'0': 0,
|
||||
'unset': unset,
|
||||
),
|
||||
$spacing-units
|
||||
);
|
||||
|
||||
// Padding right
|
||||
@include generate-classes(
|
||||
'pr',
|
||||
'padding-right',
|
||||
(
|
||||
'0': 0,
|
||||
'unset': unset,
|
||||
),
|
||||
$spacing-units
|
||||
);
|
||||
127
app/assets/stylesheets/base/typography.scss
Normal file
127
app/assets/stylesheets/base/typography.scss
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
@import '../vars/variables';
|
||||
|
||||
// Font family
|
||||
@include generate-classes(
|
||||
'ff',
|
||||
'font-family',
|
||||
(
|
||||
'default': $ff-default,
|
||||
'accent': $ff-accent,
|
||||
)
|
||||
);
|
||||
|
||||
// Font size
|
||||
@include generate-classes(
|
||||
'fs',
|
||||
'font-size',
|
||||
(
|
||||
'xs': $fs-xs,
|
||||
's': $fs-s,
|
||||
'base': $fs-base,
|
||||
'l': $fs-l,
|
||||
'xl': $fs-xl,
|
||||
'2xl': $fs-2xl,
|
||||
'3xl': $fs-3xl,
|
||||
'4xl': $fs-4xl,
|
||||
'5xl': $fs-5xl,
|
||||
)
|
||||
);
|
||||
|
||||
// Line height
|
||||
@include generate-classes(
|
||||
'lh',
|
||||
'line-height',
|
||||
(
|
||||
'tight': $lh-tight,
|
||||
'base': $lh-base,
|
||||
)
|
||||
);
|
||||
|
||||
// Font weight
|
||||
@include generate-classes(
|
||||
'fw',
|
||||
'font-weight',
|
||||
(
|
||||
'normal': $fw-normal,
|
||||
'medium': $fw-medium,
|
||||
'bold': $fw-bold,
|
||||
'heavy': $fw-heavy,
|
||||
)
|
||||
);
|
||||
|
||||
// List styles
|
||||
@include generate-classes(
|
||||
'list',
|
||||
'list-style-type',
|
||||
(
|
||||
'none': none,
|
||||
'disc': disc,
|
||||
'decimal': decimal,
|
||||
)
|
||||
);
|
||||
|
||||
// Text decoration
|
||||
@include generate-classes(
|
||||
'text',
|
||||
'text-decoration',
|
||||
(
|
||||
'underline': underline,
|
||||
'none': none,
|
||||
)
|
||||
);
|
||||
|
||||
// Text decoration
|
||||
@include generate-classes(
|
||||
'text',
|
||||
'text-transform',
|
||||
(
|
||||
'uppercase': uppercase,
|
||||
'lowercase': lowercase,
|
||||
'capitalize': capitalize,
|
||||
'normal': none,
|
||||
)
|
||||
);
|
||||
|
||||
// Text align
|
||||
@include generate-classes(
|
||||
'align',
|
||||
'text-align',
|
||||
(
|
||||
'left': left,
|
||||
'center': center,
|
||||
'right': right,
|
||||
'justify': justify,
|
||||
)
|
||||
);
|
||||
|
||||
// Vertical alignment
|
||||
@include generate-classes(
|
||||
'align',
|
||||
'vertical-align',
|
||||
(
|
||||
'baseline': baseline,
|
||||
'top': top,
|
||||
'middle': middle,
|
||||
'bottom': bottom,
|
||||
'text-top': text-top,
|
||||
'text-bottom': text-bottom,
|
||||
)
|
||||
);
|
||||
|
||||
// White space
|
||||
@include generate-classes(
|
||||
'whitespace',
|
||||
'white-space',
|
||||
(
|
||||
'normal': normal,
|
||||
'nowrap': nowrap,
|
||||
'pre': pre,
|
||||
)
|
||||
);
|
||||
|
||||
// Truncate
|
||||
.truncate {
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
65
app/assets/stylesheets/components/avatars.scss
Normal file
65
app/assets/stylesheets/components/avatars.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
@import '../vars/variables';
|
||||
|
||||
// avatar-logo() - Generates styles for Avatars or Logos component
|
||||
//
|
||||
// Logos & avatars look almost the same with tiny difference. They're
|
||||
// supposed to be separate components so for that reason they have
|
||||
// separate classes. Because of that we have mixing which is meant to
|
||||
// generate specific styles for both.
|
||||
//
|
||||
// @param {string} $name Name of the component, will be included in class name
|
||||
// @param {number} $radius Value for border-radius
|
||||
// @param {color} $background Background visible until image loads in.
|
||||
|
||||
@mixin avatar-logo($name, $radius, $background) {
|
||||
.crayons-#{$name} {
|
||||
display: inline-block;
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
background-color: $background;
|
||||
width: $su-6;
|
||||
height: $su-6;
|
||||
|
||||
&__image {
|
||||
border-radius: $radius;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: bottom; // todo: do we need it?
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
border: 1px solid rgba($smoke-100, 0.15);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: $radius;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&--l {
|
||||
width: $su-7;
|
||||
height: $su-7;
|
||||
}
|
||||
|
||||
&--xl {
|
||||
width: $su-8;
|
||||
height: $su-8;
|
||||
}
|
||||
|
||||
&--2xl {
|
||||
width: $su-9;
|
||||
height: $su-9;
|
||||
}
|
||||
|
||||
&--3xl {
|
||||
width: $su-10;
|
||||
height: $su-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include avatar-logo('avatar', 100%, $smoke-60);
|
||||
@include avatar-logo('logo', $br-default, $snowflake);
|
||||
113
app/assets/stylesheets/components/buttons.scss
Normal file
113
app/assets/stylesheets/components/buttons.scss
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
@import '../vars/variables';
|
||||
|
||||
// Basic styling
|
||||
.crayons-btn {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: $br-default;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
font-size: $fs-base;
|
||||
line-height: $lh-base;
|
||||
font-weight: $fw-medium;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all $transition-props;
|
||||
}
|
||||
|
||||
// Styles
|
||||
.crayons-btn {
|
||||
background-color: $dolphin;
|
||||
color: $snowflake;
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
color: rgba($snowflake, 0.8);
|
||||
background-color: $dolphin-lighter;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $dolphin-darker;
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
background-color: $smoke-20;
|
||||
color: $smoke-80;
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
color: $smoke-40;
|
||||
background-color: $smoke-10;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $smoke-100;
|
||||
background-color: $smoke-30;
|
||||
}
|
||||
}
|
||||
|
||||
&--outlined {
|
||||
border: 2px solid $smoke-30;
|
||||
color: $smoke-80;
|
||||
background-color: transparent;
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
color: $smoke-40;
|
||||
border-color: $smoke-20;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $smoke-100;
|
||||
border-color: $smoke-40;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background-color: $raspberry;
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
color: rgba($snowflake, 0.8);
|
||||
background-color: $raspberry-lighter;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $raspberry-darker;
|
||||
}
|
||||
}
|
||||
|
||||
&--text {
|
||||
background-color: transparent;
|
||||
color: $dolphin;
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
background-color: transparent;
|
||||
color: $dolphin-lighter;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: $dolphin-darker;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icon Left
|
||||
.crayons-btn--icon-left {
|
||||
padding-left: 0.75em;
|
||||
|
||||
.crayons-icon {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
// Full width
|
||||
.crayons-btn--full {
|
||||
width: 100%;
|
||||
}
|
||||
25
app/assets/stylesheets/components/dropdowns.scss
Normal file
25
app/assets/stylesheets/components/dropdowns.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
@import '../vars/variables';
|
||||
@import '../base/boxes';
|
||||
|
||||
%dropdown-style {
|
||||
@extend .crayons-box;
|
||||
@extend .crayons-box--level-2;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.crayons-dropdown {
|
||||
@extend %dropdown-style;
|
||||
padding: $su-4;
|
||||
min-width: 164px;
|
||||
max-width: 250px;
|
||||
|
||||
&--l {
|
||||
min-width: 251px;
|
||||
max-width: 320px;
|
||||
padding: $su-6;
|
||||
}
|
||||
|
||||
&--padding-0 {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
188
app/assets/stylesheets/components/forms.scss
Normal file
188
app/assets/stylesheets/components/forms.scss
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
@import '../vars/variables';
|
||||
|
||||
%form-styling {
|
||||
background-color: $smoke-00;
|
||||
border: 1px solid $smoke-30;
|
||||
appearance: none;
|
||||
border-radius: $br-default;
|
||||
transition: all $transition-props;
|
||||
|
||||
&-hover {
|
||||
border-color: $smoke-40;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
color: $smoke-60;
|
||||
background-color: $smoke-10;
|
||||
}
|
||||
|
||||
&-checked {
|
||||
background-color: $dolphin;
|
||||
border-color: $dolphin-darker;
|
||||
color: $snowflake;
|
||||
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.
|
||||
.crayons-textfield {
|
||||
line-height: $lh-base;
|
||||
padding: 0.5em;
|
||||
font-family: inherit;
|
||||
font-size: $fs-base;
|
||||
width: 100%;
|
||||
@extend %form-styling;
|
||||
|
||||
&::placeholder {
|
||||
color: $smoke-60;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@extend %form-styling-hover;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: $snowflake;
|
||||
border-color: $dolphin;
|
||||
box-shadow: 1px 1px 0 $dolphin;
|
||||
}
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
@extend %form-styling-disabled;
|
||||
}
|
||||
|
||||
&::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--icon {
|
||||
padding-left: $su-7;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkboxes, Radios
|
||||
.crayons-checkbox,
|
||||
.crayons-radio {
|
||||
width: 1.125em;
|
||||
height: 1.125em;
|
||||
cursor: pointer;
|
||||
background-position: center center;
|
||||
vertical-align: middle;
|
||||
@extend %form-styling;
|
||||
|
||||
&:hover {
|
||||
@extend %form-styling-hover;
|
||||
}
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
@extend %form-styling-disabled;
|
||||
}
|
||||
|
||||
&--checked,
|
||||
&:checked {
|
||||
@extend %form-styling-checked;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.157.933a.75.75 0 01.077 1.058L4.817 9.407a.75.75 0 01-1.134 0L.766 6.037a.75.75 0 011.135-.982L4.25 7.77l5.85-6.76a.75.75 0 011.057-.077z' fill='%23fff'/%3E%3C/svg%3E");
|
||||
|
||||
&--disabled,
|
||||
&[disabled] {
|
||||
@extend %form-styling-checked-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Radios
|
||||
.crayons-radio {
|
||||
border-radius: 50%;
|
||||
|
||||
&--checked,
|
||||
&:checked {
|
||||
@extend %form-styling-checked;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='6' height='6' rx='3' fill='%23fff'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////
|
||||
|
||||
// Full Fields markup
|
||||
.crayons-field {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
font-size: $fs-base; // todo: do we need it?
|
||||
|
||||
$this: &;
|
||||
|
||||
&__label {
|
||||
color: $smoke-90;
|
||||
font-weight: $fw-medium;
|
||||
|
||||
+ .crayons-field__description {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: $smoke-60;
|
||||
font-size: $fs-s;
|
||||
font-weight: $fw-normal; // for when it's inside --label
|
||||
margin: 0; //todo remove
|
||||
}
|
||||
|
||||
> * + * {
|
||||
margin-top: $su-2;
|
||||
}
|
||||
|
||||
&--checkbox,
|
||||
&--radio {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5em 1fr;
|
||||
grid-gap: $su-2;
|
||||
border-radius: $br-default;
|
||||
transition: all $transition-props;
|
||||
|
||||
&:hover {
|
||||
background: $smoke-10;
|
||||
box-shadow: 0 0 0 $su-1 $smoke-10;
|
||||
}
|
||||
|
||||
#{$this}__label {
|
||||
margin-top: 0;
|
||||
padding-right: $su-2; // adding this to make hovers look slightly better.
|
||||
}
|
||||
}
|
||||
|
||||
.crayons-checkbox,
|
||||
.crayons-radio {
|
||||
margin: 0.1875em; // centering checkbox within 1.5em grid cell.
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.crayons-fields {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
$this: &;
|
||||
|
||||
&:not(#{$this}--horizontal) {
|
||||
> .crayons-field + .crayons-field {
|
||||
margin-top: $su-2;
|
||||
}
|
||||
}
|
||||
|
||||
&--horizontal {
|
||||
flex-flow: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .crayons-field:not(:last-child) {
|
||||
margin-right: $su-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
53
app/assets/stylesheets/components/indicators.scss
Normal file
53
app/assets/stylesheets/components/indicators.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
@import '../vars/variables';
|
||||
|
||||
// indicator() - Generates styles for Indicators
|
||||
//
|
||||
// Indicators have bunch of styles combines with bunch of states. To make
|
||||
// it easier to generate all these classes, we created a help which should
|
||||
// do the job.
|
||||
//
|
||||
// @param {object} $this Cached variable with parent element
|
||||
// @param {string} $name Value for border-radius
|
||||
// @param {color} $color-1 Main color.
|
||||
|
||||
@mixin indicator($this, $name, $color-1) {
|
||||
&#{'--' + $name} {
|
||||
background-color: $color-1;
|
||||
color: $snowflake;
|
||||
&#{$this + '--outlined'} {
|
||||
background-color: transparent;
|
||||
color: $color-1;
|
||||
border-color: $color-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Basic styling
|
||||
.crayons-indicator {
|
||||
font-family: $ff-accent;
|
||||
font-size: $fs-xs;
|
||||
padding: $su-1;
|
||||
background-color: $smoke-20;
|
||||
text-align: center;
|
||||
line-height: $lh-tight;
|
||||
border-radius: $br-default;
|
||||
display: inline-block;
|
||||
|
||||
&--outlined {
|
||||
background-color: transparent;
|
||||
border: 1px solid $smoke-20;
|
||||
color: $smoke-80;
|
||||
}
|
||||
|
||||
@include indicator(&, accent, $dolphin);
|
||||
@include indicator(&, critical, $raspberry);
|
||||
@include indicator(&, inverted, $smoke-90);
|
||||
|
||||
// Circle, no text
|
||||
&--bullet {
|
||||
width: $su-3;
|
||||
height: $su-3;
|
||||
padding: 0;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
29
app/assets/stylesheets/components/modals.scss
Normal file
29
app/assets/stylesheets/components/modals.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
@import '../vars/variables';
|
||||
@import '../base/boxes';
|
||||
|
||||
%modal-style {
|
||||
@extend .crayons-box;
|
||||
@extend .crayons-box--level-3;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.crayons-modal {
|
||||
@extend %modal-style;
|
||||
padding: $su-7;
|
||||
max-width: 640px;
|
||||
|
||||
&--s {
|
||||
max-width: 480px;
|
||||
padding: $su-6;
|
||||
}
|
||||
|
||||
&--l {
|
||||
max-width: 800px;
|
||||
padding: $su-8;
|
||||
}
|
||||
|
||||
&--padding-0 {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
70
app/assets/stylesheets/components/navigation.scss
Normal file
70
app/assets/stylesheets/components/navigation.scss
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
@import '../vars/variables';
|
||||
|
||||
.crayons-nav-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $su-2;
|
||||
border-radius: $br-default;
|
||||
color: $smoke-90;
|
||||
|
||||
&:hover:not(&--current) {
|
||||
background: $smoke-00;
|
||||
color: $smoke-100;
|
||||
}
|
||||
|
||||
&--current {
|
||||
font-weight: $fw-medium;
|
||||
color: $smoke-100;
|
||||
background: $snowflake;
|
||||
}
|
||||
|
||||
.crayons-icon {
|
||||
margin-right: $su-2;
|
||||
vertical-align: middle;
|
||||
width: $su-6;
|
||||
height: $su-6;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $fs-xl;
|
||||
}
|
||||
|
||||
.crayons-indicator {
|
||||
margin-left: $su-2;
|
||||
}
|
||||
|
||||
// Indented for when there's no icon
|
||||
&--indented {
|
||||
padding-left: $su-2 + $su-7; // 40px
|
||||
}
|
||||
}
|
||||
|
||||
.crayons-tabs {
|
||||
display: flex;
|
||||
|
||||
&__item {
|
||||
padding: 0 0.5em;
|
||||
color: $smoke-80;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
color: $smoke-100;
|
||||
}
|
||||
|
||||
&--current {
|
||||
color: $smoke-100;
|
||||
font-weight: $fw-medium;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0.5em;
|
||||
right: 0.5em;
|
||||
bottom: -2px;
|
||||
height: 2px;
|
||||
content: '';
|
||||
background-color: $dolphin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
28
app/assets/stylesheets/components/notices.scss
Normal file
28
app/assets/stylesheets/components/notices.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
@import '../vars/variables';
|
||||
@import '../base/boxes';
|
||||
|
||||
%notice-style {
|
||||
@extend .crayons-box;
|
||||
@extend .crayons-box--level-1;
|
||||
padding: $su-4;
|
||||
}
|
||||
|
||||
.crayons-notice {
|
||||
@extend %notice-style;
|
||||
|
||||
&--danger {
|
||||
@extend .crayons-box--danger;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
@extend .crayons-box--warning;
|
||||
}
|
||||
|
||||
&--success {
|
||||
@extend .crayons-box--success;
|
||||
}
|
||||
|
||||
&--info {
|
||||
@extend .crayons-box--info;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,9 +7,6 @@
|
|||
}
|
||||
|
||||
.filters {
|
||||
// width: 300px;
|
||||
// float: left;
|
||||
// min-height: 356px;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
|
|
|
|||
|
|
@ -45,3 +45,26 @@
|
|||
@import 'email_subscriptions';
|
||||
|
||||
@import 'article-form-needed-legacy';
|
||||
|
||||
// New approach
|
||||
@import 'base/reset';
|
||||
@import 'base/boxes';
|
||||
@import 'base/colors';
|
||||
@import 'base/decorations';
|
||||
@import 'base/flexbox';
|
||||
@import 'base/grid';
|
||||
@import 'base/icons';
|
||||
@import 'base/layout';
|
||||
@import 'base/positioning';
|
||||
@import 'base/sizing';
|
||||
@import 'base/spacing';
|
||||
@import 'base/typography';
|
||||
|
||||
@import 'components/avatars';
|
||||
@import 'components/buttons';
|
||||
@import 'components/dropdowns';
|
||||
@import 'components/forms';
|
||||
@import 'components/indicators';
|
||||
@import 'components/modals';
|
||||
@import 'components/navigation';
|
||||
@import 'components/notices';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import 'vars/variables';
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'fonts';
|
||||
|
|
@ -5,8 +7,7 @@
|
|||
body {
|
||||
@include themeable(background, theme-background, $lightest-gray);
|
||||
@include themeable(color, theme-color, $black);
|
||||
font-family: $helvetica;
|
||||
font-size: 18px;
|
||||
font-family: $ff-default;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: scroll;
|
||||
|
|
@ -61,6 +62,7 @@ body {
|
|||
overflow: hidden;
|
||||
min-height: 88vh;
|
||||
visibility: visible;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
56
app/assets/stylesheets/vars/_colors.scss
Normal file
56
app/assets/stylesheets/vars/_colors.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
$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,
|
||||
);
|
||||
36
app/assets/stylesheets/vars/_spacing-units.scss
Normal file
36
app/assets/stylesheets/vars/_spacing-units.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
$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,
|
||||
);
|
||||
26
app/assets/stylesheets/vars/_typography.scss
Normal file
26
app/assets/stylesheets/vars/_typography.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
// 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;
|
||||
44
app/assets/stylesheets/vars/_utils.scss
Normal file
44
app/assets/stylesheets/vars/_utils.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
4
app/assets/stylesheets/vars/_variables.scss
Normal file
4
app/assets/stylesheets/vars/_variables.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@import 'utils';
|
||||
@import 'colors';
|
||||
@import 'spacing-units';
|
||||
@import 'typography';
|
||||
|
|
@ -87,6 +87,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)
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<% elsif @story_show %>
|
||||
<style>
|
||||
<% Rails.application.config.assets.compile = true %>
|
||||
<%= Rails.application.assets["base/reset.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["buttons.css"].to_s.html_safe %>
|
||||
|
|
@ -28,6 +29,7 @@
|
|||
<% elsif @article_index %>
|
||||
<style>
|
||||
<% Rails.application.config.assets.compile = true %>
|
||||
<%= Rails.application.assets["base/reset.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["articles.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["buttons.css"].to_s.html_safe %>
|
||||
|
|
@ -47,6 +49,7 @@
|
|||
<% elsif @notifications_index || @reading_list_items_index || @history_index %>
|
||||
<style>
|
||||
<% Rails.application.config.assets.compile = true %>
|
||||
<%= Rails.application.assets["base/reset.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["readinglist.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["history.css"].to_s.html_safe %>
|
||||
|
|
@ -62,6 +65,7 @@
|
|||
</style>
|
||||
<% elsif view_class.start_with? "comments" %>
|
||||
<style>
|
||||
<%= Rails.application.assets["base/reset.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["comments.css"].to_s.html_safe %>
|
||||
|
|
@ -74,6 +78,7 @@
|
|||
</style>
|
||||
<% elsif view_class.include?("registrations") || @new_article_not_logged_in %>
|
||||
<style>
|
||||
<%= Rails.application.assets["base/reset.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["article-form-needed-legacy.css"].to_s.html_safe %>
|
||||
|
|
@ -81,6 +86,7 @@
|
|||
</style>
|
||||
<% elsif view_class.include? "classified_listings-" %>
|
||||
<style>
|
||||
<%= Rails.application.assets["base/reset.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["classified_listings.css"].to_s.html_safe %>
|
||||
|
|
@ -88,6 +94,7 @@
|
|||
</style>
|
||||
<% elsif view_class.include? "credits-" %>
|
||||
<style>
|
||||
<%= Rails.application.assets["base/reset.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["credits.css"].to_s.html_safe %>
|
||||
|
|
@ -95,6 +102,7 @@
|
|||
</style>
|
||||
<% elsif view_class.include? "videos-index" %>
|
||||
<style>
|
||||
<%= Rails.application.assets["base/reset.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["video-collection.css"].to_s.html_safe %>
|
||||
|
|
|
|||
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>
|
||||
|
|
@ -281,6 +281,7 @@ Rails.application.routes.draw do
|
|||
|
||||
# You can have the root of your site routed with "root
|
||||
get "/about" => "pages#about"
|
||||
get "/page/crayons" => "pages#crayons"
|
||||
get "/robots.:format" => "pages#robots"
|
||||
get "/api", to: redirect("https://docs.dev.to/api")
|
||||
get "/privacy" => "pages#privacy"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue