diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte index 5a8f823..ecda213 100644 --- a/src/routes/photos.svelte +++ b/src/routes/photos.svelte @@ -296,9 +296,10 @@
diff --git a/src/style/_base.scss b/src/style/_base.scss index 9529854..ac63b7e 100644 --- a/src/style/_base.scss +++ b/src/style/_base.scss @@ -23,7 +23,7 @@ strong { em { font-style: normal; } -figure, p, dl, dt, dd, ul, li { +figure, p, dl, dt, dd, ul, ol, li { margin: 0; padding: 0; } @@ -37,6 +37,10 @@ button { background: none; border: none; cursor: pointer; + + &[disabled] { + cursor: not-allowed; + } } // Accessibility outline diff --git a/src/style/atoms/_button.scss b/src/style/atoms/_button.scss index 7108867..2d7aff8 100644 --- a/src/style/atoms/_button.scss +++ b/src/style/atoms/_button.scss @@ -22,7 +22,10 @@ margin-right: 12px; } - // Size variants + + /* + ** Size variants + */ // Small &--small { height: 40px; @@ -34,10 +37,34 @@ } } - // Color Variants + // Large + &--large { + height: 56px; + font-size: rem(16px); + + @include bp (sm) { + height: 72px; + height: 72px; + padding: 0 40px; + font-size: rem(18px); + } + } + + + /* + ** Color Variants + */ // Pink &--pink { background: $color-secondary-light; + } + &--beige { + $color-button: #F2D3B8; + background: $color-button; + &[disabled] { + background: none; + border: 2px solid darken($color-button, 2); + } } } \ No newline at end of file diff --git a/src/style/pages/_location.scss b/src/style/pages/_location.scss index fa8b816..4faf0b7 100644 --- a/src/style/pages/_location.scss +++ b/src/style/pages/_location.scss @@ -257,11 +257,6 @@ &__more { color: $color-secondary !important; } - - // Disabled state - &[disabled] { - cursor: not-allowed; - } } // Message diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss index a8cf064..06c1b18 100644 --- a/src/style/pages/_photos.scss +++ b/src/style/pages/_photos.scss @@ -388,25 +388,12 @@ // See More Photos .button { - $color-button: #F2D3B8; grid-column: span var(--columns); grid-row: 1; margin: 0 auto; - height: 56px; - background-color: $color-button; - font-size: rem(16px); - border: none; @include bp (sm) { grid-column: 6 / span 12; - height: 72px; - padding: 0 40px; - font-size: rem(18px); - } - - &[disabled] { - background: none; - border: 2px solid darken($color-button, 2); } }