diff options
8 files changed, 129 insertions, 41 deletions
| -rw-r--r-- | src/chips.less | 2 | ||||
| -rw-r--r-- | src/codes.less | 31 | ||||
| -rw-r--r-- | src/meters.less | 60 | ||||
| -rw-r--r-- | src/progress.less | 23 | ||||
| -rw-r--r-- | src/sliders.less | 14 | ||||
| -rw-r--r-- | src/tooltips.less | 2 | ||||
| -rw-r--r-- | src/typography.less | 36 | ||||
| -rw-r--r-- | src/variables.less | 2 |
diff --git a/src/chips.less b/src/chips.less index 69b1f7c..1e822bb 100644 --- a/src/chips.less +++ b/src/chips.less @@ -3,7 +3,7 @@ align-items: center; background: @core-border-color; border-radius: @border-radius; - color: #666; + color: @core-grey-color; display: inline-flex; height: 3rem; margin: .1rem .2rem .1rem 0; diff --git a/src/codes.less b/src/codes.less new file mode 100644 index 0000000..a5be02e --- /dev/null +++ b/src/codes.less @@ -0,0 +1,31 @@ +// Codes +code { + background: @core-bg-color; + color: @code-color; + .label-base(); +} + +.code { + border-radius: @border-radius; + color: @core-grey-color; + line-height: 2rem; + position: relative; + + &::before { + content: attr(data-lang); + color: @control-color; + font-size: 1.2rem; + position: absolute; + right: 1rem; + top: .2rem; + } + + code { + color: inherit; + display: block; + line-height: inherit; + overflow-x: auto; + padding: 2rem; + width: 100%; + } +} diff --git a/src/meters.less b/src/meters.less new file mode 100644 index 0000000..ada4371 --- /dev/null +++ b/src/meters.less @@ -0,0 +1,60 @@ +// Meters +// Credit: https://css-tricks.com/html5-meter-element/ +.meter { + appearance: none; + background: @core-bg-color; + border: 0; + display: block; + width: 100%; + height: 1.6rem; + + &::-webkit-meter-inner-element { + display: block; + } + + &::-webkit-meter-bar, + &::-webkit-meter-optimum-value, + &::-webkit-meter-suboptimum-value, + &::-webkit-meter-even-less-good-value { + border-radius: @border-radius; + } + + &::-webkit-meter-bar { + background: @core-bg-color; + } + + &::-webkit-meter-optimum-value { + background: @control-color-success; + } + + &::-webkit-meter-suboptimum-value { + background: @control-color-warning; + } + + &::-webkit-meter-even-less-good-value { + background: @control-color-danger; + } + + &::-moz-meter-bar, + &::-moz-meter-optimum, + &::-moz-meter-sub-optimum, + &::-moz-meter-sub-sub-optimum { + border-radius: @border-radius; + } + + &::-moz-meter-bar { + background: @core-bg-color; + } + + &:-moz-meter-optimum { + background: @control-color-success; + } + + &:-moz-meter-sub-optimum { + background: @control-color-warning; + } + + &:-moz-meter-sub-sub-optimum { + background: @control-color-danger; + } +} diff --git a/src/progress.less b/src/progress.less index 24c3000..ed45c32 100644 --- a/src/progress.less +++ b/src/progress.less @@ -2,13 +2,16 @@ // Credit: https://css-tricks.com/html5-progress-element/ .progress { appearance: none; + background: @core-border-color; border: 0; + border-radius: @border-radius; color: @core-color; height: .4rem; + position: relative; width: 100%; &::-webkit-progress-bar { - background: @core-border-color; + background: transparent; border-radius: @border-radius; } @@ -21,4 +24,22 @@ background: @core-color; border-radius: @border-radius; } + + &:indeterminate { + animation: progress-indeterminate 1.5s linear infinite; + background: @core-border-color linear-gradient(to right, @core-color 30%, @core-border-color 30%) top left / 150% 150% no-repeat; + + &::-moz-progress-bar { + background: transparent; + } + } +} + +@keyframes progress-indeterminate { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } } diff --git a/src/sliders.less b/src/sliders.less index 520e9a1..f2fa26b 100644 --- a/src/sliders.less +++ b/src/sliders.less @@ -12,26 +12,26 @@ -webkit-appearance: none; background: @core-color; border-radius: 50%; - height: 1.4rem; - margin-top: -.5rem; + height: 1.2rem; + margin-top: -.4rem; transition: transform .2s ease; - width: 1.4rem; + width: 1.2rem; } &::-moz-range-thumb { background: @core-color; border: 0; border-radius: 50%; - height: 1.4rem; + height: 1.2rem; transition: transform .2s ease; - width: 1.4rem; + width: 1.2rem; } &::-ms-thumb { background: @core-color; border: 0; border-radius: 50%; - height: 1.4rem; + height: 1.2rem; transition: transform .2s ease; - width: 1.4rem; + width: 1.2rem; } &:active { diff --git a/src/tooltips.less b/src/tooltips.less index 54fe085..f9cadb4 100644 --- a/src/tooltips.less +++ b/src/tooltips.less @@ -21,7 +21,7 @@ transform: translate(-50%, 0); transition: transform .2s ease; white-space: nowrap; - z-index: 99; + z-index: 999; } &:focus, &:hover { diff --git a/src/typography.less b/src/typography.less index 5f97389..af247f0 100644 --- a/src/typography.less +++ b/src/typography.less @@ -33,6 +33,11 @@ p { line-height: 2.4rem; margin: 0 0 1em; } +a, +ins, +u { + text-decoration-skip: ink edges; +} blockquote { border-left: .2rem solid #ddd; margin-left: 0; @@ -96,34 +101,3 @@ abbr[title] { cursor: help; text-decoration: none; } - -// Code -code { - background: @core-bg-color; - color: lighten(@body-font-color, 20%); - .label-base(); -} -pre { - background: lighten(@core-border-color, 4%); - line-height: 2rem; - margin-bottom: 1em; - margin-top: 1em; - overflow: auto; - padding: 2rem 2.5rem; - position: relative; - - & > code { - background: transparent; - line-height: 2rem; - padding: 0; - - &::before { - content: attr(data-lang); - color: @control-color; - font-size: 1.2rem; - position: absolute; - right: 1rem; - top: .2rem; - } - } -} diff --git a/src/variables.less b/src/variables.less index 3ac57b1..c086a53 100644 --- a/src/variables.less +++ b/src/variables.less @@ -23,6 +23,7 @@ @core-color: #5764c6; @core-secondary-color: lighten(@core-color, 40%); @core-dark-color: #333; +@core-grey-color: #666; @core-light-color: #fff; @core-meta-color: #888; @core-link-color: #5764c6; @@ -32,6 +33,7 @@ @control-color-success: #32b643; @control-color-warning: #ffb700; @control-color-danger: #e85600; +@code-color: #e06870; // Responsive breakpoints @size-xs: 480px; |