maj
This commit is contained in:
@@ -23,7 +23,6 @@
|
||||
|
||||
// Components
|
||||
@import "spectre/accordions";
|
||||
@import "spectre/autocomplete";
|
||||
@import "spectre/avatars";
|
||||
@import "spectre/badges";
|
||||
@import "spectre/breadcrumbs";
|
||||
@@ -49,11 +48,4 @@
|
||||
@import "spectre/utilities";
|
||||
|
||||
// Extras
|
||||
.search-input {
|
||||
@extend .form-input;
|
||||
}
|
||||
|
||||
.button {
|
||||
@extend .btn;
|
||||
}
|
||||
|
||||
@import "theme/extensions";
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
// Optimized for East Asian CJK
|
||||
:lang(zh) {
|
||||
font-family: $cjk-zh-font-family;
|
||||
:lang(zh),
|
||||
:lang(zh-Hans) {
|
||||
font-family: $cjk-zh-hans-font-family;
|
||||
}
|
||||
|
||||
:lang(zh-Hant) {
|
||||
font-family: $cjk-zh-hant-font-family;
|
||||
}
|
||||
|
||||
:lang(ja) {
|
||||
|
||||
@@ -74,4 +74,4 @@
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -13,7 +13,7 @@
|
||||
color: $light-color;
|
||||
content: attr(data-badge);
|
||||
display: inline-block;
|
||||
transform: translate(-.1rem, -.5rem);
|
||||
transform: translate(-.05rem, -.5rem);
|
||||
}
|
||||
}
|
||||
&[data-badge] {
|
||||
@@ -57,14 +57,4 @@
|
||||
z-index: $zindex-1;
|
||||
}
|
||||
}
|
||||
|
||||
&.avatar-xs {
|
||||
&::after {
|
||||
content: "";
|
||||
height: $unit-2;
|
||||
min-width: $unit-2;
|
||||
padding: 0;
|
||||
width: $unit-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,4 +37,8 @@ a {
|
||||
color: $link-color-dark;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: $link-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -98,13 +98,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled .date-item,
|
||||
&.disabled .calendar-event,
|
||||
.date-item:disabled,
|
||||
.calendar-event:disabled {
|
||||
cursor: default;
|
||||
opacity: .25;
|
||||
pointer-events: none;
|
||||
.date-item,
|
||||
.calendar-event {
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
opacity: .25;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.prev-month,
|
||||
&.next-month {
|
||||
.date-item,
|
||||
.calendar-event {
|
||||
opacity: .25;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -132,11 +141,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.range-start,
|
||||
&.range-end {
|
||||
.date-item {
|
||||
background: $primary-color-dark;
|
||||
border-color: darken($primary-color-dark, 5%);
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
|
||||
.date-item {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Calendars size
|
||||
&.calendar-lg {
|
||||
.calendar-body {
|
||||
padding: 0;
|
||||
|
||||
@@ -17,6 +17,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
padding-top: $layout-spacing-lg;
|
||||
|
||||
|
||||
@@ -23,4 +23,8 @@
|
||||
margin-left: -$unit-2;
|
||||
margin-right: $unit-1;
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
transform: scale(.75);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Codes
|
||||
code {
|
||||
@include label-base();
|
||||
@include label-variant($code-color, lighten($code-color, 33%));
|
||||
@include label-variant($code-color, lighten($code-color, 42.5%));
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
|
||||
@@ -193,7 +193,7 @@ textarea.form-input {
|
||||
.form-checkbox,
|
||||
.form-radio,
|
||||
.form-switch {
|
||||
display: inline-block;
|
||||
display: block;
|
||||
line-height: $line-height;
|
||||
margin: ($control-size - $control-size-sm) / 2 0;
|
||||
min-height: 1.2rem;
|
||||
@@ -381,6 +381,7 @@ textarea.form-input {
|
||||
.form-input,
|
||||
.form-select {
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.input-group-btn {
|
||||
@@ -461,6 +462,18 @@ textarea.form-input {
|
||||
}
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
.has-error &,
|
||||
&.is-error {
|
||||
input {
|
||||
&:indeterminate + .form-icon {
|
||||
background: $error-color;
|
||||
border-color: $error-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// validation based on :placeholder-shown (Edge doesn't support it yet)
|
||||
.form-input {
|
||||
&:not(:placeholder-shown) {
|
||||
@@ -516,7 +529,7 @@ input {
|
||||
}
|
||||
}
|
||||
|
||||
// Form Horizontal
|
||||
// Form horizontal
|
||||
.form-horizontal {
|
||||
padding: $layout-spacing 0;
|
||||
|
||||
@@ -525,3 +538,8 @@ input {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Form inline
|
||||
.form-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -31,8 +31,6 @@
|
||||
|
||||
.modal-container {
|
||||
animation: slide-down .2s ease 1;
|
||||
max-width: $control-width-md;
|
||||
width: 100%;
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
}
|
||||
@@ -60,15 +58,23 @@
|
||||
@include shadow-variant(.2rem);
|
||||
background: $bg-color-light;
|
||||
border-radius: $border-radius;
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 75vh;
|
||||
max-width: $control-width-md;
|
||||
padding: 0 $unit-4;
|
||||
width: 100%;
|
||||
|
||||
&.modal-fullheight {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
color: $dark-color;
|
||||
padding: $unit-4;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
padding: $unit-4;
|
||||
position: relative;
|
||||
|
||||
@@ -86,6 +86,10 @@ $off-canvas-breakpoint: $size-lg !default;
|
||||
position: relative;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.off-canvas-overlay {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,11 +16,10 @@
|
||||
}
|
||||
|
||||
*:focus + .popover-container,
|
||||
&:hover .popover-container,
|
||||
.popover-container:hover {
|
||||
&:hover .popover-container {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -100%) scale(1);
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
|
||||
&.popover-right {
|
||||
@@ -29,10 +28,9 @@
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
:focus + .popover-container,
|
||||
&:hover .popover-container,
|
||||
.popover-container:hover {
|
||||
transform: translate(0, -50%) scale(1);
|
||||
*:focus + .popover-container,
|
||||
&:hover .popover-container {
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,10 +40,9 @@
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
:focus + .popover-container,
|
||||
&:hover .popover-container,
|
||||
.popover-container:hover {
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
*:focus + .popover-container,
|
||||
&:hover .popover-container {
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,10 +52,9 @@
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
:focus + .popover-container,
|
||||
&:hover .popover-container,
|
||||
.popover-container:hover {
|
||||
transform: translate(-100%, -50%) scale(1);
|
||||
*:focus + .popover-container,
|
||||
&:hover .popover-container {
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// Core variables
|
||||
$version: "0.5.1";
|
||||
$version: "0.5.3";
|
||||
|
||||
// Core features
|
||||
$rtl: false !default;
|
||||
@@ -31,19 +31,21 @@ $warning-color: #ffb700 !default;
|
||||
$error-color: #e85600 !default;
|
||||
|
||||
// Other colors
|
||||
$code-color: #e06870 !default;
|
||||
$code-color: #d73e48 !default;
|
||||
$highlight-color: #ffe9b3 !default;
|
||||
$body-bg: $bg-color-light !default;
|
||||
$body-font-color: lighten($dark-color, 5%) !default;
|
||||
$link-color: $primary-color !default;
|
||||
$link-color-dark: darken($link-color, 5%) !default;
|
||||
$link-color-dark: darken($link-color, 10%) !default;
|
||||
$link-color-light: lighten($link-color, 10%) !default;
|
||||
|
||||
// Fonts
|
||||
// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
|
||||
$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto !default;
|
||||
$mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace !default;
|
||||
$fallback-font-family: "Helvetica Neue", sans-serif !default;
|
||||
$cjk-zh-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family !default;
|
||||
$cjk-zh-hans-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family !default;
|
||||
$cjk-zh-hant-font-family: $base-font-family, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", $fallback-font-family !default;
|
||||
$cjk-jp-font-family: $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family !default;
|
||||
$cjk-ko-font-family: $base-font-family, "Malgun Gothic", $fallback-font-family !default;
|
||||
$body-font-family: $base-font-family, $fallback-font-family !default;
|
||||
@@ -70,7 +72,7 @@ $html-line-height: 1.5 !default;
|
||||
$font-size: .8rem !default;
|
||||
$font-size-sm: .7rem !default;
|
||||
$font-size-lg: .9rem !default;
|
||||
$line-height: 1rem !default;
|
||||
$line-height: 1.2rem !default;
|
||||
|
||||
// Sizes
|
||||
$layout-spacing: $unit-2 !default;
|
||||
|
||||
@@ -20,5 +20,8 @@
|
||||
&:hover {
|
||||
color: darken($color, 5%);
|
||||
}
|
||||
&:visited {
|
||||
color: lighten($color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
@mixin label-base() {
|
||||
border-radius: $border-radius;
|
||||
line-height: 1.2;
|
||||
padding: .1rem .15rem;
|
||||
padding: .1rem .2rem;
|
||||
}
|
||||
|
||||
@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
|
||||
|
||||
@@ -1,65 +1,65 @@
|
||||
// Margin utility mixin
|
||||
@mixin margin-variant($id: 1, $size: $unit-1) {
|
||||
.m-#{$id} {
|
||||
margin: $size;
|
||||
margin: $size !important;
|
||||
}
|
||||
|
||||
.mb-#{$id} {
|
||||
margin-bottom: $size;
|
||||
margin-bottom: $size !important;
|
||||
}
|
||||
|
||||
.ml-#{$id} {
|
||||
margin-left: $size;
|
||||
margin-left: $size !important;
|
||||
}
|
||||
|
||||
.mr-#{$id} {
|
||||
margin-right: $size;
|
||||
margin-right: $size !important;
|
||||
}
|
||||
|
||||
.mt-#{$id} {
|
||||
margin-top: $size;
|
||||
margin-top: $size !important;
|
||||
}
|
||||
|
||||
.mx-#{$id} {
|
||||
margin-left: $size;
|
||||
margin-right: $size;
|
||||
margin-left: $size !important;
|
||||
margin-right: $size !important;
|
||||
}
|
||||
|
||||
.my-#{$id} {
|
||||
margin-bottom: $size;
|
||||
margin-top: $size;
|
||||
margin-bottom: $size !important;
|
||||
margin-top: $size !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Padding utility mixin
|
||||
@mixin padding-variant($id: 1, $size: $unit-1) {
|
||||
.p-#{$id} {
|
||||
padding: $size;
|
||||
padding: $size !important;
|
||||
}
|
||||
|
||||
.pb-#{$id} {
|
||||
padding-bottom: $size;
|
||||
padding-bottom: $size !important;
|
||||
}
|
||||
|
||||
.pl-#{$id} {
|
||||
padding-left: $size;
|
||||
padding-left: $size !important;
|
||||
}
|
||||
|
||||
.pr-#{$id} {
|
||||
padding-right: $size;
|
||||
padding-right: $size !important;
|
||||
}
|
||||
|
||||
.pt-#{$id} {
|
||||
padding-top: $size;
|
||||
padding-top: $size !important;
|
||||
}
|
||||
|
||||
.px-#{$id} {
|
||||
padding-left: $size;
|
||||
padding-right: $size;
|
||||
padding-left: $size !important;
|
||||
padding-right: $size !important;
|
||||
}
|
||||
|
||||
.py-#{$id} {
|
||||
padding-bottom: $size;
|
||||
padding-top: $size;
|
||||
padding-bottom: $size !important;
|
||||
padding-top: $size !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,6 +7,8 @@
|
||||
|
||||
@include text-color-variant(".text-light", $light-color);
|
||||
|
||||
@include text-color-variant(".text-dark", $body-font-color);
|
||||
|
||||
@include text-color-variant(".text-success", $success-color);
|
||||
|
||||
@include text-color-variant(".text-warning", $warning-color);
|
||||
|
||||
@@ -12,15 +12,15 @@
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
.centered {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// Shapes
|
||||
.rounded {
|
||||
.s-rounded {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.circle {
|
||||
.s-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.search-input, [data-grav-field="array"] input, [data-grav-field="array"] textarea {
|
||||
@extend .form-input;
|
||||
}
|
||||
|
||||
.button {
|
||||
@extend .btn;
|
||||
}
|
||||
@@ -1,11 +1,12 @@
|
||||
// Sticky Footer solution
|
||||
body.sticky-footer {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
#page-wrapper {
|
||||
flex: 1;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ form {
|
||||
span.required {
|
||||
color: $error-color;
|
||||
font-weight: 700;
|
||||
font-size: 150%;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.form-input[type=range] {
|
||||
|
||||
@@ -40,24 +40,34 @@ section.section {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
h1 {
|
||||
color: $header-text-dark;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: rgba($header-text-dark, 0.8);
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
&.hero-fullscreen {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
&.hero-large {
|
||||
height: 500px;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
&.hero-medium {
|
||||
height: 400px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
&.hero-small {
|
||||
height: 110px;
|
||||
min-height: 110px;
|
||||
}
|
||||
|
||||
&.hero-tiny {
|
||||
height: 8rem;
|
||||
min-height: 8rem;
|
||||
}
|
||||
|
||||
.header-fixed & {
|
||||
@@ -68,19 +78,24 @@ section.section {
|
||||
// background-attachment: fixed;
|
||||
//}
|
||||
|
||||
h1 {
|
||||
color: $header-text-dark;
|
||||
font-size: 4rem !important;
|
||||
@include breakpoint(md) {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: rgba($header-text-dark, 0.8);
|
||||
font-size: 2.5rem !important;
|
||||
@include breakpoint(sm) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
h1 + h2 {
|
||||
margin-top: -45px !important;
|
||||
}
|
||||
|
||||
&.text-light {
|
||||
h1 {
|
||||
@@ -92,7 +107,7 @@ section.section {
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 130%;
|
||||
font-size: .9rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
@@ -47,13 +47,18 @@
|
||||
.navbar-section {
|
||||
height: $header-height-large;
|
||||
@extend .default-animation;
|
||||
|
||||
@include breakpoint(md) {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.logo svg {
|
||||
width: 150px;
|
||||
display: inherit;
|
||||
|
||||
@extend .default-animation;
|
||||
.logo {
|
||||
svg, img {
|
||||
height: 42px;
|
||||
display: inherit;
|
||||
@extend .default-animation;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed Header solution
|
||||
@@ -73,8 +78,10 @@ body.header-fixed.header-animated {
|
||||
height: $header-height-small;
|
||||
}
|
||||
|
||||
.logo svg {
|
||||
width: 100px;
|
||||
.logo {
|
||||
svg, img {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
~ .mobile-menu .button_container {
|
||||
@@ -85,8 +92,4 @@ body.header-fixed.header-animated {
|
||||
|
||||
.login-status-wrapper {
|
||||
white-space: nowrap;
|
||||
|
||||
.icon {
|
||||
font-size: 120%;
|
||||
}
|
||||
}
|
||||
@@ -52,3 +52,26 @@
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
|
||||
@function strip-unit($value) {
|
||||
@return $value / ($value * 0 + 1);
|
||||
}
|
||||
|
||||
@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
|
||||
$u1: unit($min-vw);
|
||||
$u2: unit($max-vw);
|
||||
$u3: unit($min-font-size);
|
||||
$u4: unit($max-font-size);
|
||||
|
||||
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
|
||||
& {
|
||||
font-size: $min-font-size;
|
||||
@media screen and (min-width: $min-vw) {
|
||||
font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
|
||||
}
|
||||
@media screen and (min-width: $max-vw) {
|
||||
font-size: $max-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
}
|
||||
|
||||
.mobile-logo {
|
||||
svg {
|
||||
max-width: 150px;
|
||||
margin-top: 1rem;
|
||||
svg, img {
|
||||
height: 42px;
|
||||
margin-top: .7rem;
|
||||
margin-left: 1.4rem;
|
||||
|
||||
path {
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
.button_container {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
top: 1.3rem;
|
||||
right: $horiz-padding;
|
||||
height: $mobile-button-height;
|
||||
width: $mobile-button-width;
|
||||
@@ -47,6 +47,8 @@
|
||||
z-index: 100;
|
||||
transition: opacity .25s ease, top 0.5s ease;
|
||||
|
||||
$bar-offset: $mobile-button-height / 3;
|
||||
|
||||
&:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
@@ -55,7 +57,7 @@
|
||||
position: fixed;
|
||||
|
||||
.top {
|
||||
transform: translateY(11px) translateX(0) rotate(45deg);
|
||||
transform: translateY($bar-offset) translateX(0) rotate(45deg);
|
||||
background: $mobile-color-active;
|
||||
}
|
||||
.middle {
|
||||
@@ -64,7 +66,7 @@
|
||||
}
|
||||
|
||||
.bottom {
|
||||
transform: translateY(-11px) translateX(0) rotate(-45deg);
|
||||
transform: translateY(-($bar-offset)) translateX(0) rotate(-45deg);
|
||||
background: $mobile-color-active;
|
||||
}
|
||||
}
|
||||
@@ -72,7 +74,7 @@
|
||||
span {
|
||||
background: $mobile-color-main;
|
||||
border: none;
|
||||
height: 5px;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -81,11 +83,11 @@
|
||||
cursor: pointer;
|
||||
|
||||
&:nth-of-type(2) {
|
||||
top: 11px;
|
||||
top: $bar-offset;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
top: 22px;
|
||||
top: $bar-offset * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
#modular-hero {
|
||||
.modular-hero {
|
||||
#to-start {
|
||||
bottom: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#modular-features {
|
||||
.modular-features {
|
||||
text-align: center;
|
||||
|
||||
&.offset-box {
|
||||
@@ -112,7 +112,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
#modular-text {
|
||||
.modular-text {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
|
||||
.columns.left {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,7 @@
|
||||
html {
|
||||
@include fluid-type($size-xs, $size-xl, $min-responsive-font-size, $html-font-size);
|
||||
}
|
||||
|
||||
// Header Overrides
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 2rem;
|
||||
@@ -26,9 +30,16 @@ h6, .h6 {
|
||||
.title-h1h2 {
|
||||
h1 {
|
||||
font-weight: 100;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.1;
|
||||
|
||||
strong, bold {
|
||||
font-weight: 400;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
h1 + h2 {
|
||||
line-height: 1.1;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -36,7 +47,6 @@ h6, .h6 {
|
||||
// Typography Hints
|
||||
.title-h1h2, .title-center {
|
||||
h1 + h2 {
|
||||
margin-top: -35px;
|
||||
margin-bottom: 50px;
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -119,10 +129,29 @@ strong {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.icon {
|
||||
font-size: 120%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Lists
|
||||
ul,
|
||||
ol {
|
||||
margin-left: $unit-8;
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: $unit-8;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc outside;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal outside;
|
||||
}
|
||||
|
||||
// Notices
|
||||
.notices {
|
||||
margin: 1.5rem 0;
|
||||
|
||||
@@ -3,6 +3,7 @@ $horiz-padding: 1rem;
|
||||
$vert-padding: 2rem 0 2rem;
|
||||
|
||||
// Fonts
|
||||
$min-responsive-font-size: 16px;
|
||||
$title-font-family: $base-font-family, $fallback-font-family !default;
|
||||
|
||||
// Header
|
||||
@@ -24,5 +25,5 @@ $dropmenu-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
|
||||
$mobile-color-main: $primary-color;
|
||||
$mobile-color-active: #FFF;
|
||||
$mobile-color-link: #FFF;
|
||||
$mobile-button-height: 27px;
|
||||
$mobile-button-width: 35px;
|
||||
$mobile-button-height: 24px;
|
||||
$mobile-button-width: 28px;
|
||||
Reference in New Issue
Block a user