├── sass ├── html │ ├── scroll-to-top.html │ ├── link.html │ ├── text.html │ ├── fonts.html │ ├── arrow-button.html │ ├── textarea.html │ ├── text-inline.html │ ├── horizontal-rule.html │ ├── input-search-basic.html │ ├── button.html │ ├── heading-label.html │ ├── input-search-sticky.html │ ├── list-item.html │ ├── file-upload.html │ ├── input-search.html │ ├── text-paragraph.html │ ├── card.html │ ├── input-register.html │ ├── block-quote.html │ ├── step-progress-bar.html │ ├── top-header.html │ ├── sub-header.html │ ├── feedback-button.html │ ├── floating-menu.html │ ├── dropdown.html │ ├── pagination.html │ ├── version-picker.html │ ├── cards-container.html │ ├── checkbox.html │ ├── pagination-info.html │ ├── status-message.html │ ├── button-container.html │ ├── navigator.html │ ├── feedback-form.html │ ├── checkbox-container.html │ ├── qr-reader.html │ ├── sticky-header.html │ ├── table-of-contents.html │ ├── modal.html │ ├── tabs.html │ ├── search-result.html │ ├── layouts.html │ ├── drop-selector.html │ ├── tree-menu.html │ ├── message-box.html │ ├── header.html │ ├── forms.html │ ├── side-menu.html │ ├── table.html │ ├── project-topics.html │ └── footer.html ├── homepage.md ├── list-item.scss ├── block-quote.scss ├── text-paragraph.scss ├── success.scss ├── scroll-to-top.scss ├── horizontal-rule.scss ├── pagination-info.scss ├── textarea.scss ├── heading-label.scss ├── checkbox-container.scss ├── feedback-overlay.scss ├── colors-overlay.scss ├── step-progress-bar.scss ├── link.scss ├── cards-container.scss ├── colors-brand.scss ├── top-header.scss ├── status-message.scss ├── globals.scss ├── mixins.scss ├── fonts.scss ├── colors-utility.scss ├── search-result.scss ├── floating-menu.scss ├── input-search-basic.scss ├── modal.scss ├── button-container.scss ├── card.scss ├── arrow-button.scss ├── checkbox.scss ├── pagination.scss ├── input-search.scss ├── sub-header.scss ├── media-queries.scss ├── text-inline.scss ├── dropdown.scss ├── main.scss ├── navigator.scss ├── feedback-button.scss ├── input-register.scss ├── colors-neutral.scss ├── input-search-sticky.scss ├── message-box.scss ├── table-of-contents.scss ├── qr-reader.scss ├── tree-menu.scss ├── text.scss ├── drop-selector.scss ├── tabs.scss ├── layouts.scss ├── project-topics.scss ├── version-picker.scss ├── file-upload.scss ├── sticky-header.scss ├── button.scss ├── header.scss ├── icon.scss ├── footer.scss ├── feedback-form.scss ├── table.scss ├── side-menu.scss └── forms.scss ├── .gitignore ├── assets ├── 1.png ├── 2.png ├── 3.png ├── icons │ ├── .DS_Store │ ├── cross.svg │ ├── up-down.svg │ ├── chevron-left.svg │ ├── icons.js │ ├── arrow-right.svg │ ├── file-upload.svg │ ├── chevron-right.svg │ ├── search.svg │ ├── burger.svg │ ├── copy.svg │ ├── thumb-down.svg │ ├── chevron-down.svg │ ├── chevron-up.svg │ ├── thumb-up.svg │ ├── success.svg │ ├── info.svg │ ├── feedback.svg │ ├── danger.svg │ └── warning.svg ├── iota-icons.ttf ├── kss-override.css └── Logo.svg ├── CHANGELOG.md ├── kss-config.json ├── .stylelintrc.json ├── LICENSE ├── README.md ├── .github └── workflows │ └── client-prod.yaml ├── scripts └── iconFont.js └── package.json /sass/html/scroll-to-top.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /sass/html/textarea.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /sass/html/text-inline.html: -------------------------------------------------------------------------------- 1 | Sample Text 2 | 3 | -------------------------------------------------------------------------------- /assets/icons/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iotaledger-archive/iota-css-theme/HEAD/assets/icons/.DS_Store -------------------------------------------------------------------------------- /assets/iota-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iotaledger-archive/iota-css-theme/HEAD/assets/iota-icons.ttf -------------------------------------------------------------------------------- /sass/html/horizontal-rule.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## v0.5.4 4 | 5 | * Updated Tree Menu style to allow for sub items 6 | * Updated Side Menu style to allow for sub items 7 | -------------------------------------------------------------------------------- /sass/html/input-search-basic.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /sass/html/button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /sass/homepage.md: -------------------------------------------------------------------------------- 1 | # IOTA CSS Style Guide 2 | 3 | Living style guide showing the IOTA CSS Styles. 4 | 5 | The repo for the styles is 6 | -------------------------------------------------------------------------------- /sass/html/heading-label.html: -------------------------------------------------------------------------------- 1 |
2 | Official Support 3 |
4 |
5 |
6 | Community Support 7 |
-------------------------------------------------------------------------------- /sass/html/input-search-sticky.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /sass/html/list-item.html: -------------------------------------------------------------------------------- 1 | 6 |
7 |
    8 |
  1. Item 1
    2. 9 |
  2. Item 2
    3. 10 |
  3. Item 3
    4. 11 |
-------------------------------------------------------------------------------- /sass/list-item.scss: -------------------------------------------------------------------------------- 1 | // List Item 2 | // 3 | // Various list item styles. 4 | // 5 | // Markup: html/list-item.html 6 | // 7 | // Styleguide Atoms.List Item 8 | 9 | li { 10 | color: $body-copy; 11 | @include font-size(17px); 12 | line-height: 2; 13 | } 14 | -------------------------------------------------------------------------------- /kss-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "IOTA Style Guide", 3 | "source": "./sass/", 4 | "homepage": "./sass/homepage.md", 5 | "destination": "./dist/", 6 | "css": [ 7 | "./assets/kss-override.css", 8 | "./main.css" 9 | ], 10 | "js" : [ 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /sass/block-quote.scss: -------------------------------------------------------------------------------- 1 | // Block Quote 2 | // 3 | // Markup: html/block-quote.html 4 | // 5 | // Styleguide Atoms.Block Quote 6 | 7 | blockquote, 8 | .blockquote { 9 | margin: 0px 0px 16px 0px; 10 | padding: 10px 0px 1px 36px; 11 | border-left: 3px solid $blueberry; 12 | } 13 | -------------------------------------------------------------------------------- /sass/html/file-upload.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Select or drop your file here 4 | myContract.doc 5 |
6 | -------------------------------------------------------------------------------- /assets/icons/cross.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sass/html/input-search.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 7 |
-------------------------------------------------------------------------------- /sass/html/text-paragraph.html: -------------------------------------------------------------------------------- 1 |

Sample Text

2 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum convallis velit, sed ullamcorper orci faucibus eget. Proin posuere iaculis mollis.. 3 | -------------------------------------------------------------------------------- /sass/html/card.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | IOTA intro 4 |
5 | What is IOTA? 6 |
7 | 8 |
9 | -------------------------------------------------------------------------------- /sass/html/input-register.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 6 |
-------------------------------------------------------------------------------- /assets/icons/up-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sass/html/block-quote.html: -------------------------------------------------------------------------------- 1 |
2 | I love deadlines. I like the whooshing sound they make as they fly by. 3 |
4 |
5 |
6 | A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools. 7 |
8 | -------------------------------------------------------------------------------- /sass/html/step-progress-bar.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | -------------------------------------------------------------------------------- /sass/text-paragraph.scss: -------------------------------------------------------------------------------- 1 | // Text Paragraph 2 | // 3 | // Various paragraph text styles. 4 | // 5 | // Markup: html/text-paragraph.html 6 | // 7 | // Styleguide Atoms.Text Paragraph 8 | 9 | p, 10 | .text-paragraph { 11 | margin-bottom: 1.0625rem; 12 | color: $body-copy; 13 | @include font-size(16.8px); 14 | line-height: 1.75; 15 | 16 | a { 17 | text-decoration: underline; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /assets/icons/chevron-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sass/success.scss: -------------------------------------------------------------------------------- 1 | // Success 2 | // 3 | // For generic status messages. 4 | // 5 | // Styleguide Molecules.Success 6 | 7 | .success-wrapper { 8 | display: flex; 9 | align-items: center; 10 | width: 100%; 11 | font-weight: 600; 12 | @include word-break; 13 | 14 | .success-icon { 15 | margin-right: 20px; 16 | } 17 | 18 | .success-message { 19 | display: flex; 20 | flex-direction: column; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /sass/html/top-header.html: -------------------------------------------------------------------------------- 1 |
2 | 9 |
10 | -------------------------------------------------------------------------------- /sass/html/sub-header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | IOTA Basics 4 |
5 | 6 | IOTA Networks 7 | 8 |
9 |
10 |
-------------------------------------------------------------------------------- /assets/icons/icons.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "arrow-right": "→", 3 | "burger": "🍔", 4 | "chevron-up": "↑", 5 | "chevron-down": "↓", 6 | "chevron-right": ">", 7 | "chevron-left": "<", 8 | "cross": "X", 9 | "copy": "📄", 10 | "feedback": "💬", 11 | "search": "🔍", 12 | "thumb-up": "👍", 13 | "thumb-down": "👎", 14 | "up-down": "🔽", 15 | "success": "✅", 16 | "danger": "⛔", 17 | "info": "i", 18 | "warning": "!", 19 | "file-upload": "📤" 20 | } 21 | -------------------------------------------------------------------------------- /sass/scroll-to-top.scss: -------------------------------------------------------------------------------- 1 | // Scroll To Top 2 | // 3 | // Markup: html/scroll-to-top.html 4 | // 5 | // Styleguide Molecules.Scroll To Top 6 | 7 | .scroll-to-top { 8 | width: 38px; 9 | height: 38px; 10 | margin: 0; 11 | padding: 0; 12 | transform: rotate(90deg); 13 | border: 0; 14 | background: none; 15 | color: $white; 16 | cursor: pointer; 17 | 18 | &:focus { 19 | outline: none; 20 | } 21 | 22 | &::before { 23 | @extend %icon-chevron-left; 24 | @include icon(38px); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /sass/horizontal-rule.scss: -------------------------------------------------------------------------------- 1 | // Horizontal Rule 2 | // 3 | // Various horizontal rule styles. 4 | // 5 | // Markup: html/horizontal-rule.html 6 | // 7 | // .horizontal-rule--small - Horizontal ruler small. 8 | // 9 | // Styleguide Atoms.Horizontal Rule 10 | 11 | hr, 12 | .horizontal-rule { 13 | width: 100%; 14 | margin: 16px 0px 16px 0px; 15 | border: 0; 16 | border-top: 3px solid $sand-grey; 17 | border-style: solid; 18 | text-align: left; 19 | } 20 | 21 | .horizontal-rule--small { 22 | width: 160px; 23 | } 24 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-standard", 4 | "stylelint-config-property-sort-order-smacss" 5 | ], 6 | "plugins": [ 7 | "stylelint-scss" 8 | ], 9 | "rules": { 10 | "at-rule-no-unknown": null, 11 | "scss/at-rule-no-unknown": true, 12 | "color-hex-length": "long", 13 | "no-descending-specificity": null, 14 | "length-zero-no-unit": null, 15 | "declaration-empty-line-before": null, 16 | "at-rule-empty-line-before": null 17 | } 18 | } -------------------------------------------------------------------------------- /assets/icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sass/pagination-info.scss: -------------------------------------------------------------------------------- 1 | // Pagination Info 2 | // 3 | // Markup: html/pagination-info.html 4 | // 5 | // Styleguide Molecules.Pagination Info 6 | 7 | .pagination-info { 8 | display: flex; 9 | align-items: center; 10 | justify-content: space-between; 11 | width: 100%; 12 | margin-top: 20px; 13 | 14 | .pagination-info--text { 15 | font-weight: bold; 16 | } 17 | 18 | @include phone-down { 19 | flex-direction: column; 20 | margin-top: 20px; 21 | 22 | .pagination { 23 | margin-top: 20px; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /sass/textarea.scss: -------------------------------------------------------------------------------- 1 | // Textarea 2 | // 3 | // Markup: html/textarea.html 4 | // 5 | // Styleguide Atoms.Textarea 6 | 7 | textarea, 8 | .textarea { 9 | width: 100%; 10 | padding: 25px; 11 | border: 1px solid $light-grey; 12 | border-radius: 5px; 13 | color: $body-copy; 14 | resize: none; 15 | 16 | &:focus { 17 | outline: none; 18 | } 19 | 20 | &::placeholder { 21 | opacity: 1; 22 | color: $light-grey; 23 | } 24 | 25 | &:disabled { 26 | background-color: lighten($light-grey, 15%); 27 | color: $black; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /sass/heading-label.scss: -------------------------------------------------------------------------------- 1 | // Heading Label 2 | // 3 | // Markup: html/heading-label.html 4 | // 5 | // Styleguide Atoms.Heading Label 6 | 7 | .heading-label { 8 | display: inline-flex; 9 | align-items: center; 10 | height: 25px; 11 | margin-bottom: 12px; 12 | padding: 0px 8px 0px 8px; 13 | border-radius: 3px; 14 | background-color: $blueberry; 15 | color: #f6f6f6; 16 | @include font-size(12px); 17 | font-weight: 600; 18 | text-transform: uppercase; 19 | 20 | &.heading-label--secondary { 21 | background-color: $tealish; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /sass/checkbox-container.scss: -------------------------------------------------------------------------------- 1 | // Checkbox Container 2 | // 3 | // Various checkbox container styles. 4 | // 5 | // Markup: html/checkbox-container.html 6 | // 7 | // Styleguide Molecules.Checkbox Container 8 | 9 | .checkbox-container { 10 | display: flex; 11 | flex-direction: row; 12 | flex-wrap: wrap; 13 | align-items: center; 14 | justify-content: flex-start; 15 | width: 100%; 16 | 17 | @include phone-down { 18 | flex-direction: column; 19 | align-items: flex-start; 20 | } 21 | 22 | .checkbox { 23 | margin-right: 20px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /sass/html/feedback-button.html: -------------------------------------------------------------------------------- 1 |
2 | 5 |
6 | 7 |
8 | 11 |
12 | 13 |
14 | 17 |
-------------------------------------------------------------------------------- /sass/html/floating-menu.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /sass/feedback-overlay.scss: -------------------------------------------------------------------------------- 1 | // Feedback Overlay 2 | // 3 | // Styleguide Organisms.Feedback Overlay 4 | 5 | .feedback-overlay { 6 | display: flex; 7 | position: fixed; 8 | top: 0; 9 | left: 0; 10 | align-items: center; 11 | justify-content: center; 12 | width: 100vw; 13 | height: 100vh; 14 | overflow: auto; 15 | transition: 0.1s ease-out; 16 | transition-property: opacity; 17 | opacity: 0; 18 | pointer-events: none; 19 | } 20 | 21 | .feedback-overlay--expanded { 22 | transition: $transition-duration ease-in; 23 | opacity: 1; 24 | pointer-events: all; 25 | } 26 | -------------------------------------------------------------------------------- /sass/colors-overlay.scss: -------------------------------------------------------------------------------- 1 | // Colors Overlay 2 | // 3 | // The overlay colors for IOTA branding. 4 | // 5 | // The $hero-dark-gradient variable defines the linear gradient from $hero-dark-start to $hero-dark-end 6 | // 7 | // Colors: 8 | // $hero-dark-start: #092a33 - Hero Dark Start 9 | // $hero-dark-end: #019792 - Hero Dark End 10 | // $image-dark: #414141 - Image Dark 11 | // 12 | // Styleguide Atoms.Colors Overlay 13 | 14 | $hero-dark-start: #092a33; 15 | $hero-dark-end: #019792; 16 | $hero-dark-gradient: linear-gradient(to right, $hero-dark-start, $hero-dark-end); 17 | $image-dark: #414141; 18 | -------------------------------------------------------------------------------- /assets/icons/file-upload.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /sass/html/dropdown.html: -------------------------------------------------------------------------------- 1 |
2 | 13 |
-------------------------------------------------------------------------------- /sass/html/pagination.html: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /sass/html/version-picker.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
You are viewing the latest version of this documentation
6 |
7 |
8 |
9 | 14 |
15 |
16 |
17 |
-------------------------------------------------------------------------------- /assets/icons/chevron-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sass/step-progress-bar.scss: -------------------------------------------------------------------------------- 1 | // Step Progress bar 2 | // 3 | // Various arrow button styles. 4 | // 5 | // Markup: html/step-progress-bar.html 6 | // 7 | // .step-progress-bar-item--visited - Arrow left. 8 | // 9 | // Styleguide Molecules.Step Progress bar 10 | 11 | .step-progress-bar { 12 | display: flex; 13 | align-items: stretch; 14 | justify-content: space-between; 15 | width: 100%; 16 | 17 | &-item { 18 | width: 100%; 19 | height: 10px; 20 | margin-right: 12px; 21 | background-color: $light-grey; 22 | 23 | &:last-child { 24 | margin-right: 0; 25 | } 26 | 27 | &--visited { 28 | background-color: $blueberry; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /sass/link.scss: -------------------------------------------------------------------------------- 1 | // Link 2 | // 3 | // Markup: html/link.html 4 | // 5 | // .link - Default link. 6 | // :hover - Link in hover state. 7 | // .disabled - Link in disabled state. 8 | // 9 | // Styleguide Atoms.Link 10 | 11 | a, 12 | .link { 13 | border: 0; 14 | outline: 0; 15 | background: none; 16 | color: $body-copy; 17 | 18 | @include font-size(16px); 19 | 20 | font-weight: bold; 21 | line-height: 1.5; 22 | cursor: pointer; 23 | 24 | @include desktop { 25 | text-decoration: none; 26 | } 27 | 28 | &:hover { 29 | text-decoration: underline; 30 | } 31 | 32 | &:focus { 33 | outline: 0; 34 | } 35 | 36 | &.disabled { 37 | opacity: 0.5; 38 | cursor: default; 39 | pointer-events: none; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /sass/html/cards-container.html: -------------------------------------------------------------------------------- 1 |
2 |
IOTA intro
What is IOTA?
3 |
IOTA intro
Getting Started
4 |
IOTA intro
Next Steps
5 |
6 | -------------------------------------------------------------------------------- /sass/html/checkbox.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | 6 |
7 |
8 |
9 | 10 |
11 | 12 |
13 | 14 |
15 |
16 | 17 |
18 | 19 |
20 |
21 |
22 | 23 |
24 | 25 |
26 | -------------------------------------------------------------------------------- /sass/html/pagination-info.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Items 1 to 10 of 29 4 |
5 | 16 |
-------------------------------------------------------------------------------- /assets/icons/burger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | z 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /sass/cards-container.scss: -------------------------------------------------------------------------------- 1 | // Cards Container 2 | // 3 | // Various card container styles. 4 | // 5 | // Markup: html/cards-container.html 6 | // 7 | // Styleguide Molecules.Cards Container 8 | 9 | .cards-container { 10 | display: flex; 11 | flex-direction: row; 12 | flex-wrap: wrap; 13 | justify-content: space-around; 14 | width: 100%; 15 | padding: 50px 0px 20px; 16 | background-color: $sand-grey; 17 | 18 | @include tablet-up { 19 | padding: 50px 0px 30px 0px; 20 | } 21 | 22 | @include tablet { 23 | justify-content: space-between; 24 | 25 | .card { 26 | width: calc(50% - 10px); 27 | } 28 | } 29 | 30 | @include desktop { 31 | justify-content: space-between; 32 | 33 | .card { 34 | width: calc(33.33% - 14px); 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /sass/colors-brand.scss: -------------------------------------------------------------------------------- 1 | // Colors Brand 2 | // 3 | // The brand colors for IOTA branding. 4 | // 5 | // Colors: 6 | // $tealish: #20a49d - Tealish 7 | // $jade: #1e9a93 - Jade 8 | // $blueberry: #603f98 - Blueberry 9 | // 10 | // Styleguide Atoms.Colors Brand 11 | 12 | $tealish: #20a49d; 13 | $jade: #1e9a93; 14 | $blueberry: #603f98; 15 | 16 | body { 17 | --tealish: #{$tealish}; 18 | --jade: #{$jade}; 19 | --blueberry: #{$blueberry}; 20 | } 21 | 22 | .tealish { 23 | color: $tealish; 24 | } 25 | 26 | .jade { 27 | color: $jade; 28 | } 29 | 30 | .blueberry { 31 | color: $blueberry; 32 | } 33 | 34 | .tealish-background { 35 | background-color: $tealish; 36 | } 37 | 38 | .jade-background { 39 | background-color: $jade; 40 | } 41 | 42 | .blueberry-background { 43 | background-color: $blueberry; 44 | } 45 | -------------------------------------------------------------------------------- /sass/html/status-message.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | This is line 1. 4 | This is line 2. 5 |
6 |
7 | 8 |
9 | 10 |
11 |
12 | This is line 1. 13 | This is line 2. 14 |
15 |
16 | 17 |
18 | 19 |
20 |
21 | This is line 1. 22 | This is line 2. 23 |
24 |
25 | 26 |
27 | 28 |
29 |
30 | This is line 1. 31 | This is line 2. 32 |
33 |
-------------------------------------------------------------------------------- /assets/icons/copy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sass/html/button-container.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |
6 |
7 |
8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | 16 | 17 |
-------------------------------------------------------------------------------- /sass/html/navigator.html: -------------------------------------------------------------------------------- 1 | As <button>
2 |
3 | 7 | 11 |
12 |
13 | As <a>
14 |
15 | 16 |
Prev
17 | Querying the Tangle 18 | 19 | 20 |
Next
21 | Mainnet 22 | 23 |
24 | -------------------------------------------------------------------------------- /sass/top-header.scss: -------------------------------------------------------------------------------- 1 | // Top Header 2 | // 3 | // Header styles. 4 | // 5 | // Markup: html/top-header.html 6 | // 7 | // Styleguide Molecules.Top Header 8 | 9 | .top-header { 10 | display: flex; 11 | align-items: center; 12 | justify-content: flex-end; 13 | width: 100%; 14 | height: 50px; 15 | background: linear-gradient(to left, rgba(90, 90, 90, 0.1), rgba(255, 255, 255, 0)); 16 | } 17 | 18 | .top-header__items { 19 | display: flex; 20 | align-items: center; 21 | margin: 0px 25px; 22 | list-style: none; 23 | } 24 | 25 | .top-header__item { 26 | padding: 0 15px; 27 | text-transform: uppercase; 28 | 29 | a { 30 | color: $white; 31 | @include font-size(12px); 32 | font-weight: 300; 33 | text-decoration: none; 34 | 35 | &:hover { 36 | color: $white; 37 | text-decoration: underline; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /sass/html/feedback-form.html: -------------------------------------------------------------------------------- 1 |
2 | 19 |
-------------------------------------------------------------------------------- /sass/html/checkbox-container.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 | 7 |
8 |
9 |
10 | 11 |
12 | 13 |
14 | 15 |
16 |
17 | 18 |
19 | 20 |
21 |
22 |
23 | 24 |
25 | 26 |
27 |
-------------------------------------------------------------------------------- /sass/status-message.scss: -------------------------------------------------------------------------------- 1 | // Status Message 2 | // 3 | // For generic status messages. 4 | // 5 | // Markup: html/status-message.html 6 | // 7 | // Styleguide Molecules.Status Message 8 | 9 | .status-message { 10 | display: flex; 11 | align-items: center; 12 | width: 100%; 13 | padding: 20px; 14 | border: 1px solid var(--light-grey); 15 | border-radius: 5px; 16 | background: #ffffff; 17 | font-weight: 600; 18 | @include word-break; 19 | 20 | &.status-message__warning { 21 | color: var(--warning); 22 | } 23 | 24 | &.status-message__danger { 25 | color: var(--danger); 26 | } 27 | 28 | &.status-message__info { 29 | color: var(--info); 30 | } 31 | 32 | &.status-message__success { 33 | color: var(--success); 34 | } 35 | 36 | .spinner { 37 | margin-right: 20px; 38 | } 39 | 40 | .status { 41 | display: flex; 42 | flex-direction: column; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /sass/globals.scss: -------------------------------------------------------------------------------- 1 | $min-width: 375px; 2 | $max-width: 1495px; 3 | 4 | $transition-duration: 0.3s; 5 | $transition-duration-quick: 0.1s; 6 | 7 | html { 8 | box-sizing: border-box; 9 | } 10 | 11 | *, 12 | *::before, 13 | *::after { 14 | box-sizing: inherit; 15 | } 16 | 17 | body { 18 | min-width: 320px; 19 | padding: 0; 20 | color: $body-copy; 21 | font-family: $font-primary; 22 | font-weight: 300; 23 | 24 | &.no-scroll { 25 | overflow: hidden; 26 | } 27 | } 28 | 29 | .hidden { 30 | display: none; 31 | } 32 | 33 | input, 34 | button { 35 | // sass-lint:disable no-property-vendor-prefix 36 | -webkit-appearance: none; 37 | 38 | &[type='search'] { 39 | outline-offset: 0px; 40 | -webkit-appearance: none; 41 | 42 | &::-webkit-search-cancel-button { 43 | width: 0px; 44 | height: 0px; 45 | -webkit-appearance: none; 46 | } 47 | } 48 | } 49 | 50 | strong { 51 | font-weight: 600; 52 | } 53 | -------------------------------------------------------------------------------- /assets/kss-override.css: -------------------------------------------------------------------------------- 1 | .kss-modifier__wrapper { 2 | background-color: #dddddd; 3 | } 4 | 5 | #kss-node .kss-sidebar { 6 | background: #ffffff; 7 | box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.25); 8 | border-right: 1px solid #eeeeee; 9 | } 10 | 11 | #kss-node .kss-section { 12 | margin: 20px 0px 10px 0px; 13 | border: 1px solid #ddd; 14 | padding: 0px 20px 20px 20px; 15 | border-radius: 10px; 16 | background: #fff; 17 | box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.25); 18 | } 19 | 20 | #kss-node .kss-nav__menu-child { 21 | padding: 10px; 22 | } 23 | 24 | .kss-nav__menu-item > a, 25 | .kss-nav__menu-item > a:visited, 26 | .kss-nav__menu-item > a:hover, 27 | .kss-nav__menu-item > a:active { 28 | font-weight: normal !important; 29 | color: #20a49d !important; 30 | } 31 | 32 | #kss-node .kss-nav__menu-link.is-in-viewport:before { 33 | background-color: #20a49d; 34 | } 35 | 36 | #kss-node .kss-nav__ref { 37 | font-weight: normal !important; 38 | } -------------------------------------------------------------------------------- /sass/mixins.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | @mixin font-size($size) { 4 | font-size: $size; 5 | 6 | // sass-lint:disable no-duplicate-properties 7 | font-size: #{math.div($size, 16px)}rem; 8 | } 9 | 10 | @mixin placeholder { 11 | // sass-lint:disable no-selector-vendor-prefix 12 | &::placeholder { 13 | @content; 14 | } 15 | 16 | &::-webkit-input-placeholder { 17 | @content; 18 | } 19 | 20 | &::-moz-placeholder { 21 | @content; 22 | } 23 | 24 | &:-ms-input-placeholder { 25 | @content; 26 | } 27 | } 28 | 29 | @mixin word-break { 30 | word-break: break-all; 31 | 32 | // break-word is not supported in all browsers but behaves better than break all 33 | // sass-lint:disable no-duplicate-properties 34 | word-break: break-word; 35 | } 36 | 37 | @mixin icon($size: null) { 38 | font-family: $font-family-icons; 39 | font-weight: 300; 40 | @if ($size) { 41 | font-size: $size; 42 | line-height: $size; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /sass/html/qr-reader.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

