first commit
This commit is contained in:
root
commit
96efdad0ab
|
|
@ -0,0 +1,11 @@
|
|||
# Dependencies
|
||||
node_modules
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/.tmp
|
||||
/zip
|
||||
|
||||
# System Files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 Nigel O Toole
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>BTCP New Chain work progress</title>
|
||||
|
||||
<link rel="stylesheet" href="styles/site.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive+Mono|Open+Sans:300,400&display=swap">
|
||||
|
||||
<link rel="stylesheet" href="styles/progress-tracker.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<nav class="container">
|
||||
|
||||
<h1 class="logo-text">BTCP New Chain work progress</h1>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="fullwidth">
|
||||
<div class="container separator">
|
||||
<h3>New BTCP Chain Launch Progress</h3>
|
||||
|
||||
<ul class="progress-tracker progress-tracker--text progress-tracker--center">
|
||||
<li class="progress-step is-complete">
|
||||
<div class="progress-marker"></div>
|
||||
<div class="progress-text">
|
||||
<h4 class="progress-title">Snapshot</h4>
|
||||
Take snapshot of current btcp chain at block 680000.
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="progress-step is-complete">
|
||||
<div class="progress-marker"></div>
|
||||
<div class="progress-text">
|
||||
<h4 class="progress-title">Finalize new codebase</h4>
|
||||
Realign to zcash current code with sapling transactions as default sheilded.
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="progress-step is-active" aria-current="step">
|
||||
<div class="progress-marker"></div>
|
||||
<div class="progress-text">
|
||||
<h4 class="progress-title">Testnet 1</h4>
|
||||
Internal Testnet (currently running)
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="progress-step is-active">
|
||||
<div class="progress-marker"></div>
|
||||
<div class="progress-text">
|
||||
<h4 class="progress-title">Analyzing Chain Data</h4>
|
||||
Analyzing snapshot data to remove previously burned coins as well as known illegitimate coins. (ongoing)
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="progress-step">
|
||||
<div class="progress-marker"></div>
|
||||
<div class="progress-text">
|
||||
<h4 class="progress-title">Testnet 2</h4>
|
||||
Public testnet where modified UTXO set is forked into a new chain.
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="progress-step">
|
||||
<div class="progress-marker"></div>
|
||||
<div class="progress-text">
|
||||
<h4 class="progress-title">Finalize</h4>
|
||||
Finalize code, launch mainnet with fork height set and modified utxo set ready.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<footer class="fullwidth fullwidth--sm footer">
|
||||
<div class="container">
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- This is just required for the fill path demo. -->
|
||||
<script src="scripts/site.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
'use strict';
|
||||
|
||||
// This JS is only needed for the demo to show features
|
||||
|
||||
var progressTrackerDemo = (function() {
|
||||
|
||||
var animPathLinks = document.querySelectorAll('.anim--path .progress-step');
|
||||
var animPathLinksLength = animPathLinks.length;
|
||||
|
||||
function init() {
|
||||
|
||||
if (animPathLinksLength > 0) {
|
||||
for (var i = 0; i < animPathLinksLength; i++) {
|
||||
_handleClick(animPathLinks[i], i);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function _handleClick(link, index) {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
_deactivateOtherLinks(index);
|
||||
_toggleClass(this, 'is-complete');
|
||||
|
||||
if(this.nextElementSibling !== null) {
|
||||
_toggleClass(this.nextElementSibling, 'is-active');
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
function _deactivateOtherLinks(activeIndex) {
|
||||
|
||||
for (var i = 0; i < animPathLinksLength; i++) {
|
||||
if (i >= activeIndex) {
|
||||
_removeClass(animPathLinks[i], 'is-complete');
|
||||
_removeClass(animPathLinks[i], 'is-active');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function _toggleClass(el, className) {
|
||||
|
||||
if (el.classList) {
|
||||
el.classList.toggle(className);
|
||||
} else {
|
||||
var classes = el.className.split(' ');
|
||||
var existingIndex = classes.indexOf(className);
|
||||
|
||||
if (existingIndex >= 0)
|
||||
classes.splice(existingIndex, 1);
|
||||
else
|
||||
classes.push(className);
|
||||
|
||||
el.className = classes.join(' ');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function _removeClass(el, className) {
|
||||
|
||||
if (el.classList)
|
||||
el.classList.remove(className);
|
||||
else
|
||||
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
init: init
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
progressTrackerDemo.init();
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@import "progress-tracker/progress-tracker-variables";
|
||||
@import "progress-tracker/progress-tracker-mixins";
|
||||
@import "progress-tracker/progress-tracker";
|
||||
@import "progress-tracker/progress-tracker-modifiers";
|
||||
@import "progress-tracker/progress-tracker-animations";
|
||||
@import "progress-tracker/progress-tracker-rtl";
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
// ----- Progress Tracker Animations -----
|
||||
// Animation show after click using pure CSS based on a technique - https://ghinda.net/article/css-ripple-material-design/ and the Material design ripple - https://getmdl.io/components/#buttons-section
|
||||
|
||||
// Ripple elements mixin
|
||||
@mixin ripple-element() {
|
||||
content: "";
|
||||
display: block;
|
||||
width: $marker-size;
|
||||
height: $marker-size;
|
||||
position: absolute;
|
||||
top: $marker-size-half;
|
||||
left: $marker-size-half;
|
||||
z-index: 30;
|
||||
background: $ripple-color;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%) scale(0); // Initial state, hides the effect when not animating
|
||||
visibility: hidden; // Hides element so it does not animate on page load
|
||||
}
|
||||
|
||||
@mixin ripple-element-active() {
|
||||
visibility: visible; // Shows element when it is focused
|
||||
}
|
||||
|
||||
// Animation Keyframes
|
||||
@keyframes scale-up {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ----- Ripple effect when marker is clicked -----
|
||||
.anim-ripple, .anim-ripple-large, .anim-ripple-splash {
|
||||
|
||||
.progress-link::before {
|
||||
@include ripple-element();
|
||||
}
|
||||
|
||||
.progress-link:not(:active)::before {
|
||||
animation: scale-up $animation-duration ease-out;
|
||||
}
|
||||
|
||||
.progress-link:focus::before {
|
||||
@include ripple-element-active();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.anim-ripple, .anim-ripple-large, .anim-ripple-splash, .anim-ripple-double {
|
||||
|
||||
&.progress-tracker--center, .progress-tracker--center & {
|
||||
|
||||
.progress-link {
|
||||
&::before, &::after {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.progress-tracker--right, .progress-tracker--right & {
|
||||
|
||||
.progress-link {
|
||||
&::before, &::after {
|
||||
left: calc(100% - #{$marker-size-half});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// ----- Large ripple with splash -----
|
||||
.anim-ripple-splash {
|
||||
|
||||
.progress-link::before {
|
||||
width: $marker-size*2;
|
||||
height: $marker-size*2;
|
||||
box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ----- Double ripple effect, similar to an actual water ripple -----
|
||||
.anim-ripple-double {
|
||||
|
||||
.progress-link {
|
||||
&::before, &::after {
|
||||
@include ripple-element();
|
||||
background: none;
|
||||
border: 3px solid $ripple-color;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-link:not(:active) {
|
||||
&::before, &::after {
|
||||
animation: scale-up $animation-duration ease-out 0s;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation-delay: $animation-duration/2;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-link:focus {
|
||||
&::before, &::after {
|
||||
@include ripple-element-active();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.anim--large {
|
||||
.progress-link {
|
||||
&::before, &::after {
|
||||
width: $marker-size*2;
|
||||
height: $marker-size*2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ----- Fill up the path between markers when it becomes active -----
|
||||
.anim--path {
|
||||
|
||||
.progress-marker {
|
||||
|
||||
&::after {
|
||||
background-image: linear-gradient(to right, $color-path 50%, $color-path-complete 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: 0% 100%;
|
||||
transition: background-position $animation-duration ease-out;
|
||||
}
|
||||
|
||||
.progress-step.is-complete &::after {
|
||||
background-position: -100% 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.progress-step.is-complete .progress-marker::after {
|
||||
background-position: -100% 100%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
// Step state mixin - The first argument is required and the rest are optional, if you pass in null the value will not be changed.
|
||||
@mixin progress-state($color-marker, $color-path: null, $color-text: null, $color-marker-text: null, $color-marker-border: null) {
|
||||
.progress-marker {
|
||||
color: $color-marker-text;
|
||||
|
||||
&::before {
|
||||
background-color: $color-marker;
|
||||
border-color: $color-marker-border;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: $color-path;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
// ----- Modifiers -----
|
||||
|
||||
// Markers with text
|
||||
.progress-tracker--text, .progress-tracker--center, .progress-tracker--right {
|
||||
|
||||
.progress-step {
|
||||
&:last-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Center align markers and text
|
||||
.progress-tracker--center {
|
||||
text-align: center;
|
||||
|
||||
.progress-marker, .progress-text--dotted {
|
||||
&::before {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-marker {
|
||||
&::after {
|
||||
right: -50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Right align markers and text
|
||||
.progress-tracker--right {
|
||||
text-align: right;
|
||||
|
||||
.progress-marker, .progress-text--dotted {
|
||||
&::before {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-marker {
|
||||
&::after {
|
||||
right: calc(-100% + #{$marker-size-half});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Spaces between markers
|
||||
.progress-tracker--spaced {
|
||||
|
||||
.progress-marker {
|
||||
&::after {
|
||||
width: calc(100% - #{$marker-size + ($marker-spacing * 2)});
|
||||
margin-left: ($marker-size-half + $marker-spacing);
|
||||
margin-right: ($marker-size-half + $marker-spacing);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Border around tracker
|
||||
.progress-tracker--border {
|
||||
padding: $progress-tracker-padding;
|
||||
border: 2px solid $color-text;
|
||||
border-radius: $marker-size + ($progress-tracker-padding * 2);
|
||||
}
|
||||
|
||||
|
||||
// Color theme
|
||||
.progress-tracker--theme-red {
|
||||
.progress-step {
|
||||
|
||||
// Inactive - Default state
|
||||
@include progress-state(#666, $color-path: #666, $color-text: $color-text, $color-marker-text: $color-marker-text);
|
||||
|
||||
// Active state
|
||||
&.is-active {
|
||||
@include progress-state(#A62D24);
|
||||
}
|
||||
|
||||
// Complete state
|
||||
&.is-complete {
|
||||
@include progress-state(#D93B30, $color-path: #333);
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover {
|
||||
@include progress-state(#DF7B74);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dots connecting markers to the text
|
||||
.progress-text--dotted {
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: $dot-size;
|
||||
height: $dot-size;
|
||||
margin: $dot-spacing #{ -$text-padding-X + ($marker-size-half - $dot-size-half) };
|
||||
background-size: $dot-size ($dot-size + $dot-spacing);
|
||||
background-image: repeating-radial-gradient(circle at center $dot-size-half,
|
||||
$color-dot,
|
||||
$color-dot ($dot-size-half - 1px),
|
||||
rgba($color-dot, .5) ($dot-size-half - .5px),
|
||||
rgba($color-dot, .01) $dot-size-half,
|
||||
transparent 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through $dot-levels {
|
||||
.progress-text--dotted-#{$i} {
|
||||
&::before {
|
||||
height: (($dot-size + $dot-spacing) * $i) - $dot-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Text above markers
|
||||
.progress-tracker--text-top {
|
||||
|
||||
.progress-text {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.progress-marker {
|
||||
top: -#{$marker-size};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Text inline with markers
|
||||
.progress-tracker--text-inline {
|
||||
overflow: hidden;
|
||||
|
||||
.progress-step, .progress-marker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-marker {
|
||||
flex-grow: 1;
|
||||
|
||||
&::after {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
max-width: 70%;
|
||||
white-space: nowrap;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.progress-marker .progress-text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Square markers
|
||||
.progress-tracker--square {
|
||||
|
||||
.progress-marker {
|
||||
&::before {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Overflow on small screens
|
||||
@media (max-width: 575px) {
|
||||
.progress-tracker-wrapper {
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x proximity;
|
||||
|
||||
.progress-step {
|
||||
min-width: 50%;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Vertical layout
|
||||
.progress-tracker--vertical {
|
||||
flex-direction: column;
|
||||
|
||||
.progress-step {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&.progress-tracker--right .progress-step {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.progress-marker {
|
||||
&::after {
|
||||
right: auto;
|
||||
top: $marker-size-half;
|
||||
left: $path-position;
|
||||
width: $path-height;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
padding: 0 $text-padding--vertical $text-padding--vertical*2 $text-padding--vertical;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
[dir="rtl"] {
|
||||
.progress-marker {
|
||||
&::after {
|
||||
right: auto;
|
||||
left: -#{$marker-size-half};
|
||||
}
|
||||
}
|
||||
|
||||
.progress-tracker--center {
|
||||
.progress-marker {
|
||||
&::after {
|
||||
left: -50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
// Colours
|
||||
$color-marker: #b6b6b6 !default;
|
||||
$color-marker-active: #2196F3 !default;
|
||||
$color-marker-complete: #00B72E !default; // #1976D2
|
||||
$color-marker-hover: #56ADF5 !default;
|
||||
|
||||
$color-path: #b6b6b6 !default;
|
||||
$color-path-complete: #868686 !default;
|
||||
|
||||
$color-text: #333 !default;
|
||||
$color-marker-text: #fff !default;
|
||||
|
||||
|
||||
// Sizing
|
||||
$marker-size: 24px !default;
|
||||
$marker-size-half: ceil($marker-size / 2);
|
||||
$marker-size-third: ceil($marker-size / 3);
|
||||
$marker-size-quarter: ceil($marker-size / 4);
|
||||
$marker-spacing: 8px !default;
|
||||
|
||||
$path-height: 4px !default;
|
||||
$path-position: $marker-size-half - ($path-height / 2);
|
||||
|
||||
$text-padding: 8px !default;
|
||||
$text-padding-X: $marker-size-third !default;
|
||||
$text-padding-Y: $text-padding !default;
|
||||
$text-padding--vertical: $text-padding*1.5 !default;
|
||||
|
||||
$progress-tracker-padding: 4px !default;
|
||||
|
||||
|
||||
// Dots connecting text to markers
|
||||
$dot-size: 12px;
|
||||
$dot-size-half: $dot-size/2;
|
||||
$dot-spacing: 6px;
|
||||
$dot-levels: 12;
|
||||
|
||||
$color-dot: $color-path;
|
||||
|
||||
|
||||
// Animations/Transitions
|
||||
$animation-duration: 0.3s !default;
|
||||
$ripple-color: rgba(0, 0, 0, 0.3) !default;
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
// ----- Elements -----
|
||||
|
||||
// Container element
|
||||
.progress-tracker {
|
||||
display: flex;
|
||||
margin: 60px auto;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Step container
|
||||
.progress-step {
|
||||
flex: 1 1 0%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-width: $marker-size; // For a flexbox bug in firefox that wont allow the text overflow on the text
|
||||
|
||||
// Stops the last step growing
|
||||
&:last-child {
|
||||
flex-grow: 0;
|
||||
|
||||
.progress-marker::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link wrapper for the marker and text
|
||||
.progress-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
// Progress marker
|
||||
.progress-marker {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
// Marker
|
||||
&::before {
|
||||
content: attr(data-text);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
width: $marker-size;
|
||||
height: $marker-size;
|
||||
padding-bottom: 2px; // To align text within the marker
|
||||
border-radius: 50%;
|
||||
transition: background-color, border-color;
|
||||
transition-duration: $animation-duration;
|
||||
}
|
||||
|
||||
// Path between markers
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -10;
|
||||
top: $path-position;
|
||||
right: -#{$marker-size-half};
|
||||
width: 100%;
|
||||
height: $path-height;
|
||||
transition: background-color $animation-duration, background-position $animation-duration;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Progress text
|
||||
.progress-text {
|
||||
display: block;
|
||||
padding: $text-padding-Y $text-padding-X;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
// ----- States -----
|
||||
.progress-step {
|
||||
|
||||
// Inactive - Default state
|
||||
@include progress-state($color-marker, $color-path: $color-path, $color-text: $color-text, $color-marker-text: $color-marker-text);
|
||||
|
||||
// Active state
|
||||
&.is-active {
|
||||
@include progress-state($color-marker-active);
|
||||
}
|
||||
|
||||
// Complete state
|
||||
&.is-complete, &.is-progress {
|
||||
@include progress-state($color-marker-complete, $color-path: $color-path-complete);
|
||||
}
|
||||
|
||||
// In progress state
|
||||
@for $i from 1 through 9 {
|
||||
&.is-progress-#{$i*10} {
|
||||
.progress-marker::after {
|
||||
background-image: linear-gradient(to right, $color-path-complete $i*10%, $color-path $i*10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover {
|
||||
@include progress-state($color-marker-hover);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import "site/normalize.scss";
|
||||
@import "site/site.scss";
|
||||
|
|
@ -0,0 +1,349 @@
|
|||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,235 @@
|
|||
// ----- Base styles -----
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Open Sans", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: #1976D2;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #2196F3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.2;
|
||||
font-weight: 300;
|
||||
|
||||
small {
|
||||
font-size: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
margin: 0 0 .5rem 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1 { font-size: 2.5rem; }
|
||||
h2 { font-size: 2rem; }
|
||||
h3 { font-size: 1.75rem; }
|
||||
h4 { font-size: 1.5rem; }
|
||||
h5 { font-size: 1.25rem; }
|
||||
h6 { font-size: 1rem; }
|
||||
|
||||
p {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
strong, th {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: 'Cutive Mono', monospace;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
padding: .75rem 1rem;
|
||||
margin: 0 0 2rem 0;
|
||||
overflow: auto;
|
||||
font-size: 1rem;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
.table-wrapper {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
margin: 0 0 1.5rem 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
th, td {
|
||||
padding: .25rem .5rem;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.img-fluid {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ----- Layout -----
|
||||
.fullwidth {
|
||||
.container {
|
||||
width: 100%;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fullwidth--sm {
|
||||
.container {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.subsection {
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
|
||||
|
||||
.separator {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ----- Header and footer -----
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
padding: .5rem 0;
|
||||
color: #fff;
|
||||
background-color: #272D63;
|
||||
box-shadow: 0 0 6px 6px rgba(0,0,0,0.1);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 575px) {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin: 0;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-links {
|
||||
|
||||
.btn-demo {
|
||||
margin: .5rem 0;
|
||||
|
||||
&:last-child {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ----- Buttons -----
|
||||
.btn-demo {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border: 1px solid #bbb;
|
||||
padding: 4px 12px 6px 12px;
|
||||
font-size: 18px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
transition: background-color .3s, color .3s;
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-demo--white {
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ----- Utilities -----
|
||||
.m-0 {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
// ----- Imports and variables ------
|
||||
const { src, dest, watch, series, parallel, lastRun } = require('gulp');
|
||||
const gulpLoadPlugins = require('gulp-load-plugins');
|
||||
const $ = gulpLoadPlugins();
|
||||
const browserSync = require('browser-sync');
|
||||
const server = browserSync.create();
|
||||
const del = require('del');
|
||||
const autoprefixer = require('autoprefixer');
|
||||
|
||||
const paths = {
|
||||
src: 'src',
|
||||
dest: 'docs',
|
||||
tmp: '.tmp'
|
||||
};
|
||||
|
||||
|
||||
// ----- Tasks ------
|
||||
function styles() {
|
||||
return src(`${paths.src}/styles/*.scss`)
|
||||
.pipe($.plumber())
|
||||
.pipe($.sourcemaps.init())
|
||||
.pipe($.sass.sync({
|
||||
outputStyle: 'expanded',
|
||||
precision: 10,
|
||||
includePaths: ['.']
|
||||
})
|
||||
.on('error', $.sass.logError))
|
||||
.pipe($.postcss([
|
||||
autoprefixer()
|
||||
]))
|
||||
.pipe($.sourcemaps.write())
|
||||
.pipe(dest(`${paths.tmp}/styles`))
|
||||
.pipe(server.reload({stream: true}));
|
||||
};
|
||||
|
||||
exports.styles = styles;
|
||||
|
||||
|
||||
// ----- Serve tasks ------
|
||||
function startAppServer() {
|
||||
server.init({
|
||||
notify: false,
|
||||
port: 9000,
|
||||
server: {
|
||||
baseDir: [`${paths.tmp}`, `${paths.src}`],
|
||||
routes: {
|
||||
'/node_modules': 'node_modules'
|
||||
},
|
||||
serveStaticOptions: {
|
||||
extensions: ['html']
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
watch([`${paths.src}/*.html`]).on('change', server.reload);
|
||||
|
||||
watch(`${paths.src}/**/*.scss`, styles);
|
||||
}
|
||||
|
||||
|
||||
let serve = series(clean, styles, startAppServer);
|
||||
exports.serve = serve;
|
||||
|
||||
|
||||
// ----- Build tasks ------
|
||||
function compress() {
|
||||
return src([`${paths.tmp}/*/**/*.{html,css,js}`, `${paths.src}/**/*.{html,js,jpg,gif,png}`])
|
||||
.pipe(dest(`${paths.dest}`));
|
||||
}
|
||||
|
||||
function clean() {
|
||||
return del([`${paths.tmp}`, `${paths.dest}`])
|
||||
}
|
||||
|
||||
exports.clean = clean;
|
||||
|
||||
const build = series(clean, styles, compress);
|
||||
|
||||
exports.build = build;
|
||||
exports.default = build;
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,51 @@
|
|||
{
|
||||
"name": "progress-tracker",
|
||||
"description": "A HTML component to illustrate the steps in a multi step process e.g. a multi step form, a timeline or a quiz.",
|
||||
"version": "2.0.6",
|
||||
"main": "src/styles/progress-tracker.scss",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://nigelotoole@github.com/NigelOToole/progress-tracker.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/NigelOToole/progress-tracker/issues"
|
||||
},
|
||||
"homepage": "https://github.com/NigelOToole/progress-tracker#readme",
|
||||
"author": "Nigel O Toole <pure@purestructure.com> (http://www.purestructure.com)",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"progress",
|
||||
"tracker",
|
||||
"multi",
|
||||
"step",
|
||||
"multi-step",
|
||||
"stage",
|
||||
"multi-stage",
|
||||
"sass",
|
||||
"stepper"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"Firefox ESR"
|
||||
],
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.4.4",
|
||||
"browser-sync": "^2.26.5",
|
||||
"del": "^3.0.0",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-cli": "^2.0.1",
|
||||
"gulp-load-plugins": "^1.6.0",
|
||||
"gulp-plumber": "^1.0.1",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-sass": "^4.0.2",
|
||||
"gulp-sourcemaps": "^2.2.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "gulp serve",
|
||||
"build": "gulp"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>BTCP New Chain work progress</title>
|
||||
|
||||
<link rel="stylesheet" href="styles/site.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive+Mono|Open+Sans:300,400&display=swap">
|
||||
|
||||
<link rel="stylesheet" href="styles/progress-tracker.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<nav class="container">
|
||||
|
||||
<h1 class="logo-text">BTCP New Chain work progress</h1>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="fullwidth">
|
||||
<div class="container separator">
|
||||
<h3>New BTCP Chain Launch Progress</h3>
|
||||
|
||||
<ul class="progress-tracker progress-tracker--text progress-tracker--center">
|
||||
<li class="progress-step is-complete">
|
||||
<div class="progress-marker"></div>
|
||||
<div class="progress-text">
|
||||
<h4 class="progress-title">Snapshot</h4>
|
||||
Take snapshot of current btcp chain at block 680000.
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="progress-step is-complete">
|
||||
<div class="progress-marker"></div>
|
||||
<div class="progress-text">
|
||||
<h4 class="progress-title">Finalize new codebase</h4>
|
||||
Realign to zcash current code with sapling transactions as default sheilded.
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="progress-step is-active" aria-current="step">
|
||||
<div class="progress-marker"></div>
|
||||
<div class="progress-text">
|
||||
<h4 class="progress-title">Testnet 1</h4>
|
||||
Internal Testnet (currently running)
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="progress-step is-active">
|
||||
<div class="progress-marker"></div>
|
||||
<div class="progress-text">
|
||||
<h4 class="progress-title">Analyzing Chain Data</h4>
|
||||
Analyzing snapshot data to remove previously burned coins as well as known illegitimate coins. (ongoing)
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="progress-step">
|
||||
<div class="progress-marker"></div>
|
||||
<div class="progress-text">
|
||||
<h4 class="progress-title">Testnet 2</h4>
|
||||
Public testnet where modified UTXO set is forked into a new chain.
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="progress-step">
|
||||
<div class="progress-marker"></div>
|
||||
<div class="progress-text">
|
||||
<h4 class="progress-title">Finalize</h4>
|
||||
Finalize code, launch mainnet with fork height set and modified utxo set ready.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<footer class="fullwidth fullwidth--sm footer">
|
||||
<div class="container">
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- This is just required for the fill path demo. -->
|
||||
<script src="scripts/site.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
'use strict';
|
||||
|
||||
// This JS is only needed for the demo to show features
|
||||
|
||||
var progressTrackerDemo = (function() {
|
||||
|
||||
var animPathLinks = document.querySelectorAll('.anim--path .progress-step');
|
||||
var animPathLinksLength = animPathLinks.length;
|
||||
|
||||
function init() {
|
||||
|
||||
if (animPathLinksLength > 0) {
|
||||
for (var i = 0; i < animPathLinksLength; i++) {
|
||||
_handleClick(animPathLinks[i], i);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function _handleClick(link, index) {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
_deactivateOtherLinks(index);
|
||||
_toggleClass(this, 'is-complete');
|
||||
|
||||
if(this.nextElementSibling !== null) {
|
||||
_toggleClass(this.nextElementSibling, 'is-active');
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
function _deactivateOtherLinks(activeIndex) {
|
||||
|
||||
for (var i = 0; i < animPathLinksLength; i++) {
|
||||
if (i >= activeIndex) {
|
||||
_removeClass(animPathLinks[i], 'is-complete');
|
||||
_removeClass(animPathLinks[i], 'is-active');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function _toggleClass(el, className) {
|
||||
|
||||
if (el.classList) {
|
||||
el.classList.toggle(className);
|
||||
} else {
|
||||
var classes = el.className.split(' ');
|
||||
var existingIndex = classes.indexOf(className);
|
||||
|
||||
if (existingIndex >= 0)
|
||||
classes.splice(existingIndex, 1);
|
||||
else
|
||||
classes.push(className);
|
||||
|
||||
el.className = classes.join(' ');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function _removeClass(el, className) {
|
||||
|
||||
if (el.classList)
|
||||
el.classList.remove(className);
|
||||
else
|
||||
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
init: init
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
progressTrackerDemo.init();
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@import "progress-tracker/progress-tracker-variables";
|
||||
@import "progress-tracker/progress-tracker-mixins";
|
||||
@import "progress-tracker/progress-tracker";
|
||||
@import "progress-tracker/progress-tracker-modifiers";
|
||||
@import "progress-tracker/progress-tracker-animations";
|
||||
@import "progress-tracker/progress-tracker-rtl";
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
// ----- Progress Tracker Animations -----
|
||||
// Animation show after click using pure CSS based on a technique - https://ghinda.net/article/css-ripple-material-design/ and the Material design ripple - https://getmdl.io/components/#buttons-section
|
||||
|
||||
// Ripple elements mixin
|
||||
@mixin ripple-element() {
|
||||
content: "";
|
||||
display: block;
|
||||
width: $marker-size;
|
||||
height: $marker-size;
|
||||
position: absolute;
|
||||
top: $marker-size-half;
|
||||
left: $marker-size-half;
|
||||
z-index: 30;
|
||||
background: $ripple-color;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%) scale(0); // Initial state, hides the effect when not animating
|
||||
visibility: hidden; // Hides element so it does not animate on page load
|
||||
}
|
||||
|
||||
@mixin ripple-element-active() {
|
||||
visibility: visible; // Shows element when it is focused
|
||||
}
|
||||
|
||||
// Animation Keyframes
|
||||
@keyframes scale-up {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ----- Ripple effect when marker is clicked -----
|
||||
.anim-ripple, .anim-ripple-large, .anim-ripple-splash {
|
||||
|
||||
.progress-link::before {
|
||||
@include ripple-element();
|
||||
}
|
||||
|
||||
.progress-link:not(:active)::before {
|
||||
animation: scale-up $animation-duration ease-out;
|
||||
}
|
||||
|
||||
.progress-link:focus::before {
|
||||
@include ripple-element-active();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.anim-ripple, .anim-ripple-large, .anim-ripple-splash, .anim-ripple-double {
|
||||
|
||||
&.progress-tracker--center, .progress-tracker--center & {
|
||||
|
||||
.progress-link {
|
||||
&::before, &::after {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.progress-tracker--right, .progress-tracker--right & {
|
||||
|
||||
.progress-link {
|
||||
&::before, &::after {
|
||||
left: calc(100% - #{$marker-size-half});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// ----- Large ripple with splash -----
|
||||
.anim-ripple-splash {
|
||||
|
||||
.progress-link::before {
|
||||
width: $marker-size*2;
|
||||
height: $marker-size*2;
|
||||
box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ----- Double ripple effect, similar to an actual water ripple -----
|
||||
.anim-ripple-double {
|
||||
|
||||
.progress-link {
|
||||
&::before, &::after {
|
||||
@include ripple-element();
|
||||
background: none;
|
||||
border: 3px solid $ripple-color;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-link:not(:active) {
|
||||
&::before, &::after {
|
||||
animation: scale-up $animation-duration ease-out 0s;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation-delay: $animation-duration/2;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-link:focus {
|
||||
&::before, &::after {
|
||||
@include ripple-element-active();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.anim--large {
|
||||
.progress-link {
|
||||
&::before, &::after {
|
||||
width: $marker-size*2;
|
||||
height: $marker-size*2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ----- Fill up the path between markers when it becomes active -----
|
||||
.anim--path {
|
||||
|
||||
.progress-marker {
|
||||
|
||||
&::after {
|
||||
background-image: linear-gradient(to right, $color-path 50%, $color-path-complete 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: 0% 100%;
|
||||
transition: background-position $animation-duration ease-out;
|
||||
}
|
||||
|
||||
.progress-step.is-complete &::after {
|
||||
background-position: -100% 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.progress-step.is-complete .progress-marker::after {
|
||||
background-position: -100% 100%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
// Step state mixin - The first argument is required and the rest are optional, if you pass in null the value will not be changed.
|
||||
@mixin progress-state($color-marker, $color-path: null, $color-text: null, $color-marker-text: null, $color-marker-border: null) {
|
||||
.progress-marker {
|
||||
color: $color-marker-text;
|
||||
|
||||
&::before {
|
||||
background-color: $color-marker;
|
||||
border-color: $color-marker-border;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: $color-path;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
// ----- Modifiers -----
|
||||
|
||||
// Markers with text
|
||||
.progress-tracker--text, .progress-tracker--center, .progress-tracker--right {
|
||||
|
||||
.progress-step {
|
||||
&:last-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Center align markers and text
|
||||
.progress-tracker--center {
|
||||
text-align: center;
|
||||
|
||||
.progress-marker, .progress-text--dotted {
|
||||
&::before {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-marker {
|
||||
&::after {
|
||||
right: -50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Right align markers and text
|
||||
.progress-tracker--right {
|
||||
text-align: right;
|
||||
|
||||
.progress-marker, .progress-text--dotted {
|
||||
&::before {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-marker {
|
||||
&::after {
|
||||
right: calc(-100% + #{$marker-size-half});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Spaces between markers
|
||||
.progress-tracker--spaced {
|
||||
|
||||
.progress-marker {
|
||||
&::after {
|
||||
width: calc(100% - #{$marker-size + ($marker-spacing * 2)});
|
||||
margin-left: ($marker-size-half + $marker-spacing);
|
||||
margin-right: ($marker-size-half + $marker-spacing);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Border around tracker
|
||||
.progress-tracker--border {
|
||||
padding: $progress-tracker-padding;
|
||||
border: 2px solid $color-text;
|
||||
border-radius: $marker-size + ($progress-tracker-padding * 2);
|
||||
}
|
||||
|
||||
|
||||
// Color theme
|
||||
.progress-tracker--theme-red {
|
||||
.progress-step {
|
||||
|
||||
// Inactive - Default state
|
||||
@include progress-state(#666, $color-path: #666, $color-text: $color-text, $color-marker-text: $color-marker-text);
|
||||
|
||||
// Active state
|
||||
&.is-active {
|
||||
@include progress-state(#A62D24);
|
||||
}
|
||||
|
||||
// Complete state
|
||||
&.is-complete {
|
||||
@include progress-state(#D93B30, $color-path: #333);
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover {
|
||||
@include progress-state(#DF7B74);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dots connecting markers to the text
|
||||
.progress-text--dotted {
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: $dot-size;
|
||||
height: $dot-size;
|
||||
margin: $dot-spacing #{ -$text-padding-X + ($marker-size-half - $dot-size-half) };
|
||||
background-size: $dot-size ($dot-size + $dot-spacing);
|
||||
background-image: repeating-radial-gradient(circle at center $dot-size-half,
|
||||
$color-dot,
|
||||
$color-dot ($dot-size-half - 1px),
|
||||
rgba($color-dot, .5) ($dot-size-half - .5px),
|
||||
rgba($color-dot, .01) $dot-size-half,
|
||||
transparent 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through $dot-levels {
|
||||
.progress-text--dotted-#{$i} {
|
||||
&::before {
|
||||
height: (($dot-size + $dot-spacing) * $i) - $dot-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Text above markers
|
||||
.progress-tracker--text-top {
|
||||
|
||||
.progress-text {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.progress-marker {
|
||||
top: -#{$marker-size};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Text inline with markers
|
||||
.progress-tracker--text-inline {
|
||||
overflow: hidden;
|
||||
|
||||
.progress-step, .progress-marker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-marker {
|
||||
flex-grow: 1;
|
||||
|
||||
&::after {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
max-width: 70%;
|
||||
white-space: nowrap;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.progress-marker .progress-text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Square markers
|
||||
.progress-tracker--square {
|
||||
|
||||
.progress-marker {
|
||||
&::before {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Overflow on small screens
|
||||
@media (max-width: 575px) {
|
||||
.progress-tracker-wrapper {
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x proximity;
|
||||
|
||||
.progress-step {
|
||||
min-width: 50%;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Vertical layout
|
||||
.progress-tracker--vertical {
|
||||
flex-direction: column;
|
||||
|
||||
.progress-step {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&.progress-tracker--right .progress-step {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.progress-marker {
|
||||
&::after {
|
||||
right: auto;
|
||||
top: $marker-size-half;
|
||||
left: $path-position;
|
||||
width: $path-height;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
padding: 0 $text-padding--vertical $text-padding--vertical*2 $text-padding--vertical;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
[dir="rtl"] {
|
||||
.progress-marker {
|
||||
&::after {
|
||||
right: auto;
|
||||
left: -#{$marker-size-half};
|
||||
}
|
||||
}
|
||||
|
||||
.progress-tracker--center {
|
||||
.progress-marker {
|
||||
&::after {
|
||||
left: -50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
// Colours
|
||||
$color-marker: #b6b6b6 !default;
|
||||
$color-marker-active: #2196F3 !default;
|
||||
$color-marker-complete: #00B72E !default; // #1976D2
|
||||
$color-marker-hover: #56ADF5 !default;
|
||||
|
||||
$color-path: #b6b6b6 !default;
|
||||
$color-path-complete: #868686 !default;
|
||||
|
||||
$color-text: #333 !default;
|
||||
$color-marker-text: #fff !default;
|
||||
|
||||
|
||||
// Sizing
|
||||
$marker-size: 24px !default;
|
||||
$marker-size-half: ceil($marker-size / 2);
|
||||
$marker-size-third: ceil($marker-size / 3);
|
||||
$marker-size-quarter: ceil($marker-size / 4);
|
||||
$marker-spacing: 8px !default;
|
||||
|
||||
$path-height: 4px !default;
|
||||
$path-position: $marker-size-half - ($path-height / 2);
|
||||
|
||||
$text-padding: 8px !default;
|
||||
$text-padding-X: $marker-size-third !default;
|
||||
$text-padding-Y: $text-padding !default;
|
||||
$text-padding--vertical: $text-padding*1.5 !default;
|
||||
|
||||
$progress-tracker-padding: 4px !default;
|
||||
|
||||
|
||||
// Dots connecting text to markers
|
||||
$dot-size: 12px;
|
||||
$dot-size-half: $dot-size/2;
|
||||
$dot-spacing: 6px;
|
||||
$dot-levels: 12;
|
||||
|
||||
$color-dot: $color-path;
|
||||
|
||||
|
||||
// Animations/Transitions
|
||||
$animation-duration: 0.3s !default;
|
||||
$ripple-color: rgba(0, 0, 0, 0.3) !default;
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
// ----- Elements -----
|
||||
|
||||
// Container element
|
||||
.progress-tracker {
|
||||
display: flex;
|
||||
margin: 60px auto;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Step container
|
||||
.progress-step {
|
||||
flex: 1 1 0%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-width: $marker-size; // For a flexbox bug in firefox that wont allow the text overflow on the text
|
||||
|
||||
// Stops the last step growing
|
||||
&:last-child {
|
||||
flex-grow: 0;
|
||||
|
||||
.progress-marker::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link wrapper for the marker and text
|
||||
.progress-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
// Progress marker
|
||||
.progress-marker {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
// Marker
|
||||
&::before {
|
||||
content: attr(data-text);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
width: $marker-size;
|
||||
height: $marker-size;
|
||||
padding-bottom: 2px; // To align text within the marker
|
||||
border-radius: 50%;
|
||||
transition: background-color, border-color;
|
||||
transition-duration: $animation-duration;
|
||||
}
|
||||
|
||||
// Path between markers
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -10;
|
||||
top: $path-position;
|
||||
right: -#{$marker-size-half};
|
||||
width: 100%;
|
||||
height: $path-height;
|
||||
transition: background-color $animation-duration, background-position $animation-duration;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Progress text
|
||||
.progress-text {
|
||||
display: block;
|
||||
padding: $text-padding-Y $text-padding-X;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
// ----- States -----
|
||||
.progress-step {
|
||||
|
||||
// Inactive - Default state
|
||||
@include progress-state($color-marker, $color-path: $color-path, $color-text: $color-text, $color-marker-text: $color-marker-text);
|
||||
|
||||
// Active state
|
||||
&.is-active {
|
||||
@include progress-state($color-marker-active);
|
||||
}
|
||||
|
||||
// Complete state
|
||||
&.is-complete, &.is-progress {
|
||||
@include progress-state($color-marker-complete, $color-path: $color-path-complete);
|
||||
}
|
||||
|
||||
// In progress state
|
||||
@for $i from 1 through 9 {
|
||||
&.is-progress-#{$i*10} {
|
||||
.progress-marker::after {
|
||||
background-image: linear-gradient(to right, $color-path-complete $i*10%, $color-path $i*10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover {
|
||||
@include progress-state($color-marker-hover);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import "site/normalize.scss";
|
||||
@import "site/site.scss";
|
||||
|
|
@ -0,0 +1,349 @@
|
|||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,235 @@
|
|||
// ----- Base styles -----
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Open Sans", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: #1976D2;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #2196F3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.2;
|
||||
font-weight: 300;
|
||||
|
||||
small {
|
||||
font-size: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
margin: 0 0 .5rem 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1 { font-size: 2.5rem; }
|
||||
h2 { font-size: 2rem; }
|
||||
h3 { font-size: 1.75rem; }
|
||||
h4 { font-size: 1.5rem; }
|
||||
h5 { font-size: 1.25rem; }
|
||||
h6 { font-size: 1rem; }
|
||||
|
||||
p {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
strong, th {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: 'Cutive Mono', monospace;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
padding: .75rem 1rem;
|
||||
margin: 0 0 2rem 0;
|
||||
overflow: auto;
|
||||
font-size: 1rem;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
.table-wrapper {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
margin: 0 0 1.5rem 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
th, td {
|
||||
padding: .25rem .5rem;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.img-fluid {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ----- Layout -----
|
||||
.fullwidth {
|
||||
.container {
|
||||
width: 100%;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fullwidth--sm {
|
||||
.container {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.subsection {
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
|
||||
|
||||
.separator {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ----- Header and footer -----
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
padding: .5rem 0;
|
||||
color: #fff;
|
||||
background-color: #272D63;
|
||||
box-shadow: 0 0 6px 6px rgba(0,0,0,0.1);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 575px) {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin: 0;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-links {
|
||||
|
||||
.btn-demo {
|
||||
margin: .5rem 0;
|
||||
|
||||
&:last-child {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ----- Buttons -----
|
||||
.btn-demo {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border: 1px solid #bbb;
|
||||
padding: 4px 12px 6px 12px;
|
||||
font-size: 18px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
transition: background-color .3s, color .3s;
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-demo--white {
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ----- Utilities -----
|
||||
.m-0 {
|
||||
margin: 0;
|
||||
}
|
||||
Loading…
Reference in New Issue