From 8ff7f663f4928246abd77e44bb0faf1f935a39fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?= =?UTF-8?q?=E3=83=96?= Date: Thu, 6 Dec 2018 11:48:18 -0600 Subject: [PATCH] Removed fancy Sass stuff --- dist/index.css.map | 2 +- sass/badge/_index.scss | 60 ++++---- sass/button/_index.scss | 216 ++++++++++++++-------------- sass/media/_index.scss | 310 ++++++++++++++++++++-------------------- 4 files changed, 295 insertions(+), 293 deletions(-) diff --git a/dist/index.css.map b/dist/index.css.map index 4263788..66afe03 100644 --- a/dist/index.css.map +++ b/dist/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge/_index.scss","../node_modules/@lbry/color/lbry-color.scss","../sass/button/_index.scss","../sass/media/_index.scss"],"names":[],"mappings":"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","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge/_index.scss","../node_modules/@lbry/color/lbry-color.scss","../sass/button/_index.scss","../sass/media/_index.scss"],"names":[],"mappings":"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","file":"index.css"} \ No newline at end of file diff --git a/sass/badge/_index.scss b/sass/badge/_index.scss index addcabb..3b23822 100644 --- a/sass/badge/_index.scss +++ b/sass/badge/_index.scss @@ -3,7 +3,7 @@ vertical-align: top; white-space: nowrap; - &:not(&--large) { + &:not(.badge--large) { border-radius: 0.2rem; display: inline-block; font-size: 0.8rem; @@ -12,36 +12,36 @@ padding-right: var(--spacing-xs); // 0.5rem; padding-left: var(--spacing-xs); // 0.55rem; } +} - &--cost:not(&--large) { - background-color: $lbry-yellow-2; +.badge--cost:not(.badge--large) { + background-color: $lbry-yellow-2; - [data-mode="dark"] & { - background-color: $lbry-yellow-3; - color: $lbry-black; - } - } - - &--free { - background-color: $lbry-blue-2; - - [data-mode="dark"] & { - background-color: $lbry-blue-3; - color: $lbry-black; - } - } - - &--large { - font-size: 5rem; - line-height: 1; - } - - &--nsfw { - background-color: $lbry-grape-2; - - [data-mode="dark"] & { - background-color: $lbry-grape-3; - color: $lbry-black; - } + [data-mode="dark"] & { + background-color: $lbry-yellow-3; + color: $lbry-black; + } +} + +.badge--free { + background-color: $lbry-blue-2; + + [data-mode="dark"] & { + background-color: $lbry-blue-3; + color: $lbry-black; + } +} + +.badge--large { + font-size: 5rem; + line-height: 1; +} + +.badge--nsfw { + background-color: $lbry-grape-2; + + [data-mode="dark"] & { + background-color: $lbry-grape-3; + color: $lbry-black; } } diff --git a/sass/button/_index.scss b/sass/button/_index.scss index d6ffcda..1c704a9 100644 --- a/sass/button/_index.scss +++ b/sass/button/_index.scss @@ -1,114 +1,114 @@ .button { fill: currentColor; position: relative; +} - &--alt { - &:hover { - text-decoration: underline; - } - } - - &--constrict { - @include constrict(20vw); - } - - &--disabled { - opacity: 0.3; - } - - &--icon { - width: 5rem; height: 5rem; - - background-repeat: no-repeat; - background-size: 50%; - border-radius: 50%; - color: $lbry-white; - transition: background-color 0.2s; - - &:not(:hover) { - background-color: rgba($lbry-black, 0.7); - } - - &:hover { - background-color: $lbry-green-3; - } - - &.button--play { - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E"); - background-position: calc(50% + 0.1rem) center; - } - - &.button--view { - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='none' fill-rule='evenodd'%3E %3Cpath d='M2, 12 C2, 12 5, 5 12, 5 C19, 5 22, 12 22, 12 C22, 12 19, 19 12, 19 C5, 19 2, 12 2, 12 Z' stroke-linejoin='round'/%3E %3Ccircle cx='12' cy='12' r='3'/%3E %3Cpath d='M12, 5 L12, 3' stroke-linecap='round'/%3E %3Cpath d='M18, 6.5 L19, 5' stroke-linecap='round'/%3E %3Cpath d='M21, 10 L22.5, 9' stroke-linecap='round'/%3E %3Cpath d='M1.5, 10 L3, 9' stroke-linecap='round' transform='translate(2.250000, 9.500000) scale(1, -1) translate(-2.250000, -9.500000)'/%3E %3Cpath d='M5, 6.5 L6, 5' stroke-linecap='round' transform='translate(5.500000, 5.750000) scale(-1, 1) translate(-5.500000, -5.750000)'/%3E %3C/g%3E %3C/svg%3E"); - background-position: center calc(50% + 0.1rem); - } - } - - &--inverse { - padding: var(--spacing-xs --spacing-s); // 0.5rem 1rem; - border: 1px solid $lbry-gray-1; - border-radius: 1rem; - color: inherit; - transition: background-color 0.2s; - - [data-mode="dark"] & { - border-color: rgba($lbry-white, 0.1); - } - - &:not(:hover) { - background-color: transparent; - } - - &:hover { - background-color: $lbry-gray-1; - - [data-mode="dark"] & { - background-color: rgba($lbry-white, 0.1); - } - } - } - - &--link { - transition: color 0.2s; - - &:not(&--disabled):not(:hover) { - color: $lbry-teal-5; - - [data-mode="dark"] & { - color: $lbry-teal-3; - } - } - - &:not(&--disabled):hover { - color: $lbry-teal-3; - - [data-mode="dark"] & { - color: $lbry-teal-4; - } - } - } - - &--primary { - padding: var(--spacing-xs --spacing-s); // 0.5rem 1rem; - align-self: center; // fixes buttons next to tall elements inside one with `display: flex` - border-radius: 1rem; - color: $lbry-white; - transition: background-color 0.2s; - - &:not(:hover) { - background-color: $lbry-teal-5; - } - - &:hover { - background-color: $lbry-teal-3; - - [data-mode="dark"] & { - background-color: $lbry-teal-4; - } - } - } - - &--uppercase { - text-transform: uppercase; +.button--alt { + &:hover { + text-decoration: underline; } } + +.button--constrict { + @include constrict(20vw); +} + +.button--disabled { + opacity: 0.3; +} + +.button--icon { + width: 5rem; height: 5rem; + + background-repeat: no-repeat; + background-size: 50%; + border-radius: 50%; + color: $lbry-white; + transition: background-color 0.2s; + + &:not(:hover) { + background-color: rgba($lbry-black, 0.7); + } + + &:hover { + background-color: $lbry-green-3; + } + + &.button--play { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E"); + background-position: calc(50% + 0.1rem) center; + } + + &.button--view { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='none' fill-rule='evenodd'%3E %3Cpath d='M2, 12 C2, 12 5, 5 12, 5 C19, 5 22, 12 22, 12 C22, 12 19, 19 12, 19 C5, 19 2, 12 2, 12 Z' stroke-linejoin='round'/%3E %3Ccircle cx='12' cy='12' r='3'/%3E %3Cpath d='M12, 5 L12, 3' stroke-linecap='round'/%3E %3Cpath d='M18, 6.5 L19, 5' stroke-linecap='round'/%3E %3Cpath d='M21, 10 L22.5, 9' stroke-linecap='round'/%3E %3Cpath d='M1.5, 10 L3, 9' stroke-linecap='round' transform='translate(2.250000, 9.500000) scale(1, -1) translate(-2.250000, -9.500000)'/%3E %3Cpath d='M5, 6.5 L6, 5' stroke-linecap='round' transform='translate(5.500000, 5.750000) scale(-1, 1) translate(-5.500000, -5.750000)'/%3E %3C/g%3E %3C/svg%3E"); + background-position: center calc(50% + 0.1rem); + } +} + +.button--inverse { + padding: var(--spacing-xs --spacing-s); // 0.5rem 1rem; + border: 1px solid $lbry-gray-1; + border-radius: 1rem; + color: inherit; + transition: background-color 0.2s; + + [data-mode="dark"] & { + border-color: rgba($lbry-white, 0.1); + } + + &:not(:hover) { + background-color: transparent; + } + + &:hover { + background-color: $lbry-gray-1; + + [data-mode="dark"] & { + background-color: rgba($lbry-white, 0.1); + } + } +} + +.button--link { + transition: color 0.2s; + + &:not(&--disabled):not(:hover) { + color: $lbry-teal-5; + + [data-mode="dark"] & { + color: $lbry-teal-3; + } + } + + &:not(&--disabled):hover { + color: $lbry-teal-3; + + [data-mode="dark"] & { + color: $lbry-teal-4; + } + } +} + +.button--primary { + padding: var(--spacing-xs --spacing-s); // 0.5rem 1rem; + align-self: center; // fixes buttons next to tall elements inside one with `display: flex` + border-radius: 1rem; + color: $lbry-white; + transition: background-color 0.2s; + + &:not(:hover) { + background-color: $lbry-teal-5; + } + + &:hover { + background-color: $lbry-teal-3; + + [data-mode="dark"] & { + background-color: $lbry-teal-4; + } + } +} + +.button--uppercase { + text-transform: uppercase; +} diff --git a/sass/media/_index.scss b/sass/media/_index.scss index c096f6a..e9736f0 100644 --- a/sass/media/_index.scss +++ b/sass/media/_index.scss @@ -26,165 +26,167 @@ .media { position: relative; +} - // M O D I F I E R S - &--large { - display: flex; - .media__info { - width: calc(100% - 20rem); - margin-left: var(--spacing-s); // 1rem; - } +// M O D I F I E R S - .media__thumb { - width: 40rem; - margin-bottom: var(--spacing-s); // 1rem; - } +.media--large { + display: flex; + + .media__info { + width: calc(100% - 20rem); + margin-left: var(--spacing-s); // 1rem; } - &--placeholder { - > * { - @include placeholder; - } - - .media__channel, - .media__date, - .media__title { - min-height: 1rem; - } - - .media__channel { - width: 70%; - } - - .media__date { - width: 30%; - } - - .media__title { - width: 100%; - } - } - - &--small { - display: flex; - justify-content: space-between; - - &:not(:last-of-type) { - margin-bottom: var(--spacing-s); // 1rem; - } - - .media__info { - width: 50%; - padding-left: var(--spacing-s); // 1rem; - } - - .media__properties { - bottom: -1.5rem; left: calc(-100% - 1.5rem); - position: absolute; - } - - .media__thumb { - width: 50%; - } - - .media__title { - height: 3rem; - line-height: 1.33; - } - } - - &--wide { // .media--search-result - display: flex; - - &:not(:last-of-type) { - margin-bottom: var(--spacing-m); // 1.5rem; - } - - .media__info { - width: calc(100% - 20rem); - margin-left: var(--spacing-s); // 1rem; - } - - .media__properties { - bottom: -5.5rem; left: -20rem; - position: absolute; - } - - .media__text { // .media__subtext - padding-top: var(--spacing-s); // 1rem; - } - - .media__thumb { - width: 20rem; - } - - .media__title { - font-size: 1.5rem; - } - } - - - - // C H I L D R E N - - &__actions { - display: flex; - padding-top: var(--spacing-m); // 2rem; - padding-bottom: var(--spacing-m); // 2rem; - } - - &__content { // sass-lint:disable-line no-empty-rulesets - } - - &__date { // sass-lint:disable-line no-empty-rulesets - } - - &__info { - word-wrap: break-word; - - [data-mode="dark"] & { - border-color: rgba($lbry-gray-5, 0.2); - } - } - - &__message { - padding: var(--spacing-s); // 1rem; - white-space: normal; - } - - &__properties { - vertical-align: top; - - > *:not(:last-child) { - margin-right: var(--spacing-xs); // 0.5rem; - } - - &:not(:empty) { - display: inline-block; - } - } - - &__property { // sass-lint:disable-line no-empty-rulesets - } - - &__subtitle { - position: relative; - } - - &__text { - [data-mode="dark"] & { - color: $lbry-white; - } - } - - &__thumb { - @include thumbnail; - } - - &__title { - font-weight: 600; - white-space: normal; + .media__thumb { + width: 40rem; + margin-bottom: var(--spacing-s); // 1rem; } } + +.media--placeholder { + > * { + @include placeholder; + } + + .media__channel, + .media__date, + .media__title { + min-height: 1rem; + } + + .media__channel { + width: 70%; + } + + .media__date { + width: 30%; + } + + .media__title { + width: 100%; + } +} + +.media--small { + display: flex; + justify-content: space-between; + + &:not(:last-of-type) { + margin-bottom: var(--spacing-s); // 1rem; + } + + .media__info { + width: 50%; + padding-left: var(--spacing-s); // 1rem; + } + + .media__properties { + bottom: -1.5rem; left: calc(-100% - 1.5rem); + position: absolute; + } + + .media__thumb { + width: 50%; + } + + .media__title { + height: 3rem; + line-height: 1.33; + } +} + +.media--wide { // .media--search-result + display: flex; + + &:not(:last-of-type) { + margin-bottom: var(--spacing-m); // 1.5rem; + } + + .media__info { + width: calc(100% - 20rem); + margin-left: var(--spacing-s); // 1rem; + } + + .media__properties { + bottom: -5.5rem; left: -20rem; + position: absolute; + } + + .media__text { // .media__subtext + padding-top: var(--spacing-s); // 1rem; + } + + .media__thumb { + width: 20rem; + } + + .media__title { + font-size: 1.5rem; + } +} + + + +// C H I L D R E N + +.media__actions { + display: flex; + padding-top: var(--spacing-m); // 2rem; + padding-bottom: var(--spacing-m); // 2rem; +} + +.media__content { // sass-lint:disable-line no-empty-rulesets +} + +.media__date { // sass-lint:disable-line no-empty-rulesets +} + +.media__info { + word-wrap: break-word; + + [data-mode="dark"] & { + border-color: rgba($lbry-gray-5, 0.2); + } +} + +.media__message { + padding: var(--spacing-s); // 1rem; + white-space: normal; +} + +.media__properties { + vertical-align: top; + + > *:not(:last-child) { + margin-right: var(--spacing-xs); // 0.5rem; + } + + &:not(:empty) { + display: inline-block; + } +} + +.media__property { // sass-lint:disable-line no-empty-rulesets +} + +.media__subtitle { + position: relative; +} + +.media__text { + [data-mode="dark"] & { + color: $lbry-white; + } +} + +.media__thumb { + @include thumbnail; +} + +.media__title { + font-weight: 600; + white-space: normal; +}