QR Scanner

5 | 6 |

When the QR is detected the scanner will automatically close.

7 |
8 |
9 | 10 |
11 | 15 |
16 |
17 |
18 |
19 |
20 |
21 | The scanner goes here. 22 |
23 |
24 |
25 |
26 |
-------------------------------------------------------------------------------- /sass/fonts.scss: -------------------------------------------------------------------------------- 1 | // Fonts 2 | // 3 | // Standard font defintions. 4 | // 5 | // Markup: html/fonts.html 6 | // 7 | // Styleguide Atoms.Fonts 8 | 9 | // Import our custom primary font 10 | @import url('https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,600'); 11 | 12 | // Import our custom secondary font 13 | @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro'); 14 | 15 | // Create custom font stack 16 | // based on https://getbootstrap.com/docs/4.1/content/reboot/ 17 | $font-primary: 'Nunito Sans', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Helvetica Neue', arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 18 | $font-secondary: 'Source Code Pro', monospace; 19 | 20 | // Define icon font 21 | @font-face { 22 | font-family: 'IOTA icons'; 23 | font-style: normal; 24 | font-weight: normal; 25 | src: url('../assets/iota-icons.ttf?build=1.0.4') format('truetype'); 26 | } 27 | 28 | $font-family-icons: 'IOTA icons'; 29 | -------------------------------------------------------------------------------- /sass/html/sticky-header.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 | 6 | 7 |
8 | 9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 | 17 | 18 |
19 | 20 |
21 |
-------------------------------------------------------------------------------- /sass/colors-utility.scss: -------------------------------------------------------------------------------- 1 | // Colors Utility 2 | // 3 | // The utility colors for IOTA branding. 4 | // 5 | // Colors: 6 | // $warning: #ffc107 - Warning 7 | // $danger: #dc3545 - Danger 8 | // $success: #28a745 - Success 9 | // $info: #17a2b8 - Info 10 | // 11 | // Styleguide Atoms.Colors Utility 12 | 13 | $warning: #ffc107; 14 | $danger: #dc3545; 15 | $success: #28a745; 16 | $info: #17a2b8; 17 | 18 | body { 19 | --warning: #{$warning}; 20 | --danger: #{$danger}; 21 | --success: #{$success}; 22 | --info: #{$info}; 23 | } 24 | 25 | .warning { 26 | color: $warning; 27 | } 28 | 29 | .danger { 30 | color: $danger; 31 | } 32 | 33 | .success { 34 | color: $success; 35 | } 36 | 37 | .info { 38 | color: $info; 39 | } 40 | 41 | .warning-background { 42 | background-color: $warning; 43 | } 44 | 45 | .danger-background { 46 | background-color: $danger; 47 | } 48 | 49 | .success-background { 50 | background-color: $success; 51 | } 52 | 53 | .info-background { 54 | background-color: $info; 55 | } 56 | -------------------------------------------------------------------------------- /assets/icons/thumb-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sass/search-result.scss: -------------------------------------------------------------------------------- 1 | // Search Result 2 | // 3 | // Markup: html/search-result.html 4 | // 5 | // Styleguide Organisms.Search Result 6 | 7 | .search-result { 8 | display: flex; 9 | flex-direction: column; 10 | width: 100%; 11 | 12 | .search-result__total { 13 | display: flex; 14 | justify-content: center; 15 | margin-top: 50px; 16 | margin-bottom: 10px; 17 | @include font-size(17px); 18 | color: $black; 19 | font-weight: 600; 20 | } 21 | 22 | .search-result__item { 23 | display: flex; 24 | flex-direction: column; 25 | margin-top: 30px; 26 | 27 | .search-result-item__heading { 28 | color: $tealish; 29 | @include font-size(19px); 30 | font-weight: 600; 31 | line-height: 36px; 32 | } 33 | 34 | .text-paragraph { 35 | margin: 0 0 10px; 36 | } 37 | 38 | .search-result-item__link { 39 | @include word-break; 40 | color: $gunmetal-grey; 41 | @include font-size(16px); 42 | font-weight: 600; 43 | line-height: 2; 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /assets/icons/chevron-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Artboard 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/icons/chevron-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Artboard 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/icons/thumb-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sass/floating-menu.scss: -------------------------------------------------------------------------------- 1 | // Floating Menu 2 | // 3 | // Various floating menu styles. 4 | // 5 | // Markup: html/floating-menu.html 6 | // 7 | // Styleguide Molecules.Floating Menu 8 | 9 | .floating-menu { 10 | margin: 0; 11 | padding: 0; 12 | list-style: none; 13 | } 14 | 15 | .floating-menu__item { 16 | padding-left: 32px; 17 | transition: $transition-duration ease; 18 | transition-property: border; 19 | border-left: 3px solid $white; 20 | 21 | a { 22 | display: inline-block; 23 | margin: 0px; 24 | transform-origin: left center; 25 | transition: inherit; 26 | transition-property: transform, color, border-color; 27 | color: $black; 28 | @include font-size(17px); 29 | font-stretch: normal; 30 | font-style: normal; 31 | font-weight: 600; 32 | line-height: 38px; 33 | text-decoration: none; 34 | } 35 | 36 | &:hover, 37 | &.floating-menu__item--selected { 38 | border-color: $tealish; 39 | 40 | a { 41 | color: $tealish; 42 | } 43 | } 44 | 45 | &:hover { 46 | a { 47 | text-decoration: underline; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 IOTA Stiftung 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /sass/input-search-basic.scss: -------------------------------------------------------------------------------- 1 | // Input Search Basic 2 | // 3 | // Various input styles. 4 | // 5 | // Markup: html/input-search-basic.html 6 | // 7 | // Styleguide Molecules.Input Search Basic 8 | 9 | .input-wrapper-basic { 10 | display: flex; 11 | position: relative; 12 | width: 100%; 13 | max-width: $desktop-width; 14 | 15 | &::before { 16 | @extend %icon-search; 17 | position: absolute; 18 | top: calc(50% - 12px); 19 | left: 24px; 20 | color: $light-grey; 21 | @include icon(24px); 22 | } 23 | 24 | .input-search-basic { 25 | width: 100%; 26 | max-width: 100%; 27 | padding: 15px 40px 15px 73px; 28 | border: 1px solid $light-grey; 29 | border-radius: 5px; 30 | outline: none; 31 | background-color: $white; 32 | color: $black; 33 | 34 | @include font-size(18px); 35 | 36 | font-stretch: normal; 37 | font-style: normal; 38 | font-weight: 600; 39 | line-height: normal; 40 | 41 | @include placeholder { 42 | color: $white; 43 | 44 | @include font-size(20px); 45 | 46 | font-style: normal; 47 | font-weight: 600; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # iota-css-theme 2 | 3 | ## Usage 4 | 5 | In your main React file, you could do : 6 | 7 | ```shell 8 | import "iota-css-theme"; 9 | ``` 10 | 11 | ### Fonts 12 | 13 | You have to manually copy the icon font in to your project to use it. 14 | 15 | The css for this package will automatically load the font from `/assets/iota-icons.ttf` at runtime, there is no need to link to the font file manually in your source. 16 | 17 | If for example, you are using [create-react-app](https://github.com/facebook/create-react-app), you should copy `/assets/iota-icons.ttf` into the `/public/assets` folder of you react app. When the app builds it will copy the file into the `/assets` folder. 18 | 19 | ## Documentation 20 | 21 | View the Styleguide at 22 | 23 | ## Development 24 | 25 | To build the package run: 26 | 27 | ```shell 28 | npm run build 29 | ``` 30 | 31 | or to build and then serve the style guide locally: 32 | 33 | ```shell 34 | npm run build-serve 35 | ``` 36 | 37 | or to watch the sass files and automatically rebuild once they have been served you can use: 38 | 39 | ```shell 40 | npm run build-serve-watch 41 | ``` 42 | -------------------------------------------------------------------------------- /sass/html/table-of-contents.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | Sections On This Page 4 |

5 | 17 |
18 |
19 |
20 |

21 | Sections On This Page 22 |

