From c4bc0d2d9abae5ea2812b68600a70e42a7c3821c Mon Sep 17 00:00:00 2001 From: Mariela Bonilla Date: Sat, 24 Jul 2021 15:05:28 -0600 Subject: [PATCH] add estilos para cards --- .../encuesta/list/encuesta.component.html | 2 +- src/main/webapp/app/home/home.component.html | 11 +- src/main/webapp/app/home/home.component.scss | 8 +- .../app/layouts/footer/footer.component.html | 5 +- .../paper-dashboard/_datasurvey-list.scss | 113 ++++++++++++++++++ 5 files changed, 130 insertions(+), 9 deletions(-) diff --git a/src/main/webapp/app/entities/encuesta/list/encuesta.component.html b/src/main/webapp/app/entities/encuesta/list/encuesta.component.html index 92994d5..4aeccde 100644 --- a/src/main/webapp/app/entities/encuesta/list/encuesta.component.html +++ b/src/main/webapp/app/entities/encuesta/list/encuesta.component.html @@ -78,7 +78,7 @@
-
+
@@ -34,7 +34,7 @@
Somos su mejor aliado para la recolección de información, a través de nuestra plataforma.
-
+
@@ -95,7 +95,12 @@

Encuestas

-
+
{{ encuesta.nombre }}
diff --git a/src/main/webapp/app/home/home.component.scss b/src/main/webapp/app/home/home.component.scss index 5e29cea..d56f7c7 100644 --- a/src/main/webapp/app/home/home.component.scss +++ b/src/main/webapp/app/home/home.component.scss @@ -155,7 +155,7 @@ Main page styles box-shadow: 0 0.125rem 0.25rem 0 rgba(33, 40, 50, 0.2); } -.card.lift { +/*.card.lift { text-decoration: none; color: inherit; } @@ -194,7 +194,7 @@ Main page styles border-bottom-right-radius: 0.25rem; top: 0.5rem; left: 0; -} +}*/ .border-cyan { border-color: #00cfd5 !important; @@ -268,7 +268,7 @@ Main page styles background-image: linear-gradient(135deg, #1c44b2 0%, #00b88d 100%) !important; } -.card .entity-icon--star { +/*.card .entity-icon--star { color: #ffcc47; margin-right: 0.2rem; } @@ -293,7 +293,7 @@ Main page styles .card .btn-card { padding: 11px 10px !important; -} +}*/ .accordion-button { position: relative; diff --git a/src/main/webapp/app/layouts/footer/footer.component.html b/src/main/webapp/app/layouts/footer/footer.component.html index 83d0374..f5fbd22 100644 --- a/src/main/webapp/app/layouts/footer/footer.component.html +++ b/src/main/webapp/app/layouts/footer/footer.component.html @@ -1,5 +1,8 @@ diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss index 7bd5f80..058a1c3 100644 --- a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss +++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss @@ -131,3 +131,116 @@ background-color: #e8f0fe !important; } } + +/** + Cards +**/ +.lift { + box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15); + transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} +.lift:hover { + transform: translateY(-0.3333333333rem); + box-shadow: 0 0.5rem 2rem 0 rgba(33, 40, 50, 0.25); +} +.lift:active { + transform: none; + box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15); +} + +.lift-sm { + box-shadow: 0 0.125rem 0.25rem 0 rgba(33, 40, 50, 0.2); +} +.lift-sm:hover { + transform: translateY(-0.1666666667rem); + box-shadow: 0 0.25rem 1rem 0 rgba(33, 40, 50, 0.25); +} +.lift-sm:active { + transform: none; + box-shadow: 0 0.125rem 0.25rem 0 rgba(33, 40, 50, 0.2); +} + +.card-encuesta { + border-radius: 12px; + background-color: #ffffff; + margin-bottom: 20px; + position: relative; + border: 0 none; +} + +.card-encuesta.lift { + text-decoration: none; + color: inherit; +} + +.card-flag { + position: absolute; + font-size: 0.7rem; + padding: 0.3rem 0.5rem; + line-height: 1; +} + +.card-flag-dark { + background-color: rgba(33, 40, 50, 0.7); + color: #fff; +} + +.card-flag-light { + background-color: rgba(255, 255, 255, 0.7); + color: #69707a; +} + +.card-flag-lg { + font-size: 0.9rem; + padding: 0.5rem 0.65rem; +} + +.card-flag-top-right { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + top: 0.5rem; + right: 0; +} + +.card-flag-top-left { + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + top: 0.5rem; + left: 0; +} + +.card-encuesta .entity-icon--star { + color: #ffcc47; + margin-right: 0.2rem; +} + +.card-encuesta .card-title { + font-size: 2em; +} + +.card-encuesta .tag { + font-size: 0.8rem; + color: #f8f8f8; + margin-top: 0.5rem; + padding: 0.2rem 1.5rem; + background-color: #2962ff94; + border-radius: 15px; +} + +.card-encuesta .subtitle { + color: rgba(0, 0, 0, 0.54); + font-size: 0.9rem; +} + +.card-encuesta .btn-card { + padding: 11px 10px !important; +} + +.border-cyan { + border-color: #00cfd5 !important; +} + +.py-10 { + padding-top: 6rem !important; + padding-bottom: 6rem !important; +}