aboutsummaryrefslogtreecommitdiffstats
path: root/demo/src/sass/components
diff options
context:
space:
mode:
Diffstat (limited to 'demo/src/sass/components')
-rw-r--r--demo/src/sass/components/buttons.scss110
-rw-r--r--demo/src/sass/components/header.scss38
-rw-r--r--demo/src/sass/components/icons.scss12
-rw-r--r--demo/src/sass/components/links.scss62
-rw-r--r--demo/src/sass/components/lists.scss6
-rw-r--r--demo/src/sass/components/media.scss4
-rw-r--r--demo/src/sass/components/navigation.scss6
-rw-r--r--demo/src/sass/components/players.scss40
8 files changed, 139 insertions, 139 deletions
diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss
index 279007fb..1c9375bf 100644
--- a/demo/src/sass/components/buttons.scss
+++ b/demo/src/sass/components/buttons.scss
@@ -5,80 +5,80 @@
// Shared
.button,
.button__count {
- align-items: center;
- border: 0;
- border-radius: $border-radius-base;
- box-shadow: 0 1px 1px rgba(#000, 0.1);
- display: inline-flex;
- padding: ($spacing-base * 0.75);
- position: relative;
- text-shadow: none;
- user-select: none;
- vertical-align: middle;
+ align-items: center;
+ border: 0;
+ border-radius: $border-radius-base;
+ box-shadow: 0 1px 1px rgba(#000, 0.1);
+ display: inline-flex;
+ padding: ($spacing-base * 0.75);
+ position: relative;
+ text-shadow: none;
+ user-select: none;
+ vertical-align: middle;
}
// Buttons
.button {
- background: $color-button-background;
- color: $color-button-text;
- font-weight: $font-weight-bold;
- padding-left: ($spacing-base * 1.25);
- padding-right: ($spacing-base * 1.25);
- transition: all 0.2s ease;
+ background: $color-button-background;
+ color: $color-button-text;
+ font-weight: $font-weight-bold;
+ padding-left: ($spacing-base * 1.25);
+ padding-right: ($spacing-base * 1.25);
+ transition: all 0.2s ease;
- &:hover,
- &:focus {
- background: $color-button-background-hover;
+ &:hover,
+ &:focus {
+ background: $color-button-background-hover;
- // Remove the underline/border
- &::after {
- display: none;
- }
+ // Remove the underline/border
+ &::after {
+ display: none;
}
+ }
- &:hover {
- box-shadow: 0 2px 2px rgba(#000, 0.1);
- }
+ &:hover {
+ box-shadow: 0 2px 2px rgba(#000, 0.1);
+ }
- &:focus {
- outline: 0;
- }
+ &:focus {
+ outline: 0;
+ }
- &.tab-focus {
- @include tab-focus();
- }
+ &.tab-focus {
+ @include tab-focus();
+ }
- &:active {
- top: 1px;
- }
+ &:active {
+ top: 1px;
+ }
}
// Button group
.button--with-count {
- display: inline-flex;
+ display: inline-flex;
- .button .icon {
- flex-shrink: 0;
- }
+ .button .icon {
+ flex-shrink: 0;
+ }
}
// Count bubble
.button__count {
- animation: fadein 0.2s ease;
- background: $color-button-count-background;
- color: $color-button-count-text;
- margin-left: ($spacing-base * 0.75);
+ animation: fadein 0.2s ease;
+ background: $color-button-count-background;
+ color: $color-button-count-text;
+ margin-left: ($spacing-base * 0.75);
- &::before {
- border: $arrow-size solid transparent;
- border-left-width: 0;
- border-right-color: $color-button-count-background;
- content: '';
- height: 0;
- position: absolute;
- right: 100%;
- top: 50%;
- transform: translateY(-50%);
- width: 0;
- }
+ &::before {
+ border: $arrow-size solid transparent;
+ border-left-width: 0;
+ border-right-color: $color-button-count-background;
+ content: '';
+ height: 0;
+ position: absolute;
+ right: 100%;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 0;
+ }
}
diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss
index fd014ead..47ba69b0 100644
--- a/demo/src/sass/components/header.scss
+++ b/demo/src/sass/components/header.scss
@@ -3,28 +3,28 @@
// ==========================================================================
header {
- padding-bottom: $spacing-base;
- text-align: center;
+ padding-bottom: $spacing-base;
+ text-align: center;
- h1 span {
- animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
- display: inline-block;
- font-weight: $font-weight-light;
- opacity: 0.5;
- }
+ h1 span {
+ animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
+ display: inline-block;
+ font-weight: $font-weight-light;
+ opacity: 0.5;
+ }
- .call-to-action {
- margin-top: ($spacing-base * 1.5);
- }
+ .call-to-action {
+ margin-top: ($spacing-base * 1.5);
+ }
- @media only screen and (min-width: $screen-md) {
- margin-right: ($spacing-base * 3);
- max-width: 360px;
- padding-bottom: ($spacing-base * 2);
- text-align: left;
+ @media only screen and (min-width: $screen-md) {
+ margin-right: ($spacing-base * 3);
+ max-width: 360px;
+ padding-bottom: ($spacing-base * 2);
+ text-align: left;
- p:first-of-type {
- @include font-size($font-size-base + 1);
- }
+ p:first-of-type {
+ @include font-size($font-size-base + 1);
}
+ }
}
diff --git a/demo/src/sass/components/icons.scss b/demo/src/sass/components/icons.scss
index ec9f8c5c..32e5f685 100644
--- a/demo/src/sass/components/icons.scss
+++ b/demo/src/sass/components/icons.scss
@@ -4,20 +4,20 @@
// Base size icon styles
.icon {
- fill: currentColor;
- height: $icon-size;
- vertical-align: -3px;
- width: $icon-size;
+ fill: currentColor;
+ height: $icon-size;
+ vertical-align: -3px;
+ width: $icon-size;
}
// Within elements
a svg,
button svg,
label svg {
- pointer-events: none;
+ pointer-events: none;
}
a .icon,
.btn .icon {
- margin-right: ($spacing-base / 2);
+ margin-right: ($spacing-base / 2);
}
diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss
index 1d49be3a..92e71931 100644
--- a/demo/src/sass/components/links.scss
+++ b/demo/src/sass/components/links.scss
@@ -4,45 +4,45 @@
// Make a <button> look like an <a>
button.faux-link {
- @extend a; // stylelint-disable-line
- @include cancel-button-styles();
+ @extend a; // stylelint-disable-line
+ @include cancel-button-styles();
}
// Links
a {
- border-bottom: 1px dotted currentColor;
- color: $color-link;
- position: relative;
- text-decoration: none;
- transition: all 0.2s ease;
+ border-bottom: 1px dotted currentColor;
+ color: $color-link;
+ position: relative;
+ text-decoration: none;
+ transition: all 0.2s ease;
- &::after {
- background: currentColor;
- content: '';
- height: 1px;
- left: 50%;
- position: absolute;
- top: 100%;
- transform: translateX(-50%);
- transition: width 0.2s ease;
- width: 0;
- }
+ &::after {
+ background: currentColor;
+ content: '';
+ height: 1px;
+ left: 50%;
+ position: absolute;
+ top: 100%;
+ transform: translateX(-50%);
+ transition: width 0.2s ease;
+ width: 0;
+ }
- &:hover,
- &:focus {
- border-bottom-color: transparent;
- outline: 0;
+ &:hover,
+ &:focus {
+ border-bottom-color: transparent;
+ outline: 0;
- &::after {
- width: 100%;
- }
+ &::after {
+ width: 100%;
}
+ }
- &.tab-focus {
- @include tab-focus();
- }
+ &.tab-focus {
+ @include tab-focus();
+ }
- &.no-border::after {
- display: none;
- }
+ &.no-border::after {
+ display: none;
+ }
}
diff --git a/demo/src/sass/components/lists.scss b/demo/src/sass/components/lists.scss
index bae3d11d..c6fe2ca5 100644
--- a/demo/src/sass/components/lists.scss
+++ b/demo/src/sass/components/lists.scss
@@ -5,7 +5,7 @@
// Lists
ul,
li {
- list-style: none;
- margin: 0;
- padding: 0;
+ list-style: none;
+ margin: 0;
+ padding: 0;
}
diff --git a/demo/src/sass/components/media.scss b/demo/src/sass/components/media.scss
index c6744bcc..d6456932 100644
--- a/demo/src/sass/components/media.scss
+++ b/demo/src/sass/components/media.scss
@@ -5,6 +5,6 @@
img,
video,
audio {
- max-width: 100%;
- vertical-align: middle;
+ max-width: 100%;
+ vertical-align: middle;
}
diff --git a/demo/src/sass/components/navigation.scss b/demo/src/sass/components/navigation.scss
index fe14c000..bcb1366e 100644
--- a/demo/src/sass/components/navigation.scss
+++ b/demo/src/sass/components/navigation.scss
@@ -3,7 +3,7 @@
// ==========================================================================
nav {
- display: flex;
- justify-content: center;
- margin-bottom: $spacing-base;
+ display: flex;
+ justify-content: center;
+ margin-bottom: $spacing-base;
}
diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss
index d05e9849..7dcea982 100644
--- a/demo/src/sass/components/players.scss
+++ b/demo/src/sass/components/players.scss
@@ -4,33 +4,33 @@
// Example players
.plyr {
- border-radius: $border-radius-base;
- box-shadow: 0 2px 15px rgba(#000, 0.1);
- margin: $spacing-base auto;
+ border-radius: $border-radius-base;
+ box-shadow: 0 2px 15px rgba(#000, 0.1);
+ margin: $spacing-base auto;
- &.plyr--audio {
- max-width: 480px;
- }
+ &.plyr--audio {
+ max-width: 480px;
+ }
}
.plyr__video-wrapper::after {
- border: 1px solid rgba(#000, 0.15);
- border-radius: inherit;
- bottom: 0;
- content: '';
- left: 0;
- pointer-events: none;
- position: absolute;
- right: 0;
- top: 0;
- z-index: 3;
+ border: 1px solid rgba(#000, 0.15);
+ border-radius: inherit;
+ bottom: 0;
+ content: '';
+ left: 0;
+ pointer-events: none;
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 3;
}
// Style full supported player
.plyr__cite {
- color: $color-gray-500;
+ color: $color-gray-500;
- .icon {
- margin-right: ceil($spacing-base / 6);
- }
+ .icon {
+ margin-right: ceil($spacing-base / 6);
+ }
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-07 18:00:55 +0000