diff --git a/src/components/header/AutocompleteDropdown.vue b/src/components/header/AutocompleteDropdown.vue index eb2e0c7..13c0396 100644 --- a/src/components/header/AutocompleteDropdown.vue +++ b/src/components/header/AutocompleteDropdown.vue @@ -214,7 +214,9 @@ cursor: pointer; white-space: nowrap; - transition: color 0.1s ease, fill 0.4s ease; + transition: + color 0.1s ease, + fill 0.4s ease; span { overflow-x: hidden; diff --git a/src/components/header/NavigationIcon.vue b/src/components/header/NavigationIcon.vue index 92b8dc4..fa4edd1 100644 --- a/src/components/header/NavigationIcon.vue +++ b/src/components/header/NavigationIcon.vue @@ -47,8 +47,13 @@ padding: 1rem 0.15rem; text-align: center; background-color: var(--background-color-secondary); - transition: transform 0.3s ease, color 0.3s ease, stoke 0.3s ease, - fill 0.3s ease, background-color 0.5s ease; + transition: + transform 0.3s ease, + color 0.3s ease, + stoke 0.3s ease, + fill 0.3s ease, + background-color 0.5s ease; + transition: all 0.3s ease; &:hover { transform: scale(1.05); diff --git a/src/components/torrent/TorrentSearchResults.vue b/src/components/torrent/TorrentSearchResults.vue index 3e28d02..55fb635 100644 --- a/src/components/torrent/TorrentSearchResults.vue +++ b/src/components/torrent/TorrentSearchResults.vue @@ -113,13 +113,8 @@ margin: 1rem 0; } - .container { - background-color: $background-color; - } - .no-results { display: flex; - padding-bottom: 2rem; justify-content: center; flex-direction: column; width: 100%; diff --git a/src/components/ui/SeasonedButton.vue b/src/components/ui/SeasonedButton.vue index c16f8e2..bba67ef 100644 --- a/src/components/ui/SeasonedButton.vue +++ b/src/components/ui/SeasonedButton.vue @@ -44,7 +44,10 @@ background: $background-color-secondary; cursor: pointer; outline: none; - transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease; + transition: + background 0.5s ease, + color 0.5s ease, + border-color 0.5s ease; @include desktop { font-size: 0.8rem; diff --git a/src/plugins/Toast/ToastComponent.vue b/src/plugins/Toast/ToastComponent.vue index ef26f20..227e10b 100644 --- a/src/plugins/Toast/ToastComponent.vue +++ b/src/plugins/Toast/ToastComponent.vue @@ -94,7 +94,9 @@ background-color: white; border-radius: 3px; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.17), 0 2px 4px 0 rgba(0, 0, 0, 0.08); + box-shadow: + 0 4px 8px 0 rgba(0, 0, 0, 0.17), + 0 2px 4px 0 rgba(0, 0, 0, 0.08); padding: 0.5rem; margin: 1rem 2rem 1rem 0.71rem; // max-width: calc(100% - 3rem); diff --git a/src/scss/media-queries.scss b/src/scss/media-queries.scss index dc355c8..d403fd7 100644 --- a/src/scss/media-queries.scss +++ b/src/scss/media-queries.scss @@ -8,72 +8,72 @@ $desktop-l-width: 1600px; $mobile-width: 768px; @mixin desktop { - @media (min-width: #{$mobile-width + 1px}) { - @content; - } + @media (min-width: #{$mobile-width + 1px}) { + @content; + } } @mixin mobile { - @media (max-width: #{$mobile-width}) { - @content; - } + @media (max-width: #{$mobile-width}) { + @content; + } } .desktop-only { - @include mobile { - display: none !important; - } + @include mobile { + display: none !important; + } } .mobile-only { - @include desktop { - display: none !important; - } + @include desktop { + display: none !important; + } } // Media @mixin mobile-only { - @media (max-width: #{$tablet-p-width - 1px}) { - @content; - } + @media (max-width: #{$tablet-p-width - 1px}) { + @content; + } } @mixin mobile-ls-min { - @media (min-width: #{$phone-xs-width}) { - @content; - } + @media (min-width: #{$phone-xs-width}) { + @content; + } } @mixin tablet-only { - @media (min-width: #{$tablet-p-width}) and (max-width: #{$desktop-width - 1px}) { - @content; - } + @media (min-width: #{$tablet-p-width}) and (max-width: #{$desktop-width - 1px}) { + @content; + } } @mixin tablet-min { - @media (min-width: #{$tablet-p-width}) { - @content; - } + @media (min-width: #{$tablet-p-width}) { + @content; + } } @mixin tablet-portrait-only { - @media (min-width: #{$tablet-p-width}) and (max-width: #{$tablet-l-width - 1px}) { - @content; - } + @media (min-width: #{$tablet-p-width}) and (max-width: #{$tablet-l-width - 1px}) { + @content; + } } @mixin tablet-landscape-min { - @media (min-width: #{$tablet-l-width}) { - @content; - } + @media (min-width: #{$tablet-l-width}) { + @content; + } } @mixin desktop-min { - @media (min-width: #{$desktop-width}) { - @content; - } + @media (min-width: #{$desktop-width}) { + @content; + } } @mixin desktop-lg-min { - @media (min-width: #{$desktop-l-width}) { - @content; - } + @media (min-width: #{$desktop-l-width}) { + @content; + } } @mixin retina { - @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { - @content; - } + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + @content; + } }