From 3efa654afbbe8c70d8ca64300b65d0bf6a5cfd12 Mon Sep 17 00:00:00 2001
From: Jacek Lebioda <jacek.lebioda@uni.lu>
Date: Thu, 17 Feb 2022 16:13:16 +0100
Subject: [PATCH] feat: updated lap css
---
_sass/elixir/_lap.scss | 245 ++++++++++++++++++++---------------------
elixir-theme.gemspec | 2 +-
2 files changed, 123 insertions(+), 124 deletions(-)
diff --git a/_sass/elixir/_lap.scss b/_sass/elixir/_lap.scss
index bde4de3..1c466a4 100644
--- a/_sass/elixir/_lap.scss
+++ b/_sass/elixir/_lap.scss
@@ -1,84 +1,120 @@
-#lap-cookies-banner {
- position: fixed;
- bottom: 0;
- background-color: #fff;
- padding-top: 1em;
- padding-bottom: 1em;
- z-index: 1000;
- left: 0;
- text-align: center;
- border-top: 1px solid #023452;
- width: 100%;
- display: none;
-
- /* hidden by default */
-}
+$primary-color: #198cdc;
+$background-color: #fff;
-#lap-cookies-banner .banner-intro {
+#lap-cookies-banner {
+ position: fixed;
+ bottom: 0;
+ background-color: $background-color;
+ padding-top: 1em;
+ padding-bottom: 1em;
+ z-index: 1000;
+ left: 0;
+ text-align: center;
+ border-top: 1px solid $primary-color;
+ width: 100%;
+ /* hidden by default */
+ transition : 180ms transform ease-out;
+ transform : translateY(+100%);
+ flex-direction: column;
+
+ &.shown {
+ transform : translateY(0);
+ transition : 150 transform ease-in;
+ }
+
+ .banner-intro {
width: 40%;
position: relative;
left: 30%;
text-align: left;
-}
-#lap-cookies-banner .banner-img {
- width: 90px;
- padding-top: 0;
- height: 90px;
+ .lap-close {
+ opacity: 0.5;
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+
+ &:hover {
+ opacity: 1;
+ }
+
+ &:before, &:after {
+ position: absolute;
+ left: 5px;
+ content: ' ';
+ height: 15px;
+ width: 3px;
+ background-color: $primary-color;
+ }
+
+ &:before {
+ transform: rotate(45deg);
+ }
+
+ &:after {
+ transform: rotate(-45deg);
+ }
+ }
+ }
+
+ .banner-img {
+ width: 50px;
position: absolute;
- padding-left: 10px;
-}
+ padding-top: 5px;
+ height: 50px;
+ }
-#lap-cookies-banner .banner-title {
- padding-left: 110px;
-}
+ .banner-title {
+ font-size: 120%;
+ font-weight: bold;
+ text-align: left;
+ padding-left: 60px;
+ }
-#lap-cookies-banner .banner-text {
- padding-left: 110px;
- padding-bottom: 1em;
-}
+ .banner-text {
+ min-height: 40px;
+ padding-left: 60px;
+ font-size: 80%;
+ text-align: left;
+ }
-#lap-cookies-banner .banner-buttons {
- padding-top: 5px;
- height: 20px;
+ .banner-buttons {
+ padding-top: 25px;
margin-bottom: 10px;
-}
-#lap-cookies-banner .close-button {
- position: absolute;
- left: 100%;
-}
+ .lap-accept,
+ .lap-refuse,
+ .lap-cookies-more,
+ .btn.active {
+ border: 1px solid $primary-color;
+ font-weight: bold;
+ background-color: $primary-color;
+ color: $background-color !important;
+ box-sizing: border-box;
+ transition: background-color 350ms ease-in-out;
+ }
-#lap-cookies-banner .banner-buttons .lap-accept,
-#lap-cookies-banner .banner-buttons .lap-refuse,
-#lap-cookies-banner .banner-buttons .lap-cookies-more,
-#lap-cookies-banner .banner-buttons .btn.active {
- border: 1px solid #023452;
- font-weight: bold;
- background-color: #023452;
- color: #ffffff !important;
- box-sizing: border-box;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
-}
+ .lap-accept:hover,
+ .lap-refuse:hover,
+ .lap-cookies-more:hover,
+ .btn.selected {
+ background: white;
+ color: $primary-color !important;
+ border: 1px solid currentColor;
+ box-sizing: border-box;
+ text-decoration: none;
+ }
+ }
-#lap-cookies-banner .banner-buttons .lap-accept:hover,
-#lap-cookies-banner .banner-buttons .lap-refuse:hover,
-#lap-cookies-banner .banner-buttons .lap-cookies-more:hover,
-#lap-cookies-banner .banner-buttons .btn.selected {
- background: white;
- color: #023452 !important;
- border: 1px solid #023452;
- box-sizing: border-box;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- text-decoration: none;
-}
+ .close-button {
+ position: absolute;
+ left: 100%;
+ cursor: pointer;
+ }
-#lap-cookies-banner .btn {
+ .btn {
text-decoration: none;
display: inline-block;
- margin-bottom: 0;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
@@ -94,75 +130,38 @@
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
-}
+ }
-#lap-cookies-banner .banner-checkboxes {
+ .banner-checkboxes {
font-size: 80%;
margin-top: 1em;
-}
+ }
-#lap-cookies-banner .checkbox-label {
+ .checkbox-label {
margin-left: 0.3em;
margin-right: 1.5em;
top: -0.2em;
position: relative;
-}
+ }
-@media(max-width: 500px) {
- #lap-cookies-banner {
- position: fixed;
- bottom: 0;
- background-color: #fff;
- padding-top: 1em;
- padding-bottom: 1em;
- z-index: 1000;
- left: 0;
- text-align: center;
- border-top: 1px solid #023452;
- width: 100%;
- display: none;
- height: 280px;
- overflow: auto;
- /* hidden by default */
- }
-
- #lap-cookies-banner .banner-intro {
- width: 60%;
- position: relative;
- left: 20%;
- text-align: left;
- }
-}
-
-@media(max-width: 1100px) {
- #lap-cookies-banner .banner-intro {
- width: 90%;
- position: relative;
- left: 5%;
- text-align: left;
- }
- #lap-cookies-banner .banner-buttons {
- padding-top: 5px;
- height: 60px;
- margin-bottom: 10px;
+ @media(max-width: 500px) {
+ font-size: 80%;
+ .btn {
+ font-size: 80%;
}
-}
-
-@media(max-width: 1600px) {
- #lap-cookies-banner .banner-intro {
- width: 60%;
- position: relative;
- left: 20%;
- text-align: left;
+ .banner-intro {
+ width: 80%;
+ position: relative;
+ left: 10%;
+ text-align: left;
}
-}
-
-/* ultra-wide screen */
-@media(min-width: 2400px) {
- #lap-cookies-banner .banner-intro {
- position: relative;
- text-align: left;
- max-width: 800px;
- left: 35%;
+ }
+ @media(max-width: 1000px) {
+ .banner-intro {
+ width: 80%;
+ position: relative;
+ left: 10%;
+ text-align: left;
}
+ }
}
diff --git a/elixir-theme.gemspec b/elixir-theme.gemspec
index 78ea007..1246c9e 100644
--- a/elixir-theme.gemspec
+++ b/elixir-theme.gemspec
@@ -2,7 +2,7 @@
Gem::Specification.new do |spec|
spec.name = "jekyll-elixir-theme"
- spec.version = "0.10.5"
+ spec.version = "0.10.6"
spec.authors = ["jacek.lebioda"]
spec.email = ["jacek.lebioda@uni.lu"]
--
GitLab