23 | 35 |
-------------------------------------------------------------------------------- /sass/modal.scss: -------------------------------------------------------------------------------- 1 | // Modal 2 | // 3 | // Markup: html/modal.html 4 | // 5 | // Styleguide Molecules.Modal 6 | 7 | .modal-wrapper { 8 | position: fixed; 9 | z-index: 1000; 10 | top: 0; 11 | right: 0; 12 | bottom: 0; 13 | left: 0; 14 | } 15 | 16 | .modal-overlay { 17 | position: absolute; 18 | top: 0; 19 | right: 0; 20 | bottom: 0; 21 | left: 0; 22 | opacity: 0.9; 23 | background-color: #ffffff; 24 | } 25 | 26 | .modal-container { 27 | display: flex; 28 | position: absolute; 29 | top: 0; 30 | right: 0; 31 | bottom: 0; 32 | left: 0; 33 | align-items: center; 34 | justify-content: center; 35 | max-width: 100%; 36 | padding: 40px; 37 | } 38 | 39 | .modal { 40 | max-width: 100%; 41 | border: 1px solid $light-grey; 42 | border-radius: 5px; 43 | background: $white; 44 | 45 | .modal-title { 46 | padding: 20px; 47 | font-weight: bold; 48 | 49 | @include font-size(20px); 50 | } 51 | 52 | .modal-content { 53 | padding: 20px; 54 | 55 | @include word-break; 56 | } 57 | 58 | .modal-actions { 59 | display: flex; 60 | justify-content: flex-end; 61 | padding: 20px; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /sass/button-container.scss: -------------------------------------------------------------------------------- 1 | // Button Container 2 | // 3 | // Various button container styles. 4 | // 5 | // Markup: html/button-container.html 6 | // 7 | // Styleguide Molecules.Button Container 8 | 9 | .button-container { 10 | display: flex; 11 | flex-direction: row; 12 | justify-content: flex-start; 13 | width: 100%; 14 | 15 | .button { 16 | margin-right: 10px !important; 17 | margin-left: 0px !important; 18 | } 19 | 20 | @include phone-down { 21 | flex-direction: column; 22 | justify-content: stretch; 23 | 24 | .button { 25 | width: 100%; 26 | min-width: 180px; 27 | margin-right: 0px; 28 | margin-bottom: 10px !important; 29 | margin-left: 0px; 30 | text-align: center; 31 | } 32 | } 33 | 34 | &.button-container__center { 35 | justify-content: center; 36 | 37 | .button { 38 | margin-right: 5px !important; 39 | margin-left: 5px !important; 40 | } 41 | } 42 | 43 | &.button-container__right { 44 | justify-content: flex-end; 45 | 46 | .button { 47 | margin-right: 0px !important; 48 | margin-left: 10px !important; 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /sass/html/modal.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Title of the Modal 4 |
5 | 6 |
7 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor augue viverra ullamcorper 8 | fermentum. 9 | Ut malesuada lorem a pharetra dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id 10 | lectus massa. Duis ut enim tempor, lobortis sapien sed, facilisis dolor. Maecenas pellentesque sem quis 11 | lorem 12 | sagittis eleifend. Aliquam mattis eros sit amet magna interdum efficitur. Lorem ipsum dolor sit amet, 13 | consectetur 14 | adipiscing elit. Quisque sodales felis nisl, ac cursus nibh vulputate ut. In fermentum turpis sed mauris 15 | aliquet 16 | pharetra. Nullam nibh lectus, pharetra sit amet mi eu, luctus convallis ligula. Curabitur et sem orci. 17 | Integer 18 | commodo fringilla dictum. 19 |
20 | 21 |
22 | 23 | 24 |
25 |
-------------------------------------------------------------------------------- /.github/workflows/client-prod.yaml: -------------------------------------------------------------------------------- 1 | name: Client Build and Deploy Production 2 | 3 | on: 4 | push: 5 | branches: [master] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | 11 | env: 12 | # Build specific env vars 13 | VERCEL_DOMAIN: ${{ secrets.VERCEL_CLIENT_PROD_DOMAIN }} 14 | 15 | # Global Vercel env vars 16 | VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} 17 | VERCEL_PROJECT_ID: ${{ secrets.VERCEL_CLIENT_PROJECT_ID }} 18 | VERCEL_PROJECT_NAME: ${{ secrets.VERCEL_CLIENT_PROJECT_NAME }} 19 | 20 | steps: 21 | - uses: actions/checkout@v2 22 | - name: Use Node.js 12.x 23 | uses: actions/setup-node@v1 24 | with: 25 | node-version: "12" 26 | - name: Client Deploy 27 | run: | 28 | npx vercel --token ${{ secrets.VERCEL_TOKEN }} --scope ${{ secrets.VERCEL_SCOPE }} --force -m githubCommitSha=${{ github.sha }} 29 | VERCEL_DEPLOYMENT_URL=$(npx vercel ls --token ${{ secrets.VERCEL_TOKEN }} --scope ${{ secrets.VERCEL_SCOPE }} -m githubCommitSha=${{ github.sha }} | grep $VERCEL_PROJECT_NAME | awk {'print $2'}) 30 | npx vercel alias --token ${{ secrets.VERCEL_TOKEN }} --scope ${{ secrets.VERCEL_SCOPE }} $VERCEL_DEPLOYMENT_URL $VERCEL_DOMAIN 31 | -------------------------------------------------------------------------------- /sass/html/tabs.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 10 |
11 | Copied 12 | 13 |
14 |
15 |
16 |
17 | This is some content.
18 | This is some content.
19 | This is some content.
20 | This is some content.
21 | This is some content.
22 | This is some content.
23 |
24 |
25 | This is some content.
26 | This is some content.
27 | This is some content.
28 | This is some content.
29 | This is some content.
30 | This is some content.
31 |
32 |
33 |
-------------------------------------------------------------------------------- /sass/card.scss: -------------------------------------------------------------------------------- 1 | // Card 2 | // 3 | // Home page card styles. 4 | // 5 | // Markup: html/card.html 6 | // 7 | // Styleguide Molecules.Card 8 | 9 | .card__link { 10 | display: block; 11 | position: relative; 12 | width: 100%; 13 | padding-top: 75%; 14 | overflow: hidden; 15 | 16 | &.text { 17 | color: $gunmetal-grey; 18 | } 19 | 20 | &:visited { 21 | color: $gunmetal-grey; 22 | } 23 | 24 | @include desktop { 25 | text-decoration: none; 26 | } 27 | } 28 | 29 | .card__wrapper { 30 | display: flex; 31 | width: 100%; 32 | } 33 | 34 | .card__label { 35 | position: relative; 36 | z-index: 2; 37 | width: 100%; 38 | margin: 0; 39 | padding: 24px; 40 | background-color: $white; 41 | line-height: 1; 42 | text-align: left; 43 | } 44 | 45 | .card { 46 | width: 100%; 47 | max-width: 380px; 48 | margin-bottom: 20px; 49 | 50 | &:first-child { 51 | justify-content: flex-start; 52 | } 53 | 54 | &:last-child { 55 | justify-content: flex-end; 56 | } 57 | 58 | @include phone-down { 59 | margin-right: 0px; 60 | } 61 | 62 | .card__image { 63 | position: absolute; 64 | top: 0px; 65 | width: 100%; 66 | height: auto; 67 | transition: transform 1s; 68 | } 69 | 70 | &:hover { 71 | .card__image { 72 | transform: scale(1.05); 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /sass/arrow-button.scss: -------------------------------------------------------------------------------- 1 | // Arrow Button 2 | // 3 | // Various arrow button styles. 4 | // 5 | // Markup: html/arrow-button.html 6 | // 7 | // .arrow-button--left - Arrow left. 8 | // .arrow-button--left:disabled - Arrow left disabled. 9 | // .arrow-button--right - Arrow right. 10 | // .arrow-button--right:disabled - Arrow right disabled. 11 | // 12 | // Styleguide Atoms.Arrow Button 13 | 14 | .arrow-button { 15 | position: relative; 16 | width: 35px; 17 | height: 35px; 18 | border: 0; 19 | background: none; 20 | 21 | @include tablet-up { 22 | width: 40px; 23 | height: 40px; 24 | } 25 | 26 | &::before { 27 | position: absolute; 28 | top: 0px; 29 | left: 0px; 30 | @include icon(35px); 31 | color: $white; 32 | 33 | @include tablet-up { 34 | font-size: 40px; 35 | line-height: 40px; 36 | } 37 | } 38 | 39 | &:hover { 40 | &:not([disabled]) { 41 | opacity: 0.75; 42 | cursor: pointer; 43 | } 44 | } 45 | 46 | &:focus { 47 | outline: none; 48 | } 49 | 50 | &:disabled { 51 | opacity: 0.5; 52 | cursor: default; 53 | pointer-events: none; 54 | } 55 | } 56 | 57 | .arrow-button--left { 58 | &::before { 59 | @extend %icon-chevron-left; 60 | } 61 | } 62 | 63 | .arrow-button--right { 64 | &::before { 65 | @extend %icon-chevron-right; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /sass/checkbox.scss: -------------------------------------------------------------------------------- 1 | // Checkbox 2 | // 3 | // Various checkbox styles. 4 | // 5 | // Markup: html/checkbox.html 6 | // 7 | // Styleguide Atoms.Checkbox 8 | 9 | .checkbox { 10 | display: flex; 11 | align-items: center; 12 | justify-content: flex-start; 13 | margin-bottom: 10px; 14 | 15 | &.checkbox__disabled { 16 | opacity: 0.5; 17 | } 18 | 19 | .checkbox-border { 20 | width: 40px; 21 | height: 40px; 22 | margin-right: 10px; 23 | border: 1px solid $light-grey; 24 | border-radius: 5px; 25 | background-color: $white; 26 | 27 | input { 28 | &[type='checkbox'] { 29 | width: 100%; 30 | height: 100%; 31 | transition: $transition-duration ease; 32 | transition-property: opacity; 33 | border: 5px solid $white; 34 | border-radius: 5px; 35 | outline: none; 36 | opacity: 0; 37 | background-color: $jade; 38 | appearance: none; 39 | 40 | &:focus { 41 | outline: none; 42 | } 43 | 44 | &:hover { 45 | &:not([disabled]) { 46 | opacity: 0.5; 47 | cursor: pointer; 48 | } 49 | } 50 | 51 | &:checked { 52 | opacity: 1; 53 | } 54 | } 55 | } 56 | } 57 | 58 | .checkbox-border + label { 59 | flex: 0; 60 | margin: auto; 61 | font-weight: normal; 62 | white-space: nowrap; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /sass/pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | // 3 | // Markup: html/pagination.html 4 | // 5 | // Styleguide Molecules.Pagination 6 | 7 | .pagination { 8 | margin: 0; 9 | padding: 0; 10 | list-style: none; 11 | 12 | // This is necessary to remove space between li items 13 | @include font-size(0px); 14 | 15 | .pagination-item { 16 | display: inline-flex; 17 | align-items: center; 18 | min-width: 34px; 19 | height: 34px; 20 | padding: 0px 8px 0px 8px; 21 | 22 | &::before { 23 | content: ''; 24 | position: relative; 25 | top: 0px; 26 | left: -9px; 27 | width: 1px; 28 | height: 24px; 29 | background-color: $light-grey; 30 | } 31 | 32 | &:first-child { 33 | &::before { 34 | background-color: transparent; 35 | } 36 | } 37 | 38 | a { 39 | @include font-size(16px); 40 | 41 | display: inline-flex; 42 | align-items: center; 43 | justify-content: center; 44 | height: 100%; 45 | padding-right: 12px; 46 | padding-left: 12px; 47 | color: #84898f; 48 | font-weight: normal; 49 | text-decoration: underline; 50 | 51 | &:hover { 52 | text-decoration: underline; 53 | } 54 | 55 | @include desktop { 56 | text-decoration: none; 57 | } 58 | } 59 | } 60 | 61 | .pagination-item--selected { 62 | a { 63 | background-color: $tealish; 64 | color: $white; 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /assets/icons/success.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /sass/html/search-result.html: -------------------------------------------------------------------------------- 1 |
2 |
9 documents found.
3 |
4 | 5 |
This is a result
6 |
/some/location/1
7 | 8 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis ante eu luctus 9 | venenatis. Ut condimentum tristique porttitor. Pellentesque rutrum dolor sed pretium tincidunt.
10 |
11 |
12 | 13 |
This is a result
14 |
/some/location/1
15 | 16 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis ante eu luctus 17 | venenatis. Ut condimentum tristique porttitor. Pellentesque rutrum dolor sed pretium tincidunt.
18 |
19 |
20 | 21 |
This is a result
22 |
/some/location/1
23 | 24 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis ante eu luctus 25 | venenatis. Ut condimentum tristique porttitor. Pellentesque rutrum dolor sed pretium tincidunt.
26 |
27 |
-------------------------------------------------------------------------------- /sass/html/layouts.html: -------------------------------------------------------------------------------- 1 |
2 |

Home

3 |
4 |
5 |
Left Column
6 |
7 |
8 |
Right Column
9 |
10 |
11 | 12 |


Documents

13 |
14 |
15 |
Left Column
16 |
17 |
18 |
Middle Column
19 |
20 |
21 |
Right Column
22 |
23 |
24 | 25 |


Search

26 |
27 |
28 |
Middle Column
29 |
30 |
31 | 32 |


Layout Single

33 |
34 |
35 |
Middle Column
36 |
37 |
38 |
-------------------------------------------------------------------------------- /sass/input-search.scss: -------------------------------------------------------------------------------- 1 | // Input Search 2 | // 3 | // Various input styles. 4 | // 5 | // Markup: html/input-search.html 6 | // 7 | // Styleguide Molecules.Input Search 8 | 9 | .input-wrapper { 10 | display: inline-flex; 11 | position: relative; 12 | width: 100%; 13 | margin-bottom: 50px; 14 | 15 | &::before { 16 | @extend %icon-search; 17 | 18 | position: absolute; 19 | top: calc(50% - 12px); 20 | left: 0; 21 | color: $white; 22 | 23 | @include icon(24px); 24 | } 25 | 26 | nav { 27 | display: flex; 28 | position: absolute; 29 | top: 72px; 30 | color: $white; 31 | font-size: 14px; 32 | line-height: 1.5; 33 | 34 | span { 35 | opacity: 0.5; 36 | font-weight: 600; 37 | } 38 | 39 | a { 40 | margin-left: 3px; 41 | color: $white; 42 | font-size: 14px; 43 | text-decoration: underline; 44 | 45 | &:hover { 46 | text-decoration: none; 47 | } 48 | } 49 | } 50 | } 51 | 52 | .input-search { 53 | width: 100%; 54 | max-width: 100%; 55 | padding: 13px 10px 13px 43px; 56 | border: 0; 57 | border-bottom: 2px solid $white; 58 | border-radius: 0px; 59 | outline: none; 60 | background-color: transparent; 61 | color: $white; 62 | 63 | @include font-size(20px); 64 | 65 | font-stretch: normal; 66 | font-style: normal; 67 | font-weight: 600; 68 | line-height: normal; 69 | 70 | @include placeholder { 71 | opacity: 0.6; 72 | color: $white; 73 | 74 | @include font-size(20px); 75 | 76 | font-style: normal; 77 | font-weight: 300; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /assets/icons/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /sass/sub-header.scss: -------------------------------------------------------------------------------- 1 | // Sub Header 2 | // 3 | // Various sub header styles. 4 | // 5 | // Markup: html/sub-header.html 6 | // 7 | // Styleguide Molecules.Sub Header 8 | 9 | .sub-header__wrapper { 10 | background: $hero-dark-gradient; 11 | 12 | .sub-header { 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: space-around; 17 | padding: 15px 16px; 18 | background-color: rgba(255, 255, 255, 0.1); 19 | color: $white; 20 | 21 | @include tablet-up { 22 | height: 100px; 23 | padding: 0 40px; 24 | } 25 | 26 | .sub-header__title { 27 | display: block; 28 | margin-bottom: 5px; 29 | 30 | @include font-size(28px); 31 | 32 | font-stretch: normal; 33 | font-style: normal; 34 | font-weight: bold; 35 | 36 | @include tablet-up { 37 | display: none; 38 | } 39 | 40 | &.sub-header-title__fixed { 41 | display: block; 42 | } 43 | } 44 | 45 | .sub-header__body { 46 | display: flex; 47 | align-items: center; 48 | justify-content: space-between; 49 | width: 100%; 50 | 51 | .sub-header__bottom-title { 52 | display: flex; 53 | align-items: center; 54 | padding-right: 5px; 55 | padding-left: 5px; 56 | text-align: center; 57 | 58 | @include tablet-up { 59 | @include font-size(34px); 60 | 61 | padding-right: 10px; 62 | padding-left: 10px; 63 | font-stretch: normal; 64 | font-style: normal; 65 | font-weight: bold; 66 | } 67 | } 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /sass/html/drop-selector.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
IOTA Token
4 |
5 |
6 | 48 |
49 | -------------------------------------------------------------------------------- /sass/media-queries.scss: -------------------------------------------------------------------------------- 1 | $phone-width: 514px; 2 | $tablet-width: 768px; 3 | $desktop-width: 1024px; 4 | $desktop-narrow-width: 1180px; 5 | 6 | @mixin tablet { 7 | @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) { 8 | @content; 9 | } 10 | } 11 | 12 | @mixin desktop { 13 | @media (min-width: #{$desktop-width}) { 14 | @content; 15 | } 16 | } 17 | 18 | @mixin desktop-down { 19 | @media (max-width: #{$desktop-width}) { 20 | @content; 21 | } 22 | } 23 | 24 | @mixin desktop-narrow-down { 25 | @media (max-width: #{$desktop-narrow-width}) { 26 | @content; 27 | } 28 | } 29 | 30 | @mixin tablet-up { 31 | @media (min-width: #{$tablet-width}) { 32 | @content; 33 | } 34 | } 35 | 36 | @mixin tablet-down { 37 | @media (max-width: #{$tablet-width - 1px}) { 38 | @content; 39 | } 40 | } 41 | 42 | @mixin phone-up { 43 | @media (min-width: #{$phone-width}) { 44 | @content; 45 | } 46 | } 47 | 48 | @mixin phone-down { 49 | @media (max-width: #{$phone-width}) { 50 | @content; 51 | } 52 | } 53 | 54 | .desktop-up-hidden { 55 | @include desktop-down { 56 | display: none !important; 57 | } 58 | } 59 | 60 | .desktop-down-hidden { 61 | @include desktop-down { 62 | display: none !important; 63 | } 64 | } 65 | 66 | .tablet-up-hidden { 67 | @include tablet-up { 68 | display: none !important; 69 | } 70 | } 71 | 72 | .tablet-down-hidden { 73 | @include tablet-down { 74 | display: none !important; 75 | } 76 | } 77 | 78 | .phone-down-hidden { 79 | @include phone-down { 80 | display: none !important; 81 | } 82 | } 83 | 84 | .phone-up-hidden { 85 | @include phone-up { 86 | display: none !important; 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /sass/text-inline.scss: -------------------------------------------------------------------------------- 1 | // Text Inline 2 | // 3 | // Various inline text styles. 4 | // 5 | // Markup: html/text-inline.html 6 | // 7 | // .text-inline--strong - Color is darker and font weight is strong. 8 | // .text-inline--emphasis - Color is darker. 9 | // .text-inline--bold - Font weight is bold. 10 | // .text-inline--alert - Color is danger. 11 | // .text-inline--italic - Font has italic attribute. 12 | // .text-inline--underline - Text is underlined. 13 | // .text-inline--strikethrough - Text has a line through it. 14 | // .text-inline--small - For fine print. 15 | // .text-inline--quotation - Italic and emphasized. 16 | // .text-inline--code - Font family is used for computer output. 17 | // 18 | // Styleguide Atoms.Text Inline 19 | 20 | .text-inline { 21 | color: $body-copy; 22 | @include font-size(17px); 23 | font-stretch: normal; 24 | font-style: normal; 25 | font-weight: normal; 26 | letter-spacing: normal; 27 | line-height: 1.41; 28 | } 29 | 30 | .text-inline--strong { 31 | color: $black; 32 | font-weight: 600; 33 | } 34 | 35 | .text-inline--emphasis { 36 | color: $black; 37 | } 38 | 39 | .text-inline--bold { 40 | font-weight: bold; 41 | } 42 | 43 | .text-inline--alert { 44 | color: $danger; 45 | font-weight: bold; 46 | } 47 | 48 | .text-inline--italic { 49 | font-style: italic; 50 | } 51 | 52 | .text-inline--underline { 53 | text-decoration: underline; 54 | } 55 | 56 | .text-inline--strikethrough { 57 | text-decoration: line-through; 58 | } 59 | 60 | .text-inline--small { 61 | @include font-size(12px); 62 | } 63 | 64 | .text-inline--quotation { 65 | color: $black; 66 | font-style: italic; 67 | } 68 | 69 | .text-inline--code { 70 | font-family: $font-secondary; 71 | } 72 | -------------------------------------------------------------------------------- /sass/dropdown.scss: -------------------------------------------------------------------------------- 1 | // Dropdown 2 | // 3 | // Dropdown styles. 4 | // 5 | // Markup: html/dropdown.html 6 | // 7 | // Styleguide Atoms.Dropdown 8 | 9 | %select-wrapper-base { 10 | position: relative; 11 | width: 100%; 12 | height: 60px; 13 | border: 1px solid $white; 14 | border-radius: 6px; 15 | background-color: rgba(255, 255, 255, 0.1); 16 | line-height: 1; 17 | 18 | @include phone-down { 19 | max-width: none; 20 | } 21 | 22 | &::after { 23 | @extend %icon-chevron-down; 24 | 25 | position: absolute; 26 | top: calc(50% - 9px); 27 | right: 25px; 28 | color: $white; 29 | 30 | @include icon(18px); 31 | 32 | line-height: 18px; 33 | pointer-events: none; 34 | } 35 | } 36 | 37 | %select-base { 38 | width: 100%; 39 | height: 58px; 40 | padding-right: 55px; 41 | padding-left: 20px; 42 | overflow: hidden; 43 | border: 0; 44 | border-radius: 6px !important; 45 | outline: none; 46 | background: none; 47 | color: $white; 48 | font-size: inherit; 49 | text-overflow: ellipsis; 50 | white-space: nowrap; 51 | 52 | // sass-lint:disable no-property-vendor-prefix 53 | -webkit-appearance: none; 54 | -moz-appearance: none; 55 | appearance: none; 56 | 57 | option { 58 | color: $black; 59 | } 60 | 61 | optgroup { 62 | color: $gunmetal-grey; 63 | } 64 | 65 | // Remove the down arrow on Edge 66 | &::-ms-expand { 67 | display: none; 68 | } 69 | 70 | // Remove the focus rect on Firefox 71 | &:-moz-focusring { 72 | color: transparent; 73 | text-shadow: 0 0 0 $white; 74 | } 75 | 76 | &:-moz-focusring * { 77 | color: $white; 78 | text-shadow: none; 79 | } 80 | } 81 | 82 | .select-wrapper { 83 | @extend %select-wrapper-base; 84 | } 85 | 86 | select { 87 | @extend %select-base; 88 | } 89 | -------------------------------------------------------------------------------- /sass/main.scss: -------------------------------------------------------------------------------- 1 | // Normalize the css 2 | @import '../node_modules/normalize.css/normalize'; 3 | 4 | // Globals 5 | @import 'mixins'; 6 | @import 'media-queries'; 7 | @import 'colors-brand'; 8 | @import 'colors-neutral'; 9 | @import 'colors-utility'; 10 | @import 'colors-overlay'; 11 | @import 'fonts'; 12 | @import 'globals'; 13 | @import 'forms'; 14 | 15 | // Atoms 16 | @import 'arrow-button'; 17 | @import 'block-quote'; 18 | @import 'button'; 19 | @import 'checkbox'; 20 | @import 'dropdown'; 21 | @import 'drop-selector'; 22 | @import 'heading-label'; 23 | @import 'horizontal-rule'; 24 | @import 'layouts'; 25 | @import 'link'; 26 | @import 'list-item'; 27 | @import 'modal'; 28 | @import 'text'; 29 | @import 'text-inline'; 30 | @import 'text-paragraph'; 31 | @import 'textarea'; 32 | @import 'icon'; 33 | 34 | // Molecules 35 | @import 'button-container'; 36 | @import 'card'; 37 | @import 'cards-container'; 38 | @import 'checkbox-container'; 39 | @import 'feedback-button'; 40 | @import 'feedback-overlay'; 41 | @import 'floating-menu'; 42 | @import 'input-register'; 43 | @import 'input-search'; 44 | @import 'input-search-basic'; 45 | @import 'input-search-sticky'; 46 | @import 'message-box'; 47 | @import 'navigator'; 48 | @import 'pagination'; 49 | @import 'pagination-info'; 50 | @import 'project-topics'; 51 | @import 'scroll-to-top'; 52 | @import 'side-menu'; 53 | @import 'status-message'; 54 | @import 'sub-header'; 55 | @import 'success'; 56 | @import 'table'; 57 | @import 'table-of-contents'; 58 | @import 'tabs'; 59 | @import 'top-header'; 60 | @import 'tree-menu'; 61 | @import 'version-picker'; 62 | @import 'file-upload'; 63 | @import 'step-progress-bar'; 64 | 65 | // Organisms 66 | @import 'feedback-form'; 67 | @import 'footer'; 68 | @import 'header'; 69 | @import 'qr-reader'; 70 | @import 'search-result'; 71 | @import 'sticky-header'; 72 | -------------------------------------------------------------------------------- /scripts/iconFont.js: -------------------------------------------------------------------------------- 1 | const SVGIcons2SVGFontStream = require('svgicons2svgfont'); 2 | const svg2ttf = require('svg2ttf'); 3 | const fs = require('fs'); 4 | const icons = require('../assets/icons/icons.js'); 5 | 6 | const fontStream = new SVGIcons2SVGFontStream({ 7 | fontName: 'IOTA icons', 8 | }); 9 | 10 | const iconSCSS = ` 11 | // This file is auto-generated, do not edit 12 | `; 13 | 14 | let iconPlaceholders = ""; 15 | let iconClasses = ""; 16 | 17 | fontStream 18 | .pipe(fs.createWriteStream('./Icons.svg')) 19 | .on('finish', () => { 20 | const ttf = svg2ttf(fs.readFileSync('Icons.svg', 'utf8'), {}); 21 | fs.writeFileSync('./assets/iota-icons.ttf', Buffer.from(ttf.buffer)); 22 | console.log('Font successfully created!'); 23 | }) 24 | .on('error', (err) => { 25 | console.log(err); 26 | }); 27 | 28 | let characterErrors = 0; 29 | Object.keys(icons).forEach((glyph) => { 30 | if (encodeURIComponent(icons[glyph]).length >= 14) { 31 | console.error(`glyph '${glyph}' uses a unicode character that is beyond the range that can be used in an icon font, it will fail to display in Edge`) 32 | characterErrors++; 33 | } 34 | const iconFile = fs.createReadStream(`./assets/icons/${glyph}.svg`); 35 | iconFile.metadata = { 36 | unicode: [icons[glyph]], 37 | name: glyph, 38 | }; 39 | fontStream.write(iconFile); 40 | 41 | iconPlaceholders += ` 42 | %icon-${glyph} { 43 | content: '${icons[glyph]}'; 44 | } 45 | ` 46 | 47 | iconClasses += ` 48 | .icon-${glyph} { 49 | &::after { 50 | @extend %icon-${glyph}; 51 | @include icon(12px); 52 | } 53 | } 54 | ` 55 | }); 56 | 57 | if (characterErrors > 0) { 58 | process.exit(1); 59 | } 60 | 61 | fs.writeFileSync('./sass/icon.scss', iconSCSS + iconPlaceholders + iconClasses); 62 | 63 | fontStream.end(); 64 | -------------------------------------------------------------------------------- /sass/navigator.scss: -------------------------------------------------------------------------------- 1 | // Navigator 2 | // 3 | // Home page card styles. 4 | // 5 | // Markup: html/navigator.html 6 | // 7 | // Styleguide Molecules.Navigator 8 | 9 | .navigator { 10 | display: flex; 11 | min-height: 120px; 12 | background-color: $white; 13 | 14 | @include desktop { 15 | height: 152px; 16 | } 17 | 18 | .navigator__back, 19 | .navigator__next { 20 | display: flex; 21 | flex-direction: column; 22 | align-items: flex-start; 23 | justify-content: center; 24 | width: 100%; 25 | padding: 18px 16px; 26 | border: 1px $sand-grey solid; 27 | border-right: 0; 28 | border-left: 0; 29 | background-color: transparent; 30 | text-align: left; 31 | text-decoration: none; 32 | cursor: pointer; 33 | 34 | &:focus { 35 | outline: none; 36 | } 37 | 38 | &:disabled { 39 | opacity: 0.5; 40 | cursor: default; 41 | pointer-events: none; 42 | } 43 | 44 | &:hover { 45 | &:not([disabled]) { 46 | text-decoration: underline; 47 | } 48 | } 49 | 50 | @include desktop { 51 | padding-left: 90px; 52 | border-width: 2px; 53 | } 54 | 55 | @include phone-down { 56 | justify-content: flex-start; 57 | } 58 | } 59 | 60 | .navigator__next { 61 | align-items: flex-end; 62 | border-left: 1px $sand-grey solid; 63 | text-align: right; 64 | 65 | @include desktop { 66 | padding: 18px 90px 18px 16px; 67 | border-width: 2px; 68 | } 69 | } 70 | 71 | .navigator__label { 72 | @include font-size(18px); 73 | 74 | color: $tealish; 75 | font-weight: normal; 76 | 77 | @include desktop { 78 | @include font-size(24px); 79 | 80 | font-weight: bold; 81 | } 82 | } 83 | 84 | .navigator__title { 85 | @include font-size(18px); 86 | 87 | color: $body-copy; 88 | font-weight: normal; 89 | 90 | @include desktop { 91 | @include font-size(22px); 92 | } 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /sass/feedback-button.scss: -------------------------------------------------------------------------------- 1 | // Feedback Button 2 | // 3 | // Markup: html/feedback-button.html 4 | // 5 | // hover - Button in hover state. 6 | // 7 | // Styleguide Molecules.Feedback Button 8 | 9 | .feedback-button__wrapper { 10 | display: flex; 11 | position: relative; 12 | top: 0; 13 | left: 0; 14 | align-items: center; 15 | justify-content: center; 16 | width: 65px; 17 | height: 65px; 18 | transition: $transition-duration ease-out; 19 | transition-property: box-shadow, background-color, opacity; 20 | border: 0; 21 | border-radius: 50%; 22 | background-color: #ffffff; 23 | box-shadow: 0px 0px 0px 0px #ffffff; 24 | } 25 | 26 | .feedback-button__wrapper--expanded { 27 | transition: $transition-duration ease-out; 28 | transition-property: box-shadow, background-color, opacity; 29 | opacity: 0.8; 30 | background-color: #3f3f3f; 31 | box-shadow: 0px 0px 0px 150vw #3f3f3f; 32 | } 33 | 34 | .feedback-button { 35 | width: 65px; 36 | height: 65px; 37 | transition: $transition-duration ease; 38 | transition-property: background; 39 | border: 2px solid $white; 40 | border-radius: 50%; 41 | background-color: #f6f6f6; 42 | cursor: pointer; 43 | 44 | &:hover { 45 | background-color: #e6e6e6; 46 | } 47 | 48 | &:focus { 49 | outline: none; 50 | } 51 | 52 | .feedback-button--icon { 53 | &::before { 54 | @extend %icon-feedback; 55 | position: absolute; 56 | top: calc(50% - 14px); 57 | left: calc(50% - 15px); 58 | color: $jade; 59 | @include icon(30px); 60 | } 61 | } 62 | 63 | .feedback-button--icon-yes { 64 | &::before { 65 | @extend %icon-thumb-up; 66 | top: calc(50% - 16px); 67 | @include icon(28px); 68 | } 69 | } 70 | 71 | .feedback-button--icon-no { 72 | &::before { 73 | @extend %icon-thumb-down; 74 | top: calc(50% - 13px); 75 | @include icon(28px); 76 | } 77 | } 78 | } 79 | 80 | .feedback-button--hide-content { 81 | display: none; 82 | } 83 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "iota-css-theme", 3 | "version": "0.5.5", 4 | "description": "IOTA CSS Theme", 5 | "main": "dist/main.css", 6 | "scripts": { 7 | "serve": "browser-sync start --port 4100 --ui-port 4101 --server ./dist", 8 | "serve-watch": "browser-sync start --port 4100 --ui-port 4101 --server ./dist --watch --files ./dist/", 9 | "build-clean": "rimraf ./dist", 10 | "build-compile-kss": "kss --config kss-config.json", 11 | "build-compile-sass": "sass ./sass/main.scss ./dist/main.css", 12 | "build-compile-sass-watch": "chokidar \"./sass/**/*\" -c \"run-s build-compile-kss build-compile-sass\"", 13 | "build-copy": "copyfiles assets/*.* dist", 14 | "build": "run-s build-clean build-compile-kss build-copy build-compile-sass", 15 | "build-font": "node ./scripts/iconFont.js", 16 | "sass-lint": "stylelint ./sass/**/*.scss", 17 | "build-serve": "run-s build serve", 18 | "watch": "run-p serve-watch build-compile-sass-watch", 19 | "build-serve-watch": "run-s build watch", 20 | "start": "serve -p dist" 21 | }, 22 | "author": "IOTA Foundation", 23 | "license": "MIT", 24 | "devDependencies": { 25 | "browser-sync": "^2.27.5", 26 | "chokidar-cli": "^3.0.0", 27 | "copyfiles": "^2.4.1", 28 | "kss": "^3.0.1", 29 | "npm-run-all": "^4.1.3", 30 | "rimraf": "^3.0.2", 31 | "sass": "^1.37.5", 32 | "stylelint": "^13.13.1", 33 | "stylelint-config-property-sort-order-smacss": "^7.1.0", 34 | "stylelint-config-recommended": "^5.0.0", 35 | "stylelint-config-recommended-scss": "^4.3.0", 36 | "stylelint-config-sass-guidelines": "^8.0.0", 37 | "stylelint-config-standard": "^22.0.0", 38 | "stylelint-scss": "^3.20.1", 39 | "svg2ttf": "^6.0.2", 40 | "svgicons2svgfont": "^10.0.3" 41 | }, 42 | "dependencies": { 43 | "normalize.css": "^8.0.1" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /sass/input-register.scss: -------------------------------------------------------------------------------- 1 | // Input Register 2 | // 3 | // Various input styles. 4 | // 5 | // Markup: html/input-register.html 6 | // 7 | // :focus - When Input is focused. 8 | // 9 | // Styleguide Molecules.Input Register 10 | 11 | $common-height: 55px; 12 | $common-desktop-width: 155px; 13 | 14 | .input-register-container { 15 | display: flex; 16 | } 17 | 18 | .input-register { 19 | width: 280px; 20 | height: $common-height; 21 | padding: 0 4px 0 16px; 22 | border: 1px solid $light-grey; 23 | border-right: 0; 24 | border-radius: 5px 0 0 5px; 25 | outline: none; 26 | background-color: $white; 27 | color: $body-copy; 28 | @include font-size(18px); 29 | font-stretch: normal; 30 | font-style: normal; 31 | font-weight: 300; 32 | line-height: normal; 33 | 34 | @include phone-down { 35 | width: 100%; 36 | } 37 | } 38 | 39 | .input-register__button { 40 | display: flex; 41 | align-items: center; 42 | justify-content: center; 43 | width: $common-height; 44 | height: $common-height; 45 | transition: $transition-duration ease; 46 | transition-property: background; 47 | border: 0; 48 | border-top-right-radius: 5px; 49 | border-bottom-right-radius: 5px; 50 | background-color: $blueberry; 51 | @include font-size(17px); 52 | font-weight: bold; 53 | cursor: pointer; 54 | 55 | &:hover { 56 | &:not([disabled]) { 57 | background-color: #4e2c88; 58 | } 59 | } 60 | 61 | &:focus { 62 | outline: none; 63 | } 64 | 65 | &:disabled { 66 | opacity: 0.5; 67 | cursor: default; 68 | pointer-events: none; 69 | } 70 | 71 | &::after { 72 | @extend %icon-arrow-right; 73 | color: $white; 74 | @include icon; 75 | } 76 | 77 | @include desktop { 78 | justify-content: space-between; 79 | width: $common-desktop-width; 80 | padding: 0px 30px; 81 | } 82 | } 83 | 84 | .input-register__button-text { 85 | display: none; 86 | color: $white; 87 | 88 | @include desktop { 89 | display: inline; 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /assets/icons/feedback.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/icons/danger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /assets/icons/warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /sass/colors-neutral.scss: -------------------------------------------------------------------------------- 1 | // Colors Neutral 2 | // 3 | // The neutral colors for IOTA branding. 4 | // 5 | // Colors: 6 | // $black: #1c1e21 - Black 7 | // $white: #ffffff - White 8 | // $gunmetal-grey: #3f3f3f - Gunmetal Grey 9 | // $body-copy: #696f76 - Body copy 10 | // $brown-grey: #8e8e8e - Brown Grey 11 | // $dark-grey: #1c1e21 - Dark Grey 12 | // $light-grey: #c4c4c4 - Light Gray 13 | // $sand-grey: #f3f2f1 - Sand Grey 14 | // 15 | // Styleguide Atoms.Colors Neutral 16 | 17 | $black: #1c1e21; 18 | $white: #ffffff; 19 | $gunmetal-grey: #3f3f3f; 20 | $body-copy: #4f4f4f; 21 | $brown-grey: #8e8e8e; 22 | $dark-grey: #1c1e21; 23 | $light-grey: #c4c4c4; 24 | $sand-grey: #f3f2f1; 25 | 26 | body { 27 | --black: #{$black}; 28 | --white: #{$white}; 29 | --gunmetal-grey: #{$gunmetal-grey}; 30 | --body-copy: #{$body-copy}; 31 | --brown-grey: #{$brown-grey}; 32 | --dark-grey: #{$dark-grey}; 33 | --light-grey: #{$light-grey}; 34 | --sand-grey: #{$sand-grey}; 35 | } 36 | 37 | .black { 38 | color: $black; 39 | } 40 | 41 | .white { 42 | color: $white; 43 | } 44 | 45 | .gunmetal-grey { 46 | color: $gunmetal-grey; 47 | } 48 | 49 | .body-copy { 50 | color: $body-copy; 51 | } 52 | 53 | .brown-grey { 54 | color: $brown-grey; 55 | } 56 | 57 | .dark-grey { 58 | color: $dark-grey; 59 | } 60 | 61 | .light-grey { 62 | color: $light-grey; 63 | } 64 | 65 | .sand-grey { 66 | color: $sand-grey; 67 | } 68 | 69 | .black-background { 70 | background-color: $black; 71 | } 72 | 73 | .white-background { 74 | background-color: $white; 75 | } 76 | 77 | .gunmetal-grey-background { 78 | background-color: $gunmetal-grey; 79 | } 80 | 81 | .body-copy-background { 82 | background-color: $body-copy; 83 | } 84 | 85 | .brown-grey-background { 86 | background-color: $brown-grey; 87 | } 88 | 89 | .dark-grey-background { 90 | background-color: $dark-grey; 91 | } 92 | 93 | .light-grey-background { 94 | background-color: $light-grey; 95 | } 96 | 97 | .sand-grey-background { 98 | background-color: $sand-grey; 99 | } 100 | -------------------------------------------------------------------------------- /sass/input-search-sticky.scss: -------------------------------------------------------------------------------- 1 | // Input Search Sticky 2 | // 3 | // Input Search for sticky header, using javascript you can apply any time the ' .input-sticky-wrapper--expanded' modifier class to make it expanded with animation 4 | // 5 | // Markup: html/input-search-sticky.html 6 | // 7 | // .input-sticky-wrapper--expanded - expanded input 8 | // 9 | // Styleguide Molecules.Input Search Sticky 10 | 11 | .input-sticky-wrapper { 12 | display: inline-flex; 13 | position: relative; 14 | width: 40px; 15 | max-width: 389px; 16 | overflow: hidden; 17 | transition: $transition-duration-quick ease; 18 | transition-property: width; 19 | 20 | &:hover { 21 | &::before { 22 | @include phone-up { 23 | opacity: 0.5; 24 | } 25 | } 26 | } 27 | 28 | &::before { 29 | @extend %icon-search; 30 | 31 | position: absolute; 32 | top: 12px; 33 | left: 12px; 34 | transition: opacity $transition-duration ease; 35 | color: $white; 36 | 37 | @include icon(18px); 38 | } 39 | 40 | .input-search-sticky { 41 | width: 100%; 42 | padding: 10px 0px 12px 43px; 43 | transition: opacity $transition-duration ease; 44 | border: 0; 45 | border-bottom: 2px solid transparent; 46 | border-radius: 0; 47 | outline: none; 48 | opacity: 0; 49 | background-color: transparent; 50 | color: $white; 51 | 52 | @include font-size(18px); 53 | 54 | font-stretch: normal; 55 | font-style: normal; 56 | font-weight: 600; 57 | line-height: normal; 58 | 59 | @include placeholder { 60 | opacity: 0.6; 61 | color: $white; 62 | 63 | @include font-size(20px); 64 | 65 | font-style: normal; 66 | font-weight: 300; 67 | } 68 | } 69 | 70 | &.input-sticky-wrapper--expanded { 71 | width: 100%; 72 | transition: $transition-duration ease; 73 | transition-property: width; 74 | 75 | &:hover { 76 | &::before { 77 | opacity: 1; 78 | } 79 | } 80 | 81 | .input-search-sticky { 82 | padding-right: 40px; 83 | transition: opacity $transition-duration ease; 84 | border-bottom-color: $white; 85 | opacity: 1; 86 | } 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /sass/html/tree-menu.html: -------------------------------------------------------------------------------- 1 |
2 |

Preview

3 |

Preview 2

4 |

Introduction

5 | 10 |

Seeds, Private Keys & Accounts

11 | 16 |

Transactions

17 | 24 |

IOTA Networks

25 | 36 |
-------------------------------------------------------------------------------- /sass/message-box.scss: -------------------------------------------------------------------------------- 1 | // Message Box 2 | // 3 | // Markup: html/message-box.html 4 | // 5 | // Styleguide Molecules.Message Box 6 | 7 | .message-box { 8 | display: flex; 9 | flex-direction: row; 10 | padding: 25px 20px; 11 | border: 1px solid $black; 12 | border-radius: 6px; 13 | background: #060606; 14 | 15 | .message-box--icon { 16 | flex: 0 0 35px; 17 | line-height: 1; 18 | 19 | &::before { 20 | @extend %icon-success; 21 | 22 | @include icon(22px); 23 | } 24 | } 25 | 26 | .message-box--text { 27 | display: flex; 28 | flex-direction: column; 29 | 30 | .message-box--title { 31 | flex: 1; 32 | margin-top: 3px; 33 | 34 | @include font-size(16.8px); 35 | 36 | color: $black; 37 | font-weight: 600; 38 | line-height: 1; 39 | } 40 | 41 | .message-box--title + .message-box--content { 42 | margin-top: 16px; 43 | } 44 | 45 | .message-box--content { 46 | flex: 1; 47 | 48 | @include font-size(16.8px); 49 | 50 | font-weight: normal; 51 | line-height: 1.5; 52 | } 53 | } 54 | 55 | &.message-box__success { 56 | border-color: $success; 57 | background: #f4fbf6; 58 | 59 | .message-box--icon { 60 | &::before { 61 | @extend %icon-success; 62 | 63 | color: $success; 64 | } 65 | } 66 | } 67 | 68 | &.message-box__danger { 69 | border-color: $danger; 70 | background: #fdf5f6; 71 | 72 | .message-box--icon { 73 | &::before { 74 | @extend %icon-danger; 75 | 76 | color: $danger; 77 | } 78 | } 79 | } 80 | 81 | &.message-box__warning { 82 | border-color: $warning; 83 | background: #fffcf3; 84 | 85 | .message-box--icon { 86 | &::before { 87 | @extend %icon-warning; 88 | 89 | color: $warning; 90 | } 91 | } 92 | } 93 | 94 | &.message-box__info { 95 | border-color: $info; 96 | background: #f3fafb; 97 | 98 | .message-box--icon { 99 | &::before { 100 | @extend %icon-info; 101 | 102 | color: $info; 103 | } 104 | } 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /sass/html/message-box.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
Success macro example
5 |
6 | This is text rendered inside the macro, of particular interest or importance to the user. It can flow on many 7 | lines. 8 |
9 |
10 |
11 | 12 |
13 | 14 |
15 |
16 |
17 |
Danger macro example
18 |
19 | This is text rendered inside the macro, of particular interest or importance to the user. It can flow on many 20 | lines. 21 |
22 |
23 |
24 | 25 |
26 | 27 |
28 |
29 |
30 |
Warning macro example
31 |
32 | This is text rendered inside the macro, of particular interest or importance to the user. It can flow on many 33 | lines. 34 |
35 |
36 |
37 | 38 |
39 | 40 |
41 |
42 |
43 |
Info macro example
44 |
45 | This is text rendered inside the macro, of particular interest or importance to the user. It can flow on many 46 | lines. 47 |
48 |
49 |
50 | 51 |
52 | 53 |
54 |
55 |
56 |
57 | This box has no title. 58 |
59 |
60 |
61 | 62 |
63 | 64 |
65 |
66 |
67 |
This has no content
68 |
69 |
70 | -------------------------------------------------------------------------------- /sass/table-of-contents.scss: -------------------------------------------------------------------------------- 1 | // Table Of Contents 2 | // 3 | // Markup: html/table-of-contents.html 4 | // 5 | // Styleguide Molecules.Table Of Contents 6 | 7 | .table-of-contents { 8 | .table-of-contents__section-title { 9 | margin: 0; 10 | padding-bottom: 8px; 11 | 12 | @include font-size(15px); 13 | 14 | color: #3e3e3e; 15 | font-stretch: normal; 16 | font-style: normal; 17 | font-weight: 600; 18 | line-height: 1.5; 19 | text-transform: uppercase; 20 | } 21 | 22 | .table-of-contents__section { 23 | margin: 0; 24 | padding: 0; 25 | list-style-type: none; 26 | 27 | .table-of-contents-list-item { 28 | padding: 0px 8px 7px 8px; 29 | line-height: 1.3; 30 | 31 | &.table-of-contents-list-item__sub { 32 | padding-left: 16px; 33 | } 34 | 35 | &.table-of-contents-list-item__selected { 36 | a { 37 | color: $jade; 38 | font-weight: bold; 39 | } 40 | } 41 | 42 | a { 43 | color: #3e3e3e; 44 | 45 | @include font-size(15px); 46 | 47 | font-stretch: normal; 48 | font-style: normal; 49 | font-weight: 300; 50 | letter-spacing: normal; 51 | text-decoration: underline; 52 | 53 | @include desktop { 54 | text-decoration: none; 55 | } 56 | 57 | &:hover { 58 | text-decoration: underline; 59 | } 60 | } 61 | } 62 | } 63 | 64 | &.table-of-contents__compact { 65 | .table-of-contents__section-title { 66 | padding: 10px 18px 10px 18px; 67 | 68 | @include font-size(14px); 69 | 70 | background-color: #ededed; 71 | color: $gunmetal-grey; 72 | } 73 | 74 | .table-of-contents__section { 75 | .table-of-contents-list-item { 76 | padding: 10px 18px 10px 18px; 77 | border-top: 1px solid #ededed; 78 | border-right: 1px solid #ededed; 79 | border-left: 1px solid #ededed; 80 | 81 | a { 82 | color: #373e46; 83 | 84 | @include font-size(17px); 85 | 86 | font-weight: 600; 87 | text-decoration: underline; 88 | } 89 | } 90 | 91 | &:last-child { 92 | border-bottom: 1px solid #ededed; 93 | } 94 | } 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /sass/html/header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
7 | 14 |
15 | 16 |
17 |
18 |
19 | Developer Documentation 20 |
21 |
22 | 23 | 27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | 37 |
38 |
39 | 46 |
47 | 48 |
49 |
50 |
51 | Developer Documentation 52 |
53 |
54 |
55 | -------------------------------------------------------------------------------- /sass/qr-reader.scss: -------------------------------------------------------------------------------- 1 | // QR Reader 2 | // 3 | // QR Reader styles. 4 | // 5 | // Markup: html/qr-reader.html 6 | // 7 | // Styleguide Organisms.QRReader 8 | 9 | .qr-reader { 10 | &.qr-reader__fill { 11 | display: flex; 12 | 13 | @include phone-down { 14 | display: block; 15 | } 16 | 17 | position: fixed; 18 | z-index: 1; 19 | top: 0; 20 | right: 0; 21 | bottom: 0; 22 | left: 0; 23 | 24 | .qr-reader-overlay { 25 | position: fixed; 26 | top: 0; 27 | right: 0; 28 | bottom: 0; 29 | left: 0; 30 | opacity: 0.95; 31 | background: $white; 32 | 33 | @include phone-down { 34 | opacity: 1; 35 | } 36 | } 37 | } 38 | 39 | &.qr-reader__inline { 40 | background: $white; 41 | 42 | .qr-reader-close { 43 | display: none; 44 | } 45 | } 46 | 47 | .qr-reader-content { 48 | position: relative; 49 | margin: auto; 50 | padding: 30px; 51 | border: 1px solid $light-grey; 52 | border-radius: 5px; 53 | background: $white; 54 | 55 | @include phone-down { 56 | padding: 10px; 57 | border: 0; 58 | } 59 | 60 | h1 { 61 | margin-bottom: 10px; 62 | } 63 | 64 | .qr-reader-close { 65 | position: absolute; 66 | top: 30px; 67 | right: 30px; 68 | border: 0; 69 | opacity: 1; 70 | background: none; 71 | color: $black; 72 | 73 | @include phone-down { 74 | top: 18px; 75 | right: 10px; 76 | } 77 | 78 | @include font-size(20px); 79 | 80 | font-weight: 600; 81 | cursor: pointer; 82 | 83 | &:focus { 84 | outline: none; 85 | } 86 | 87 | &:hover { 88 | opacity: 0.5; 89 | } 90 | 91 | &.icon-cross { 92 | &::after { 93 | @include font-size(20px); 94 | 95 | font-weight: 600; 96 | } 97 | } 98 | } 99 | 100 | .qr-reader-scan { 101 | margin: 10px 0px 10px 0px; 102 | 103 | @include phone-down { 104 | max-width: none; 105 | } 106 | 107 | section { 108 | div { 109 | border: 8px solid $tealish !important; 110 | box-shadow: none !important; 111 | } 112 | } 113 | } 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /sass/tree-menu.scss: -------------------------------------------------------------------------------- 1 | // Tree Menu 2 | // 3 | // Home page card styles. 4 | // 5 | // Markup: html/tree-menu.html 6 | // 7 | // Styleguide Molecules.Tree Menu 8 | 9 | .tree-menu { 10 | padding: 0 18px; 11 | 12 | .tree-menu__section-title { 13 | margin: 0; 14 | padding-bottom: 6px; 15 | color: $body-copy; 16 | 17 | @include font-size(14px); 18 | 19 | font-stretch: normal; 20 | font-style: normal; 21 | font-weight: 600; 22 | line-height: 1.5; 23 | text-transform: uppercase; 24 | 25 | a { 26 | color: inherit; 27 | font-size: inherit; 28 | font-stretch: inherit; 29 | font-style: inherit; 30 | font-weight: inherit; 31 | line-height: inherit; 32 | } 33 | } 34 | 35 | .tree-menu__section { 36 | margin-top: 5px; 37 | margin-bottom: 10px; 38 | padding: 0px 0px 5px 0px; 39 | list-style-type: none; 40 | 41 | .tree-menu__section-item { 42 | margin-bottom: 7px; 43 | line-height: 1.3; 44 | 45 | &.tree-menu__section-item--selected { 46 | a { 47 | color: $tealish; 48 | font-weight: 600; 49 | } 50 | } 51 | 52 | .tree-menu__section-item-superscript { 53 | @include font-size(10px); 54 | 55 | margin-left: 5px; 56 | } 57 | 58 | a { 59 | display: flex; 60 | color: $body-copy; 61 | 62 | @include font-size(15px); 63 | 64 | font-stretch: normal; 65 | font-style: normal; 66 | font-weight: 300; 67 | letter-spacing: normal; 68 | text-decoration: underline; 69 | 70 | @include desktop { 71 | text-decoration: none; 72 | } 73 | 74 | &:hover { 75 | text-decoration: underline; 76 | } 77 | } 78 | 79 | .tree-menu__section-item-sub { 80 | padding: 10px 0px 3px 14px; 81 | list-style-type: none; 82 | 83 | li { 84 | margin-bottom: 6px; 85 | line-height: 1; 86 | } 87 | 88 | .tree-menu__section-item-sub-child { 89 | a { 90 | color: $body-copy; 91 | font-weight: normal; 92 | } 93 | 94 | &.tree-menu__section-item-sub-child--selected { 95 | a { 96 | color: $tealish; 97 | font-weight: 600; 98 | } 99 | } 100 | } 101 | } 102 | } 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /sass/text.scss: -------------------------------------------------------------------------------- 1 | // Text 2 | // 3 | // Various text styles. 4 | // 5 | // Markup: html/text.html 6 | // 7 | // .text--level1 - Level 1. 8 | // .text--level2 - Level 2. 9 | // .text--level3 - Level 3. 10 | // .text--level4 - Level 4. 11 | // .text--level5 - Level 5. 12 | // .text--level6 - Level 6. 13 | // .text--primary - primary color. 14 | // .text--secondary - secondary color. 15 | // .text--tertiary - tertiary color. 16 | // .text--warning - warning color. 17 | // .text--danger - danger color. 18 | // .text--success - success color. 19 | // .text--info - info color. 20 | // .text--primary .text--level3 - Combined primary and level3 21 | // .text--secondary .text--level3 - Combined secondary and level3 22 | // .text--tertiary .text--level3 - Combined tertiary and level 3 23 | // 24 | // Styleguide Atoms.Text 25 | 26 | .text { 27 | color: $dark-grey; 28 | font-stretch: normal; 29 | font-style: normal; 30 | } 31 | 32 | h1, 33 | .text--level1 { 34 | margin: 0px 0px 48px 0px; 35 | @include font-size(32px); 36 | font-weight: bold; 37 | line-height: 1.2; 38 | } 39 | 40 | h2, 41 | .text--level2 { 42 | @include font-size(24px); 43 | margin: 2rem 0 1rem; 44 | font-weight: bold; 45 | line-height: 1.5; 46 | 47 | @include tablet-up { 48 | margin: 2.75rem 0 1rem; 49 | } 50 | } 51 | 52 | h3, 53 | .text--level3 { 54 | @include font-size(21px); 55 | margin: 1.25rem 0 0.5rem; 56 | font-weight: bold; 57 | line-height: 1.5; 58 | 59 | @include tablet-up { 60 | margin: 2rem 0 1rem; 61 | } 62 | } 63 | 64 | h4, 65 | .text--level4 { 66 | @include font-size(20px); 67 | margin: 0.75rem 0 0.25rem; 68 | font-weight: bold; 69 | line-height: 2.4; 70 | 71 | @include tablet-up { 72 | margin: 1.75rem 0 0.5rem; 73 | } 74 | } 75 | 76 | h5, 77 | .text--level5 { 78 | @include font-size(18px); 79 | font-weight: normal; 80 | line-height: 2.67; 81 | } 82 | 83 | h6, 84 | .text--level6 { 85 | @include font-size(17px); 86 | font-weight: bold; 87 | line-height: 2.82; 88 | } 89 | 90 | .text--primary { 91 | color: $blueberry; 92 | } 93 | 94 | .text--secondary { 95 | color: $white; 96 | } 97 | 98 | .text--tertiary { 99 | color: $tealish; 100 | } 101 | 102 | .text--warning { 103 | color: $warning; 104 | } 105 | 106 | .text--danger { 107 | color: $danger; 108 | } 109 | 110 | .text--success { 111 | color: $success; 112 | } 113 | 114 | .text--info { 115 | color: $info; 116 | } 117 | -------------------------------------------------------------------------------- /sass/drop-selector.scss: -------------------------------------------------------------------------------- 1 | // Drop Selector 2 | // 3 | // Markup: html/drop-selector.html 4 | // 5 | // Styleguide Atoms.Drop Selector 6 | 7 | .drop-selector { 8 | position: relative; 9 | 10 | .drop-selector-title { 11 | display: flex; 12 | position: relative; 13 | top: 1px; 14 | align-items: center; 15 | justify-content: space-between; 16 | height: 50px; 17 | padding-right: 18px; 18 | padding-left: 18px; 19 | border-bottom: 2px solid $tealish; 20 | background-color: #fafafa; 21 | cursor: pointer; 22 | 23 | .drop-selector-title__text { 24 | @include font-size(18px); 25 | 26 | color: $jade; 27 | font-weight: bold; 28 | line-height: 1; 29 | } 30 | 31 | .drop-selector-title__icon { 32 | &::before { 33 | @extend %icon-up-down; 34 | 35 | position: relative; 36 | top: 1px; 37 | color: $jade; 38 | 39 | @include icon(11px); 40 | } 41 | } 42 | } 43 | 44 | .drop-selector-list { 45 | position: absolute; 46 | width: 100%; 47 | max-height: 0; 48 | margin: 1px 0px 0px 0px; 49 | padding: 0; 50 | overflow: hidden; 51 | transition: $transition-duration ease-out; 52 | transition-property: max-height; 53 | border: 1px solid #ededed; 54 | border-top-width: 0px; 55 | border-bottom-width: 0px; 56 | background-color: $white; 57 | list-style: none; 58 | 59 | .drop-selector-list-item { 60 | a { 61 | display: block; 62 | padding-right: 18px; 63 | padding-left: 18px; 64 | 65 | @include font-size(17px); 66 | 67 | color: #373e46; 68 | font-weight: 600; 69 | line-height: 2.5; 70 | text-decoration: none; 71 | 72 | &:hover { 73 | text-decoration: underline; 74 | } 75 | } 76 | 77 | &:hover, 78 | &.drop-selector-list-item__selected { 79 | background-color: #fafafa; 80 | 81 | a { 82 | color: $jade; 83 | font-weight: bold; 84 | } 85 | } 86 | } 87 | 88 | .drop-selector-list-item + .drop-selector-list-item { 89 | border-top: 1px solid #ededed; 90 | } 91 | } 92 | 93 | &.drop-selector__expanded { 94 | .drop-selector-list { 95 | height: auto; 96 | max-height: 1000px; 97 | transition: $transition-duration ease-in; 98 | transition-property: max-height; 99 | border-bottom-width: 1px; 100 | } 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /sass/html/forms.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 |
6 |
7 | 8 | 9 |
10 |
11 | 12 | 13 |
14 |
15 | 16 | This is some content 17 |
18 |
19 | 20 | This is some content 21 |
22 |
23 | 24 |
25 | 30 |
31 |
32 |
33 | 34 |
35 | 40 |
41 |
42 |
43 | 44 |
45 |
46 |
47 | 48 |
49 | 50 |
51 |
52 |
53 | 54 |
55 | 56 |
57 | 58 |
59 |
60 | 61 |
62 | 63 |
64 |
65 |
66 | 67 |
68 | 69 |
70 |
71 |
72 |
73 | 74 |
75 |
-------------------------------------------------------------------------------- /sass/tabs.scss: -------------------------------------------------------------------------------- 1 | // Tabs 2 | // 3 | // Markup: html/tabs.html 4 | // 5 | // Styleguide Molecules.Tabs 6 | 7 | .tabs { 8 | display: flex; 9 | flex-direction: column; 10 | align-items: stretch; 11 | border: 1px solid #ececec; 12 | border-radius: 0px 0px 5px 5px; 13 | background-color: #f8f8f8; 14 | 15 | .tab-header { 16 | display: flex; 17 | flex-direction: row; 18 | align-items: center; 19 | justify-content: space-between; 20 | padding: 8px 12px 8px 12px; 21 | background-color: $gunmetal-grey; 22 | 23 | .tab-header-list { 24 | display: inline-flex; 25 | flex-direction: row; 26 | flex-wrap: wrap; 27 | align-items: center; 28 | margin: 0; 29 | padding: 0; 30 | list-style: none; 31 | 32 | .tab-header-item { 33 | margin: 0px 12px 0px 12px; 34 | 35 | a { 36 | opacity: 0.5; 37 | color: $white; 38 | 39 | @include font-size(17px); 40 | 41 | font-weight: normal; 42 | text-decoration: underline; 43 | 44 | &:hover { 45 | opacity: 1; 46 | text-decoration: underline; 47 | } 48 | 49 | @include desktop { 50 | text-decoration: none; 51 | } 52 | } 53 | 54 | &.tab-header-item--selected { 55 | a { 56 | opacity: 1; 57 | font-weight: bold; 58 | } 59 | } 60 | } 61 | } 62 | 63 | .tab-header-copy { 64 | display: flex; 65 | align-items: center; 66 | padding: 0px 12px; 67 | 68 | .tab-header-copy-text { 69 | width: 55px; 70 | transition: $transition-duration ease-out; 71 | transition-property: opacity; 72 | opacity: 0; 73 | color: $tealish; 74 | text-align: right; 75 | } 76 | 77 | .tab-header-copy-text--active { 78 | opacity: 1; 79 | } 80 | 81 | .tab-header-copy-text--failed { 82 | color: $danger; 83 | } 84 | 85 | .tab-header-copy-button { 86 | margin-left: 8px; 87 | padding: 2px 4px 0; 88 | border: 0; 89 | opacity: 0.5; 90 | background: none; 91 | color: $white; 92 | font-size: 18px; 93 | cursor: pointer; 94 | 95 | &:focus { 96 | outline: none; 97 | } 98 | 99 | &::after { 100 | @include font-size(18px); 101 | } 102 | 103 | &:hover { 104 | opacity: 1; 105 | } 106 | } 107 | } 108 | } 109 | 110 | .tab-item { 111 | display: none; 112 | } 113 | 114 | .tab-item--selected { 115 | display: block; 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /sass/layouts.scss: -------------------------------------------------------------------------------- 1 | // Layouts 2 | // 3 | // Various layout styles. 4 | // 5 | // Markup: html/layouts.html 6 | // 7 | // Styleguide Atoms.Layouts 8 | 9 | .layouts--home, 10 | .layouts--2-column { 11 | display: flex; 12 | max-width: $max-width; 13 | margin: 0 auto; 14 | 15 | .left-column { 16 | flex: 0 0 250px; 17 | padding-right: 40px; 18 | padding-left: 40px; 19 | } 20 | 21 | .right-column { 22 | flex: 1; 23 | max-width: $max-width; 24 | margin: auto; 25 | padding-right: 40px; 26 | padding-left: 40px; 27 | } 28 | 29 | @include tablet-down { 30 | .left-column { 31 | display: none; 32 | } 33 | 34 | .right-column { 35 | padding-right: 16px; 36 | padding-left: 16px; 37 | } 38 | } 39 | } 40 | 41 | .layouts--doc, 42 | .layouts--3-column { 43 | display: flex; 44 | justify-content: space-between; 45 | max-width: $max-width; 46 | margin: 0 auto; 47 | 48 | .left-column { 49 | flex: 0 0 300px; 50 | padding: 70px 0px 120px 40px; 51 | } 52 | 53 | .middle-column { 54 | flex: 1; 55 | max-width: 720px; 56 | min-height: 500px; 57 | padding: 70px 55px 120px 45px; 58 | overflow: hidden; 59 | } 60 | 61 | .middle-toc { 62 | display: none; 63 | } 64 | 65 | .right-column { 66 | flex: 0 0 300px; 67 | padding: 70px 40px 120px 0; 68 | } 69 | 70 | @include desktop-narrow-down { 71 | .left-column { 72 | display: none; 73 | } 74 | } 75 | 76 | @include desktop-down { 77 | justify-content: center; 78 | 79 | .left-column { 80 | display: none; 81 | } 82 | 83 | .middle-column { 84 | min-height: unset; 85 | padding: 35px 16px 60px 16px; 86 | } 87 | 88 | .right-column { 89 | display: none; 90 | } 91 | 92 | .middle-toc { 93 | display: block; 94 | margin-bottom: 30px; 95 | } 96 | } 97 | } 98 | 99 | .layouts--search, 100 | .layouts--1-column { 101 | display: flex; 102 | justify-content: space-around; 103 | 104 | .middle-column { 105 | flex: 1; 106 | max-width: 820px; 107 | padding: 72px 60px 72px 60px; 108 | 109 | @include desktop-down { 110 | padding: 72px 16px 72px 16px; 111 | } 112 | } 113 | } 114 | 115 | .layouts--app-single { 116 | display: flex; 117 | flex-direction: column; 118 | align-items: center; 119 | 120 | .column { 121 | display: flex; 122 | flex-direction: column; 123 | align-items: flex-start; 124 | width: 100%; 125 | max-width: $max-width; 126 | min-height: 50vh; 127 | 128 | @include phone-down { 129 | min-height: auto; 130 | } 131 | 132 | h1 { 133 | &:first-of-type { 134 | margin-bottom: 20px; 135 | } 136 | } 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /sass/project-topics.scss: -------------------------------------------------------------------------------- 1 | // Project Topics 2 | // 3 | // Please ignore the inline CSS its just for fixing the layout! 4 | // 5 | // Markup: html/project-topics.html 6 | // 7 | // Styleguide Molecules.ProjectTopics 8 | 9 | .project__wrapper { 10 | display: flex; 11 | flex-direction: column; 12 | width: 100%; 13 | 14 | @include tablet-up { 15 | margin-bottom: 100px; 16 | } 17 | } 18 | 19 | .project { 20 | display: flex; 21 | flex-direction: column; 22 | align-items: flex-start; 23 | padding: 45px 0 10px; 24 | border-bottom: 3px solid $sand-grey; 25 | 26 | &:last-child { 27 | border-bottom: 0; 28 | } 29 | } 30 | 31 | .project__heading { 32 | margin: 0; 33 | color: $tealish; 34 | } 35 | 36 | .project__subheading { 37 | margin-top: 5px; 38 | margin-bottom: 32px; 39 | line-height: 2; 40 | } 41 | 42 | .project-topics { 43 | display: flex; 44 | flex-direction: row; 45 | flex-wrap: wrap; 46 | justify-content: space-between; 47 | width: 100%; 48 | 49 | &::after { 50 | content: ' '; 51 | flex: auto; 52 | } 53 | 54 | .project-topic__item { 55 | display: flex; 56 | flex-direction: column; 57 | align-items: flex-start; 58 | width: 100%; 59 | padding: 0px 20px 18px 0px; 60 | 61 | @mixin tablet-up { 62 | padding: 0 0 25px 0; 63 | } 64 | 65 | @include tablet { 66 | width: 50%; 67 | } 68 | 69 | @include desktop { 70 | width: calc(33.33% - 14px); 71 | 72 | &:nth-child(3n+2) { 73 | margin: 0 21px; 74 | } 75 | } 76 | 77 | .project-topic__heading { 78 | color: $gunmetal-grey; 79 | font-weight: 600; 80 | line-height: 2; 81 | 82 | &.project-topic__primary-bullet, 83 | &.project-topic__secondary-bullet { 84 | &::before { 85 | content: ' '; 86 | display: inline-block; 87 | position: relative; 88 | top: -2px; 89 | width: 8px; 90 | height: 8px; 91 | margin-right: 10px; 92 | background: $blueberry; 93 | } 94 | } 95 | 96 | &.project-topic__secondary-bullet { 97 | &::before { 98 | background: $tealish; 99 | } 100 | } 101 | } 102 | 103 | .project-topic__subheading { 104 | padding-right: 36px; 105 | font-weight: 300; 106 | line-height: 30px; 107 | } 108 | } 109 | } 110 | 111 | .project-topics__compressed { 112 | margin-bottom: 36px; 113 | padding-bottom: 6px; 114 | border-bottom: 3px solid $sand-grey; 115 | 116 | .project-topic__item { 117 | flex: 1 0 calc(50% - 30px); 118 | max-width: 50%; 119 | padding-bottom: 12px; 120 | 121 | &:nth-child(3n+2) { 122 | margin: 0; 123 | } 124 | 125 | @include phone-down { 126 | flex: 1 0 calc(100%); 127 | max-width: 100%; 128 | } 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /sass/version-picker.scss: -------------------------------------------------------------------------------- 1 | // Version Picker 2 | // 3 | // Markup: html/version-picker.html 4 | // 5 | // Styleguide Molecules.Version Picker 6 | 7 | .version-picker__wrapper { 8 | display: flex; 9 | justify-content: center; 10 | width: 100%; 11 | border-bottom: 1px solid #e6e6e6; 12 | background-color: $white; 13 | 14 | .version-picker { 15 | display: flex; 16 | flex-direction: row; 17 | align-items: center; 18 | width: 100%; 19 | max-width: $max-width; 20 | 21 | .left-column { 22 | flex: 0 0 280px; 23 | } 24 | 25 | .middle-column { 26 | flex: 1; 27 | padding: 0px 10px 0px 10px; 28 | } 29 | 30 | .right-column { 31 | flex: 0 0 300px; 32 | } 33 | 34 | @media (max-width: 1180px) { 35 | .left-column { 36 | display: none; 37 | } 38 | } 39 | 40 | @include tablet-down { 41 | flex-direction: column-reverse; 42 | flex-wrap: wrap-reverse; 43 | align-items: stretch; 44 | 45 | .right-column { 46 | flex: 1; 47 | } 48 | } 49 | } 50 | } 51 | 52 | .version-picker__current { 53 | color: $gunmetal-grey; 54 | 55 | @include font-size(16px); 56 | 57 | font-weight: 600; 58 | text-align: center; 59 | 60 | @include tablet-down { 61 | padding: 20px; 62 | } 63 | } 64 | 65 | .version-picker-select__wrapper { 66 | position: relative; 67 | width: 100%; 68 | border: 0; 69 | border-right: 1px solid #e6e6e6; 70 | border-bottom: 2px solid $jade; 71 | border-left: 1px solid #e6e6e6; 72 | background-color: #fafafa; 73 | line-height: 1.5; 74 | 75 | &::after { 76 | @extend %icon-up-down; 77 | 78 | position: absolute; 79 | top: calc(50% - 9px); 80 | right: 25px; 81 | color: $jade; 82 | 83 | @include icon(18px); 84 | 85 | pointer-events: none; 86 | } 87 | 88 | @include phone-down { 89 | max-width: unset; 90 | } 91 | } 92 | 93 | .version-picker__select { 94 | width: 100%; 95 | max-width: none; 96 | height: 50px; 97 | padding-right: 55px; 98 | padding-left: 20px; 99 | overflow: hidden; 100 | border: 0; 101 | outline: none; 102 | background: none; 103 | color: $jade; 104 | 105 | @include font-size(17px); 106 | 107 | font-weight: bold; 108 | text-overflow: ellipsis; 109 | white-space: nowrap; 110 | cursor: pointer; 111 | 112 | // sass-lint:disable no-property-vendor-prefix 113 | -webkit-appearance: none; 114 | -moz-appearance: none; 115 | appearance: none; 116 | 117 | option { 118 | color: $black; 119 | 120 | @include font-size(16px); 121 | } 122 | 123 | optgroup { 124 | color: $gunmetal-grey; 125 | 126 | @include font-size(16px); 127 | } 128 | 129 | // Remove the down arrow on Edge 130 | &::-ms-expand { 131 | display: none; 132 | } 133 | 134 | // Remove the focus rect on Firefox 135 | &:-moz-focusring { 136 | color: transparent; 137 | text-shadow: 0 0 0 $white; 138 | } 139 | 140 | &:-moz-focusring * { 141 | color: $black; 142 | text-shadow: none; 143 | } 144 | } 145 | -------------------------------------------------------------------------------- /sass/file-upload.scss: -------------------------------------------------------------------------------- 1 | // FileUpload 2 | // 3 | // Various button styles. 4 | // 5 | // Markup: html/file-upload.html 6 | // 7 | // .file-upload--selected - When a file is selected. 8 | // 9 | // Styleguide Molecules.FileUpload 10 | @mixin bold-text { 11 | display: flex; 12 | justify-content: center; 13 | padding: 21px; 14 | 15 | @include font-size(19px); 16 | 17 | color: $black; 18 | font-style: normal; 19 | font-weight: bold; 20 | } 21 | 22 | .file-upload { 23 | display: flex; 24 | flex-direction: column; 25 | padding: 57px 32px; 26 | transition: $transition-duration ease; 27 | transition-property: color, background-color, border-color; 28 | border: 2px dashed $light-grey; 29 | border-radius: 10px; 30 | background-color: $sand-grey; 31 | color: $black; 32 | 33 | @include font-size(14.5px); 34 | 35 | font-weight: bold; 36 | line-height: 1.5; 37 | text-decoration: none; 38 | 39 | .file-upload__icon { 40 | display: flex; 41 | justify-content: center; 42 | 43 | &.icon-file-upload { 44 | &::after { 45 | @extend %icon-file-upload; 46 | 47 | @include icon(44px); 48 | 49 | color: $brown-grey; 50 | } 51 | } 52 | } 53 | 54 | .file-upload__text { 55 | @include bold-text; 56 | } 57 | 58 | .file-upload__text-filename { 59 | display: none; 60 | } 61 | 62 | &.file-upload--selected { 63 | flex-direction: row; 64 | padding: 5px 32px; 65 | border: 2px solid $success; 66 | background-color: $white; 67 | 68 | .file-upload__text { 69 | margin-top: 0; 70 | margin-left: 20px; 71 | } 72 | 73 | .file-upload__text-filename { 74 | @include bold-text; 75 | 76 | flex-grow: 2; 77 | margin-top: 0; 78 | } 79 | 80 | .file-upload__icon { 81 | display: flex; 82 | justify-content: center; 83 | margin-top: 0; 84 | 85 | &.icon-file-upload { 86 | margin-top: 0; 87 | 88 | &::after { 89 | @extend %icon-success; 90 | 91 | @include icon(44px); 92 | 93 | margin-top: 0; 94 | color: $success; 95 | } 96 | } 97 | } 98 | } 99 | 100 | &.file-upload--removable { 101 | flex-direction: row; 102 | align-items: flex-end; 103 | padding: 5px 32px; 104 | 105 | .file-upload__text { 106 | margin-top: 0; 107 | margin-left: 20px; 108 | padding: 0; 109 | } 110 | 111 | .file-upload__text-filename { 112 | display: none; 113 | 114 | @include bold-text; 115 | 116 | flex-grow: 2; 117 | margin-top: 0; 118 | padding: 0; 119 | } 120 | 121 | .file-upload__icon { 122 | display: flex; 123 | justify-content: center; 124 | margin-top: 0; 125 | 126 | &.icon-file-upload { 127 | margin-top: 0; 128 | 129 | &::after { 130 | @extend %icon-file-upload; 131 | 132 | @include icon(38px); 133 | 134 | margin-top: 0; 135 | color: $brown-grey; 136 | } 137 | } 138 | } 139 | } 140 | } 141 | -------------------------------------------------------------------------------- /sass/html/side-menu.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | Navigation 4 | 5 |

6 |
7 |
8 | Heading 1 9 |
10 |
11 |
12 | 17 |
18 |
19 |
20 |
21 |
22 | Heading 2 23 |
24 |
25 |
26 |
Introduction
27 | 38 |
39 |
40 |
41 |
42 |
43 | Heading 3 44 |
45 |
46 |
47 | 52 |
53 |
54 |
55 |
56 |
57 | Heading 4 58 |
59 |
60 |
61 | 66 |
67 |
68 |
69 |
-------------------------------------------------------------------------------- /sass/sticky-header.scss: -------------------------------------------------------------------------------- 1 | // Sticky Header 2 | // 3 | // This is the home page header. 4 | // 5 | // Markup: html/sticky-header.html 6 | // 7 | // Styleguide Organisms.Sticky Header 8 | 9 | .sticky-header { 10 | display: flex; 11 | align-items: center; 12 | justify-content: space-between; 13 | height: 100px; 14 | padding: 0 40px; 15 | background: $hero-dark-gradient; 16 | 17 | > a { 18 | height: 56px; 19 | } 20 | 21 | @include tablet-down { 22 | height: 93px; 23 | padding: 15px 20px 15px 20px; 24 | } 25 | 26 | .sticky-header__brand { 27 | width: 183px; 28 | height: 56px; 29 | margin-right: 20px; 30 | transition: opacity $transition-duration ease; 31 | opacity: 1; 32 | 33 | @include phone-down { 34 | position: absolute; 35 | top: 18px; 36 | } 37 | } 38 | 39 | .sticky-header__control { 40 | display: flex; 41 | justify-content: flex-end; 42 | width: 100%; 43 | padding-top: 4px; 44 | 45 | .input-sticky-wrapper { 46 | &::before { 47 | top: calc(50% - 12px); 48 | left: 8px; 49 | 50 | @include font-size(24px); 51 | } 52 | 53 | .sticky-header__icon-close { 54 | position: absolute; 55 | top: 10px; 56 | right: 0px; 57 | transition: opacity $transition-duration ease; 58 | border: 0; 59 | opacity: 0; 60 | background: none; 61 | color: $white; 62 | cursor: pointer; 63 | 64 | &::before { 65 | @extend %icon-cross; 66 | 67 | @include icon(14px); 68 | 69 | line-height: 24px; 70 | } 71 | 72 | &:focus { 73 | outline: none; 74 | } 75 | 76 | &:disabled { 77 | cursor: default; 78 | pointer-events: none; 79 | } 80 | } 81 | } 82 | 83 | .sticky-header__icon-burger { 84 | margin: 0px 0px 2px 9px; 85 | transition: opacity $transition-duration ease; 86 | border: 0; 87 | background: none; 88 | color: $white; 89 | cursor: pointer; 90 | 91 | &::before { 92 | @extend %icon-burger; 93 | 94 | @include icon(24px); 95 | } 96 | 97 | &:focus { 98 | outline: none; 99 | } 100 | 101 | &:hover { 102 | @include phone-up { 103 | opacity: 0.5; 104 | } 105 | } 106 | 107 | &:disabled { 108 | cursor: default; 109 | pointer-events: none; 110 | } 111 | } 112 | } 113 | 114 | &.sticky-header--expanded { 115 | @include phone-down { 116 | .sticky-header__brand { 117 | margin-right: 0px; 118 | transition: opacity $transition-duration ease; 119 | opacity: 0; 120 | } 121 | } 122 | 123 | .sticky-header__control { 124 | .input-sticky-wrapper { 125 | .sticky-header__icon-close { 126 | opacity: 1; 127 | 128 | &:hover { 129 | @include phone-up { 130 | opacity: 0.5; 131 | } 132 | } 133 | } 134 | } 135 | } 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /sass/button.scss: -------------------------------------------------------------------------------- 1 | // Buttons 2 | // 3 | // Various button styles. 4 | // 5 | // Markup: html/button.html 6 | // 7 | // .button--primary - Primary color. 8 | // .button--primary:hover - Primary color in hover state. 9 | // .button--primary:focus - Primary color in focus state. 10 | // .button--primary:disabled - Primary color in disabled state. 11 | // .button--secondary - Secondary color. 12 | // .button--secondary:hover - Secondary color in hover state. 13 | // .button--secondary:focus - Secondary color in focus state. 14 | // .button--secondary:disabled - Secondary color in disabled state. 15 | // .button--tertiary - Tertiary color. 16 | // .button--tertiary:hover - Tertiary color in hover state. 17 | // .button--tertiary:focus - Tertiary color in focus state. 18 | // .button--tertiary:disabled - Tertiary color in disabled state. 19 | // .button--small - A small button. 20 | // .button--large - A large button. 21 | // 22 | // Styleguide Atoms.Button 23 | 24 | .button { 25 | display: inline-block; 26 | margin: 8px; 27 | padding: 16px 32px; 28 | transition: $transition-duration ease; 29 | transition-property: color, background-color, border-color; 30 | border: 2px solid $blueberry; 31 | border-radius: 5px; 32 | background-color: $blueberry; 33 | color: $white; 34 | @include font-size(14.5px); 35 | font-weight: bold; 36 | line-height: 1.5; 37 | text-decoration: none; 38 | text-transform: uppercase; 39 | 40 | &.button--long { 41 | @include word-break; 42 | } 43 | 44 | &:hover { 45 | &:not([disabled]) { 46 | border-color: darken($blueberry, 10%); 47 | background-color: darken($blueberry, 10%); 48 | text-decoration: none; 49 | cursor: pointer; 50 | } 51 | } 52 | 53 | &:focus { 54 | &:enabled { 55 | outline: none; 56 | } 57 | } 58 | 59 | &:disabled { 60 | opacity: 0.5; 61 | cursor: default; 62 | pointer-events: none; 63 | } 64 | } 65 | 66 | .button--small { 67 | padding: 8px 16px; 68 | @include font-size(12px); 69 | } 70 | 71 | .button--extra-small { 72 | padding: 4px 10px; 73 | @include font-size(10px); 74 | } 75 | 76 | .button--large { 77 | @include font-size(24px); 78 | } 79 | 80 | .button--primary { 81 | border-color: $blueberry; 82 | background-color: $blueberry; 83 | color: $white; 84 | 85 | &:hover { 86 | &:not([disabled]) { 87 | border-color: darken($blueberry, 10%); 88 | background-color: darken($blueberry, 10%); 89 | } 90 | } 91 | } 92 | 93 | .button--secondary { 94 | border-color: $blueberry; 95 | background-color: transparent; 96 | color: $blueberry; 97 | 98 | &:hover { 99 | &:not([disabled]) { 100 | border-color: darken($blueberry, 10%); 101 | background-color: transparent; 102 | } 103 | } 104 | } 105 | 106 | .button--tertiary { 107 | border-color: $white; 108 | background-color: transparent; 109 | color: $white; 110 | 111 | &:hover { 112 | &:not([disabled]) { 113 | border-color: $white; 114 | background-color: rgba(255, 255, 255, 0.2); 115 | } 116 | } 117 | } 118 | 119 | .button--no-case { 120 | text-transform: none; 121 | } 122 | -------------------------------------------------------------------------------- /sass/header.scss: -------------------------------------------------------------------------------- 1 | // Header 2 | // 3 | // This is the home page header. 4 | // 5 | // Markup: html/header.html 6 | // 7 | // Styleguide Organisms.Header 8 | 9 | .header { 10 | display: block; 11 | height: 100%; 12 | background: $hero-dark-gradient; 13 | 14 | .top-header { 15 | @include tablet-down { 16 | display: none; 17 | } 18 | } 19 | 20 | .header__wrapper { 21 | padding-bottom: 40px; 22 | 23 | .header__head { 24 | display: flex; 25 | justify-content: space-between; 26 | 27 | > div { 28 | display: flex; 29 | flex-direction: column; 30 | align-items: flex-end; 31 | } 32 | 33 | .header__brand { 34 | width: 183px; 35 | height: 56px; 36 | margin: 18px 20px 22px 20px; 37 | 38 | @include tablet-up { 39 | margin: 22px 40px; 40 | } 41 | } 42 | 43 | .header__icon { 44 | margin: 28px 16px 0 0; 45 | padding: 5px 10px; 46 | border: 0; 47 | background: none; 48 | color: $white; 49 | cursor: pointer; 50 | 51 | @include desktop { 52 | margin: 27px 36px 0 0; 53 | } 54 | 55 | &::before { 56 | @extend %icon-burger; 57 | 58 | @include icon(24px); 59 | } 60 | 61 | &:hover { 62 | opacity: 0.5; 63 | } 64 | 65 | &:focus { 66 | outline: none; 67 | } 68 | 69 | &:disabled { 70 | cursor: default; 71 | pointer-events: none; 72 | } 73 | } 74 | } 75 | 76 | .header__body { 77 | max-width: $max-width; 78 | margin: 60px auto 0px auto; 79 | padding: 0 16px; 80 | 81 | .text { 82 | max-width: 420px; 83 | } 84 | 85 | @include desktop { 86 | display: flex; 87 | align-items: center; 88 | justify-content: space-between; 89 | padding: 0 40px; 90 | } 91 | 92 | .header__title { 93 | max-width: 320px; 94 | margin: 0 30px 0 0; 95 | 96 | @include font-size(37.6px); 97 | } 98 | 99 | .header__search { 100 | height: 100px; 101 | margin-top: 40px; 102 | 103 | @include desktop { 104 | width: 700px; 105 | margin-top: 0; 106 | } 107 | } 108 | } 109 | } 110 | 111 | &.compact { 112 | .header__wrapper { 113 | padding-bottom: 20px; 114 | 115 | .header__head { 116 | .header__brand { 117 | margin-left: 30px; 118 | 119 | @include tablet-down { 120 | margin-left: 10px; 121 | } 122 | } 123 | } 124 | 125 | .header__body { 126 | display: flex; 127 | align-items: center; 128 | justify-content: space-between; 129 | max-width: none; 130 | margin: 0px 40px 0px 40px; 131 | padding: 0; 132 | 133 | @include tablet-down { 134 | flex-direction: column; 135 | align-items: flex-start; 136 | margin: 0 16px 0 16px; 137 | } 138 | 139 | .header__title { 140 | max-width: none; 141 | margin-bottom: 0px; 142 | } 143 | } 144 | } 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /sass/icon.scss: -------------------------------------------------------------------------------- 1 | 2 | // This file is auto-generated, do not edit 3 | 4 | %icon-arrow-right { 5 | content: '→'; 6 | } 7 | 8 | %icon-burger { 9 | content: '🍔'; 10 | } 11 | 12 | %icon-chevron-up { 13 | content: '↑'; 14 | } 15 | 16 | %icon-chevron-down { 17 | content: '↓'; 18 | } 19 | 20 | %icon-chevron-right { 21 | content: '>'; 22 | } 23 | 24 | %icon-chevron-left { 25 | content: '<'; 26 | } 27 | 28 | %icon-cross { 29 | content: 'X'; 30 | } 31 | 32 | %icon-copy { 33 | content: '📄'; 34 | } 35 | 36 | %icon-feedback { 37 | content: '💬'; 38 | } 39 | 40 | %icon-search { 41 | content: '🔍'; 42 | } 43 | 44 | %icon-thumb-up { 45 | content: '👍'; 46 | } 47 | 48 | %icon-thumb-down { 49 | content: '👎'; 50 | } 51 | 52 | %icon-up-down { 53 | content: '🔽'; 54 | } 55 | 56 | %icon-success { 57 | content: '✅'; 58 | } 59 | 60 | %icon-danger { 61 | content: '⛔'; 62 | } 63 | 64 | %icon-info { 65 | content: 'i'; 66 | } 67 | 68 | %icon-warning { 69 | content: '!'; 70 | } 71 | 72 | %icon-file-upload { 73 | content: '📤'; 74 | } 75 | 76 | .icon-arrow-right { 77 | &::after { 78 | @extend %icon-arrow-right; 79 | @include icon(12px); 80 | } 81 | } 82 | 83 | .icon-burger { 84 | &::after { 85 | @extend %icon-burger; 86 | @include icon(12px); 87 | } 88 | } 89 | 90 | .icon-chevron-up { 91 | &::after { 92 | @extend %icon-chevron-up; 93 | @include icon(12px); 94 | } 95 | } 96 | 97 | .icon-chevron-down { 98 | &::after { 99 | @extend %icon-chevron-down; 100 | @include icon(12px); 101 | } 102 | } 103 | 104 | .icon-chevron-right { 105 | &::after { 106 | @extend %icon-chevron-right; 107 | @include icon(12px); 108 | } 109 | } 110 | 111 | .icon-chevron-left { 112 | &::after { 113 | @extend %icon-chevron-left; 114 | @include icon(12px); 115 | } 116 | } 117 | 118 | .icon-cross { 119 | &::after { 120 | @extend %icon-cross; 121 | @include icon(12px); 122 | } 123 | } 124 | 125 | .icon-copy { 126 | &::after { 127 | @extend %icon-copy; 128 | @include icon(12px); 129 | } 130 | } 131 | 132 | .icon-feedback { 133 | &::after { 134 | @extend %icon-feedback; 135 | @include icon(12px); 136 | } 137 | } 138 | 139 | .icon-search { 140 | &::after { 141 | @extend %icon-search; 142 | @include icon(12px); 143 | } 144 | } 145 | 146 | .icon-thumb-up { 147 | &::after { 148 | @extend %icon-thumb-up; 149 | @include icon(12px); 150 | } 151 | } 152 | 153 | .icon-thumb-down { 154 | &::after { 155 | @extend %icon-thumb-down; 156 | @include icon(12px); 157 | } 158 | } 159 | 160 | .icon-up-down { 161 | &::after { 162 | @extend %icon-up-down; 163 | @include icon(12px); 164 | } 165 | } 166 | 167 | .icon-success { 168 | &::after { 169 | @extend %icon-success; 170 | @include icon(12px); 171 | } 172 | } 173 | 174 | .icon-danger { 175 | &::after { 176 | @extend %icon-danger; 177 | @include icon(12px); 178 | } 179 | } 180 | 181 | .icon-info { 182 | &::after { 183 | @extend %icon-info; 184 | @include icon(12px); 185 | } 186 | } 187 | 188 | .icon-warning { 189 | &::after { 190 | @extend %icon-warning; 191 | @include icon(12px); 192 | } 193 | } 194 | 195 | .icon-file-upload { 196 | &::after { 197 | @extend %icon-file-upload; 198 | @include icon(12px); 199 | } 200 | } 201 | -------------------------------------------------------------------------------- /sass/html/table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 22 | 23 | 24 |
FieldDescription
FieldLorem ipsumDescriptionLorem ipsum dolor sit amet
FieldDolorDescriptionLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 16 | dolore.
FieldSit ametDescriptionLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 21 | dolore.
25 |
26 |
27 |
28 |
29 |
Field
30 |
Description
31 |
32 |
33 |
34 |
35 |
FieldLorem ipsum
36 |
DescriptionLorem ipsum dolor sit amet
37 |
38 |
39 |
FieldDolor
40 |
DescriptionLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 41 | dolore.
42 |
43 |
44 |
FieldSit amet
45 |
DescriptionLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 46 | dolore.
47 |
48 |
49 |
50 |
51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
LeftCenterRight
LeftCenterRight
67 |
68 |
69 |
70 |
71 |
Left
72 |
Center
73 |
Right
74 |
75 |
76 |
77 |
78 |
Left
79 |
Center
80 |
Right
81 |
82 |
83 |
84 | -------------------------------------------------------------------------------- /sass/footer.scss: -------------------------------------------------------------------------------- 1 | // Footer 2 | // 3 | // This is the home page footer. 4 | // 5 | // Markup: html/footer.html 6 | // 7 | // Styleguide Organisms.Footer 8 | 9 | footer { 10 | display: flex; 11 | justify-content: center; 12 | background-image: linear-gradient(to top, #3e3e3e, #2e2e2e); 13 | } 14 | 15 | .footer__wrapper { 16 | display: flex; 17 | flex-direction: column; 18 | width: 100%; 19 | max-width: $max-width; 20 | margin-top: 0; 21 | 22 | @include tablet-up { 23 | margin-top: 95px; 24 | } 25 | } 26 | 27 | .footer-top-content { 28 | display: none; 29 | 30 | @include tablet-up { 31 | display: flex; 32 | flex-direction: row; 33 | flex-wrap: wrap; 34 | justify-content: flex-start; 35 | margin-bottom: 95px; 36 | } 37 | } 38 | 39 | .footer-top-content__wrapper { 40 | display: flex; 41 | flex-basis: 0; 42 | flex-direction: column; 43 | flex-grow: 1; 44 | min-width: 250px; 45 | padding: 0 40px; 46 | 47 | .footer-top-content__heading { 48 | margin: 0; 49 | color: $tealish; 50 | line-height: 1.75; 51 | } 52 | } 53 | 54 | .footer-top-content__dropdown-wrapper { 55 | display: flex; 56 | flex-direction: column; 57 | padding: 30px 16px; 58 | 59 | select { 60 | outline: none; 61 | } 62 | 63 | @include tablet-up { 64 | display: none; 65 | } 66 | 67 | .footer-top-content__heading { 68 | margin-top: 0; 69 | 70 | @include tablet-up { 71 | margin-top: unset; 72 | } 73 | 74 | color: $tealish; 75 | line-height: 1.75; 76 | } 77 | } 78 | 79 | .footer-top-content__link { 80 | color: $white; 81 | font-weight: 300; 82 | line-height: 2.25; 83 | text-decoration: underline; 84 | 85 | @include desktop { 86 | text-decoration: none; 87 | } 88 | 89 | &:hover { 90 | color: $white; 91 | text-decoration: underline; 92 | } 93 | 94 | &:last-child { 95 | margin-bottom: 20px; 96 | } 97 | } 98 | 99 | .footer-bottom-content { 100 | display: flex; 101 | position: relative; 102 | flex-direction: row; 103 | flex-wrap: wrap; 104 | justify-content: flex-start; 105 | padding-bottom: 50px; 106 | 107 | .scroll-to-top { 108 | position: absolute; 109 | right: 16px; 110 | bottom: 0px; 111 | } 112 | 113 | @include tablet-up { 114 | padding-bottom: 95px; 115 | 116 | .scroll-to-top { 117 | right: 40px; 118 | } 119 | } 120 | } 121 | 122 | .footer-bottom-content__wrapper { 123 | display: flex; 124 | flex-basis: 0; 125 | flex-direction: column; 126 | flex-grow: 1; 127 | min-width: 250px; 128 | padding: 0 16px 30px; 129 | 130 | @include tablet-up { 131 | padding: 0 40px 30px; 132 | } 133 | 134 | &.legal { 135 | .footer-bottom-content__item { 136 | &:first-child { 137 | @include phone-down { 138 | display: none; 139 | } 140 | } 141 | } 142 | } 143 | 144 | &.copyright { 145 | display: none; 146 | 147 | @include phone-down { 148 | display: flex; 149 | flex-direction: column; 150 | width: 50%; 151 | min-width: 250px; 152 | padding-right: 30px; 153 | padding-left: 16px; 154 | } 155 | } 156 | 157 | .footer-bottom-content__item { 158 | color: $brown-grey; 159 | @include font-size(15px); 160 | font-weight: 300; 161 | line-height: 2; 162 | 163 | .data-label { 164 | margin-right: 5px; 165 | } 166 | 167 | a { 168 | color: $tealish; 169 | @include font-size(15px); 170 | font-weight: normal; 171 | text-decoration: underline; 172 | 173 | @include desktop { 174 | text-decoration: none; 175 | } 176 | 177 | &:hover { 178 | text-decoration: underline; 179 | } 180 | } 181 | } 182 | } 183 | -------------------------------------------------------------------------------- /sass/feedback-form.scss: -------------------------------------------------------------------------------- 1 | // Feedback Form 2 | // 3 | // Markup: html/feedback-form.html 4 | // 5 | // Styleguide Organisms.Feedback Form 6 | 7 | .feedback-form__wrapper { 8 | margin: auto; 9 | } 10 | 11 | .feedback-form { 12 | display: flex; 13 | position: relative; 14 | flex-direction: column; 15 | align-items: center; 16 | width: 720px; 17 | height: 650px; 18 | padding: 20px; 19 | border-radius: 20px; 20 | background-color: $white; 21 | 22 | h1 { 23 | margin-top: 32px; 24 | margin-bottom: 16px; 25 | color: $black; 26 | font-family: $font-primary; 27 | 28 | @include font-size(32px); 29 | 30 | font-weight: bold; 31 | } 32 | 33 | h2 { 34 | margin: 0; 35 | color: $black; 36 | font-family: $font-primary; 37 | 38 | @include font-size(28px); 39 | 40 | font-weight: 300; 41 | line-height: 1; 42 | } 43 | 44 | .feedback-form-close { 45 | position: absolute; 46 | top: 20px; 47 | right: 20px; 48 | border: 0; 49 | background: none; 50 | color: $black; 51 | 52 | @include font-size(20px); 53 | 54 | font-weight: 600; 55 | cursor: pointer; 56 | 57 | &:focus { 58 | outline: none; 59 | } 60 | 61 | &.icon-cross { 62 | &::after { 63 | @include font-size(20px); 64 | font-weight: 600; 65 | } 66 | } 67 | } 68 | 69 | .feedback-form-button { 70 | display: inline-flex; 71 | flex-direction: column; 72 | align-items: center; 73 | margin: 35px; 74 | 75 | &:last-of-type { 76 | .feedback-form-button-circle { 77 | span { 78 | top: calc(50% - 14px); 79 | } 80 | } 81 | } 82 | 83 | .feedback-form-button-circle { 84 | position: relative; 85 | width: 105px; 86 | height: 105px; 87 | margin-bottom: 20px; 88 | transition: $transition-duration ease; 89 | transition-property: border, color; 90 | border: 2px solid rgba(0, 0, 0, 0.1); 91 | border-radius: 60px; 92 | background: none; 93 | color: rgba(0, 0, 0, 0.1); 94 | cursor: pointer; 95 | 96 | &::after { 97 | @include font-size(40px); 98 | 99 | position: absolute; 100 | left: calc(50% - 20px); 101 | } 102 | 103 | &.icon-thumb-up { 104 | &::after { 105 | top: calc(50% - 12px); 106 | } 107 | } 108 | 109 | &.icon-thumb-down { 110 | &::after { 111 | top: 50%; 112 | } 113 | } 114 | 115 | &:hover { 116 | border-color: $jade; 117 | color: $jade; 118 | } 119 | 120 | &:focus { 121 | outline: none; 122 | } 123 | } 124 | 125 | .feedback-form-button-label { 126 | transition: $transition-duration ease; 127 | transition-property: border, color; 128 | border: 0; 129 | background: none; 130 | color: $body-copy; 131 | 132 | @include font-size(17px); 133 | 134 | font-weight: bold; 135 | line-height: 1.12; 136 | cursor: pointer; 137 | 138 | &:hover { 139 | color: $jade; 140 | } 141 | 142 | &:focus { 143 | outline: none; 144 | } 145 | } 146 | 147 | &.feedback-form-button--selected { 148 | .feedback-form-button-circle { 149 | background-color: $jade; 150 | color: $white; 151 | } 152 | 153 | .feedback-form-button-label { 154 | color: $jade; 155 | } 156 | } 157 | } 158 | 159 | textarea { 160 | width: 60%; 161 | } 162 | 163 | .feedback-form-button-submit { 164 | width: 60%; 165 | margin: 30px; 166 | padding: 20px; 167 | transition: $transition-duration ease; 168 | transition-property: border, background; 169 | border: 0; 170 | border-radius: 5px; 171 | background: $jade; 172 | color: $white; 173 | 174 | @include font-size(17px); 175 | 176 | font-weight: bold; 177 | cursor: pointer; 178 | 179 | &:focus { 180 | outline: none; 181 | } 182 | 183 | &:hover { 184 | &:not([disabled]) { 185 | border-color: darken($jade, 10%); 186 | background-color: darken($jade, 10%); 187 | } 188 | } 189 | 190 | &:disabled { 191 | opacity: 0.5; 192 | cursor: default; 193 | pointer-events: none; 194 | } 195 | } 196 | } 197 | -------------------------------------------------------------------------------- /sass/html/project-topics.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

IOTA Basics

4 | Learn about the basic ideas and concepts around IOTA 5 |
6 |
7 | 8 | Introduction 9 | 10 | Learn about the basic ideas and concepts around IOTA and etc 11 |
12 |
13 | 14 | Seeds, Private Keys & Accounts 15 | 16 | Learn about the basic ideas and concepts around IOTA and etc 17 |
18 |
19 | 20 | Transactions 21 | 22 | Learn about the basic ideas and concepts around IOTA and etc 23 |
24 |
25 | 26 | Networks 27 | 28 | Learn about the basic ideas and concepts around IOTA and etc 29 |
30 |
31 | 32 | Support 33 | 34 | Learn about the basic ideas and concepts around IOTA and etc 35 |
36 |
37 |
38 |
39 | 40 | Introduction 41 | 42 | Learn about the basic ideas and concepts around IOTA and etc 43 |
44 |
45 | 46 | Seeds, Private Keys & Accounts 47 | 48 | Learn about the basic ideas and concepts around IOTA and etc 49 |
50 |
51 | 52 | Transactions 53 | 54 | Learn about the basic ideas and concepts around IOTA and etc 55 |
56 |
57 | 58 | Networks 59 | 60 | Learn about the basic ideas and concepts around IOTA and etc 61 |
62 |
63 | 64 | Support 65 | 66 | Learn about the basic ideas and concepts around IOTA and etc 67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 | Transactions 75 | Learn about the basic ideas and concepts around IOTA and etc 76 |
77 |
78 | Networks 79 | Learn about the basic ideas and concepts around IOTA and etc 80 |
81 |
82 | Support 83 | Learn about the basic ideas and concepts around IOTA and etc 84 |
85 |
86 | -------------------------------------------------------------------------------- /sass/table.scss: -------------------------------------------------------------------------------- 1 | // Table 2 | // 3 | // Markup: html/table.html 4 | // 5 | // Styleguide Molecules.Table 6 | 7 | @mixin phone-down-style { 8 | border-left-width: 0px; 9 | 10 | thead, 11 | .table-head { 12 | th, 13 | .table-head-row--item { 14 | display: none; 15 | } 16 | } 17 | 18 | tbody, 19 | .table-body { 20 | th, 21 | .table-body-row--header, 22 | td, 23 | .table-body-row--item { 24 | display: block; 25 | padding: 0px 8px 0px 8px !important; 26 | font-size: 1rem !important; 27 | font-weight: 300; 28 | line-height: 1.75 !important; 29 | } 30 | 31 | tr, 32 | .table-body-row { 33 | display: block; 34 | margin-bottom: 10px; 35 | border-top: 1px solid #ececec; 36 | border-left: 1px solid #ececec; 37 | 38 | th, 39 | .table-body-row--header, 40 | td, 41 | .table-body-row--item { 42 | display: flex; 43 | 44 | .table-body-row-item--inline-header { 45 | display: block; 46 | flex: 1; 47 | margin-right: 8px; 48 | margin-left: -8px; 49 | padding: 8px; 50 | overflow: hidden; 51 | border: 0; 52 | background-color: $gunmetal-grey; 53 | color: $white; 54 | font-family: $font-primary; 55 | 56 | @include font-size(15px); 57 | 58 | font-weight: bold; 59 | line-height: 1.2; 60 | text-align: left; 61 | text-overflow: ellipsis; 62 | } 63 | 64 | span { 65 | &:nth-child(2) { 66 | flex: 3; 67 | padding-top: 3px; 68 | } 69 | } 70 | } 71 | } 72 | } 73 | } 74 | 75 | table, 76 | .table { 77 | width: 100%; 78 | table-layout: fixed; 79 | border-spacing: 0; 80 | border-collapse: collapse; 81 | border-top: 1px solid #ececec; 82 | border-left: 1px solid #ececec; 83 | 84 | thead, 85 | .table-head { 86 | vertical-align: top; 87 | 88 | tr, 89 | .table-head-row { 90 | th, 91 | .table-head-row--item { 92 | padding: 10px 18px 10px 18px; 93 | border-right: 1px solid #ececec; 94 | border-bottom: 1px solid #ececec; 95 | background-color: $gunmetal-grey; 96 | color: $white; 97 | 98 | @include font-size(20px); 99 | 100 | font-weight: bold; 101 | line-height: 1.5; 102 | } 103 | } 104 | 105 | th { 106 | text-align: left; 107 | 108 | &.table-head-row-item--center { 109 | text-align: center; 110 | } 111 | 112 | &.table-head-row-item--right { 113 | text-align: right; 114 | } 115 | } 116 | 117 | .table-head-row { 118 | display: flex; 119 | } 120 | 121 | .table-head-row--item { 122 | display: flex; 123 | flex-basis: 0; 124 | flex-grow: 1; 125 | justify-content: flex-start; 126 | overflow: hidden; 127 | 128 | &.table-head-row-item--center { 129 | justify-content: center; 130 | } 131 | 132 | &.table-head-row-item--right { 133 | justify-content: flex-end; 134 | } 135 | } 136 | } 137 | 138 | tbody, 139 | .table-body { 140 | vertical-align: top; 141 | 142 | tr, 143 | .table-body-row { 144 | &:nth-child(odd) { 145 | background-color: $white; 146 | } 147 | 148 | &:nth-child(even) { 149 | background-color: #f8f8f8; 150 | } 151 | 152 | th, 153 | .table-body-row--header { 154 | padding: 4px 18px 4px 18px; 155 | border-right: 1px solid #ececec; 156 | border-bottom: 1px solid #ececec; 157 | color: $blueberry; 158 | font-family: $font-secondary; 159 | 160 | @include font-size(16px); 161 | @include word-break; 162 | 163 | font-weight: normal; 164 | line-height: 1.5; 165 | 166 | .table-body-row-item--inline-header { 167 | display: none; 168 | } 169 | } 170 | 171 | th, 172 | td { 173 | text-align: left; 174 | 175 | &.table-body-row-item--center { 176 | text-align: center; 177 | } 178 | 179 | &.table-body-row-item--right { 180 | text-align: right; 181 | } 182 | } 183 | 184 | td, 185 | .table-body-row--item { 186 | padding: 12px 18px 12px 18px; 187 | border-right: 1px solid #ececec; 188 | border-bottom: 1px solid #ececec; 189 | color: $body-copy; 190 | 191 | @include font-size(16px); 192 | @include word-break; 193 | 194 | font-weight: normal; 195 | line-height: 1.5; 196 | 197 | .table-body-row-item--inline-header { 198 | display: none; 199 | } 200 | } 201 | } 202 | 203 | .table-body-row { 204 | display: flex; 205 | } 206 | 207 | .table-body-row--header, 208 | .table-body-row--item { 209 | display: flex; 210 | flex-basis: 0; 211 | flex-grow: 1; 212 | justify-content: flex-start; 213 | overflow: hidden; 214 | 215 | &.table-body-row-item--center { 216 | justify-content: center; 217 | } 218 | 219 | &.table-body-row-item--right { 220 | justify-content: flex-end; 221 | } 222 | } 223 | } 224 | 225 | @include phone-down { 226 | @include phone-down-style; 227 | } 228 | 229 | &.table--compact { 230 | @include phone-down-style; 231 | } 232 | } 233 | -------------------------------------------------------------------------------- /sass/side-menu.scss: -------------------------------------------------------------------------------- 1 | // Side Menu 2 | // 3 | // Side menu 4 | // 5 | // Markup: html/side-menu.html 6 | // 7 | // 8 | // Styleguide Molecules.Side Menu 9 | 10 | $side-menu-top-padding: 20px; 11 | $side-menu-left-padding: 28px; 12 | $side-menu-right-padding: 24px; 13 | 14 | .side-menu { 15 | width: 311px; 16 | height: 100%; 17 | background-color: $gunmetal-grey; 18 | 19 | &.side-menu__hidden { 20 | position: fixed; 21 | z-index: 25; 22 | top: 0; 23 | right: -328px; 24 | padding-right: 17px; 25 | overflow-y: scroll; 26 | transition: 300ms ease; 27 | 28 | @include phone-down { 29 | padding-right: 0; 30 | } 31 | } 32 | 33 | &.side-menu__shown { 34 | position: fixed; 35 | z-index: 15; 36 | top: 0; 37 | right: -20px; 38 | padding-right: 17px; 39 | overflow-y: scroll; 40 | transition: 300ms ease; 41 | 42 | @include phone-down { 43 | right: 0; 44 | padding-right: 0; 45 | } 46 | } 47 | } 48 | 49 | .side-menu__caption { 50 | display: flex; 51 | align-items: center; 52 | justify-content: space-between; 53 | height: 90px; 54 | margin: 0; 55 | padding: 0 $side-menu-right-padding 0 $side-menu-left-padding; 56 | color: $white; 57 | 58 | @include font-size(24px); 59 | 60 | .side-menu__close { 61 | position: relative; 62 | width: 20px; 63 | height: 20px; 64 | transition: opacity $transition-duration ease; 65 | border: 0; 66 | background: none; 67 | color: $white; 68 | 69 | &::before { 70 | @extend %icon-cross; 71 | 72 | position: absolute; 73 | top: 0px; 74 | left: 0px; 75 | 76 | @include icon(18px); 77 | } 78 | 79 | &:hover { 80 | &:not([disabled]) { 81 | @include phone-up { 82 | opacity: 0.5; 83 | } 84 | 85 | cursor: pointer; 86 | } 87 | } 88 | 89 | &:focus { 90 | outline: none; 91 | } 92 | } 93 | } 94 | 95 | .side-menu__group { 96 | margin-bottom: 2px; 97 | background: rgba(255, 255, 255, 0.05); 98 | 99 | .side-menu__heading { 100 | display: flex; 101 | position: relative; 102 | align-items: center; 103 | justify-content: space-between; 104 | height: 55px; 105 | margin: 0; 106 | padding: 0 $side-menu-right-padding 0 $side-menu-left-padding; 107 | background-color: rgba(255, 255, 255, 0.1); 108 | color: $white; 109 | 110 | @include font-size(17px); 111 | 112 | font-weight: 600; 113 | text-decoration: none; 114 | cursor: pointer; 115 | 116 | &::before { 117 | @extend %icon-chevron-down; 118 | 119 | position: absolute; 120 | top: calc(50% - 9px); 121 | right: 28px; 122 | 123 | @include icon(16px); 124 | } 125 | 126 | &:hover { 127 | text-decoration: none; 128 | } 129 | } 130 | 131 | &.side-menu__group--selected { 132 | .side-menu__heading { 133 | color: $tealish; 134 | } 135 | } 136 | 137 | &.side-menu__group--expanded { 138 | .side-menu__heading { 139 | &::before { 140 | @extend %icon-chevron-up; 141 | 142 | @include icon(16px); 143 | } 144 | } 145 | 146 | .side-menu__list { 147 | height: auto; 148 | padding: 20px 16px 0px 16px; 149 | } 150 | } 151 | 152 | .side-menu__list { 153 | height: 0; 154 | margin: 0px; 155 | padding: 0 16px 0 16px; 156 | overflow: hidden; 157 | transition: $transition-duration ease; 158 | transition-property: padding, transform, height; 159 | color: $white; 160 | 161 | .side-menu__sub-list { 162 | padding: 0px 0px 0px 16px; 163 | 164 | ul { 165 | margin-top: 5px; 166 | margin-bottom: 10px; 167 | padding: 0px 0px 5px 0px; 168 | } 169 | 170 | .side-menu-item__header { 171 | padding-bottom: 6px; 172 | 173 | @include font-size(14px); 174 | 175 | font-weight: 600; 176 | text-transform: uppercase; 177 | } 178 | 179 | .side-menu-item { 180 | margin-bottom: 7px; 181 | line-height: 1.3; 182 | list-style: none; 183 | 184 | .side-menu__item-superscript { 185 | @include font-size(10px); 186 | 187 | margin-left: 5px; 188 | } 189 | 190 | a { 191 | display: flex; 192 | color: $white; 193 | 194 | @include font-size(15px); 195 | 196 | font-weight: 300; 197 | text-decoration: underline; 198 | 199 | @include desktop { 200 | text-decoration: none; 201 | } 202 | 203 | &:hover { 204 | text-decoration: underline; 205 | cursor: pointer; 206 | } 207 | } 208 | 209 | &.side-menu-item--active { 210 | color: $tealish; 211 | font-weight: 600; 212 | 213 | a { 214 | color: $tealish; 215 | font-weight: 600; 216 | } 217 | } 218 | 219 | .side-menu-item-sub { 220 | margin: 0; 221 | padding: 10px 0px 3px 14px; 222 | list-style-type: none; 223 | 224 | .side-menu-item-sub-child { 225 | margin-bottom: 6px; 226 | line-height: 1; 227 | 228 | a { 229 | color: $white; 230 | font-weight: normal; 231 | } 232 | 233 | &.side-menu-item-sub-child--active { 234 | a { 235 | color: $tealish; 236 | font-weight: 600; 237 | } 238 | } 239 | } 240 | } 241 | } 242 | } 243 | } 244 | } 245 | 246 | .side-menu__overlay { 247 | position: fixed; 248 | top: 0; 249 | right: 0; 250 | bottom: 0; 251 | left: 0; 252 | opacity: 0.5; 253 | background-color: #ffffff; 254 | } 255 | -------------------------------------------------------------------------------- /sass/forms.scss: -------------------------------------------------------------------------------- 1 | // Forms 2 | // 3 | // For generic forms. 4 | // 5 | // Markup: html/forms.html 6 | // 7 | // Styleguide Molecules.Forms 8 | 9 | $common-label-width: 150px; 10 | 11 | .form { 12 | width: 100%; 13 | 14 | .fieldset { 15 | display: flex; 16 | flex-direction: row; 17 | align-items: flex-start; 18 | padding: 0px 0px 10px 0px; 19 | border: 0; 20 | 21 | @include phone-down { 22 | flex-direction: column; 23 | align-items: stretch; 24 | } 25 | 26 | &.fieldset--small { 27 | label { 28 | margin-top: 10px; 29 | } 30 | 31 | label + span { 32 | margin: 10px 10px 10px 0px; 33 | } 34 | } 35 | 36 | label { 37 | display: block; 38 | flex: 0 0 $common-label-width; 39 | margin-top: 20px; 40 | margin-right: 20px; 41 | 42 | @include font-size(16px); 43 | 44 | font-weight: 600; 45 | 46 | @include phone-down { 47 | flex: none; 48 | margin-bottom: 5px; 49 | margin-left: 0px; 50 | } 51 | } 52 | 53 | label + span { 54 | display: inline-flex; 55 | align-items: center; 56 | width: 100%; 57 | margin: 20px 0px 20px 0px; 58 | 59 | @include word-break; 60 | @include phone-down { 61 | margin: 0; 62 | } 63 | } 64 | 65 | input { 66 | &[type='text'], 67 | &[type='password'] { 68 | display: block; 69 | width: 100%; 70 | padding: 20px; 71 | border: 1px solid $light-grey; 72 | border-radius: 5px; 73 | outline: none; 74 | background-color: $white; 75 | color: $black; 76 | 77 | @include phone-down { 78 | padding: 10px; 79 | } 80 | 81 | &::placeholder { 82 | opacity: 1; 83 | color: $light-grey; 84 | } 85 | 86 | &:read-only { 87 | background-color: lighten($light-grey, 15%); 88 | color: $black; 89 | } 90 | 91 | &:disabled { 92 | background-color: lighten($light-grey, 15%); 93 | color: $black; 94 | } 95 | } 96 | 97 | &.small { 98 | width: 30%; 99 | 100 | @include phone-down { 101 | width: 100%; 102 | } 103 | } 104 | } 105 | 106 | textarea { 107 | padding: 20px; 108 | 109 | @include phone-down { 110 | padding: 10px; 111 | } 112 | 113 | &:read-only { 114 | background-color: lighten($light-grey, 15%); 115 | color: $black; 116 | } 117 | } 118 | 119 | .select-wrapper { 120 | @extend %select-wrapper-base; 121 | 122 | max-width: none !important; 123 | border: 1px solid $light-grey !important; 124 | border-radius: 5px !important; 125 | background-color: $white !important; 126 | 127 | &::after { 128 | color: $gunmetal-grey !important; 129 | } 130 | 131 | @include phone-down { 132 | height: 40px !important; 133 | } 134 | 135 | &.small { 136 | width: 30%; 137 | 138 | @include phone-down { 139 | width: 100%; 140 | } 141 | } 142 | } 143 | 144 | .select-wrapper + input, 145 | input + .select-wrapper { 146 | margin-left: 20px; 147 | 148 | @include phone-down { 149 | margin-top: 10px; 150 | margin-left: 0px; 151 | } 152 | } 153 | 154 | .checkbox-container { 155 | position: relative; 156 | top: 8px; 157 | } 158 | 159 | select { 160 | @extend %select-base; 161 | 162 | max-width: none !important; 163 | color: $black !important; 164 | 165 | &:disabled { 166 | background-color: lighten($light-grey, 15%); 167 | color: $black; 168 | } 169 | 170 | @include phone-down { 171 | height: 38px !important; 172 | padding-left: 10px !important; 173 | } 174 | } 175 | 176 | .button { 177 | min-width: 180px; 178 | margin: 0px 0px 0px 10px; 179 | white-space: nowrap; 180 | 181 | @include phone-down { 182 | margin: 10px 0px 0px 0px; 183 | padding: 8px 32px; 184 | text-align: center; 185 | } 186 | 187 | &.no-min { 188 | min-width: auto; 189 | } 190 | } 191 | } 192 | 193 | .form--actions { 194 | display: flex; 195 | margin-top: 10px; 196 | margin-bottom: 10px; 197 | 198 | .form--actions--spacer { 199 | flex: 0 0 $common-label-width; 200 | margin-right: 20px; 201 | 202 | @include phone-down { 203 | display: none; 204 | } 205 | } 206 | 207 | .form--actions--content { 208 | width: 100%; 209 | 210 | .button { 211 | min-width: 180px; 212 | margin: 0px 10px 10px 0px; 213 | 214 | @include phone-down { 215 | width: 100%; 216 | margin: 0px 0px 10px 0px; 217 | padding: 8px 32px; 218 | text-align: center; 219 | } 220 | } 221 | } 222 | } 223 | 224 | .form--row { 225 | min-height: 20px; 226 | margin-bottom: 10px; 227 | margin-left: $common-label-width + 20px; 228 | 229 | @include phone-down { 230 | margin-left: 0px; 231 | } 232 | } 233 | 234 | .form--status { 235 | display: flex; 236 | 237 | label { 238 | display: block; 239 | flex: 0 0 $common-label-width; 240 | margin-right: 20px; 241 | 242 | @include phone-down { 243 | flex: none; 244 | margin-right: 0px; 245 | } 246 | } 247 | 248 | .form--status-content { 249 | display: flex; 250 | align-items: center; 251 | justify-content: stretch; 252 | width: 100%; 253 | min-height: 100px; 254 | margin-top: 10px; 255 | padding: 20px; 256 | border: 1px solid $light-grey; 257 | border-radius: 5px; 258 | font-weight: bold; 259 | 260 | &.form--status-content__error { 261 | color: $danger; 262 | } 263 | 264 | .form--status-message { 265 | display: flex; 266 | flex-direction: column; 267 | } 268 | 269 | .spinner { 270 | margin-right: 20px; 271 | } 272 | 273 | .success-wrapper { 274 | width: auto; 275 | } 276 | 277 | .alert { 278 | width: 100%; 279 | } 280 | } 281 | } 282 | } 283 | -------------------------------------------------------------------------------- /sass/html/footer.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/Logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | --------------------------------------------------------------------------------