슬라이더 양쪽 버튼에 그림자를 넣습니다.#45 (#58)

parti-coop · Feb 17, 2021 · 7215586 · 7215586
1 parent 5026ced
commit 7215586
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/app/assets/stylesheets/parti.scss b/app/assets/stylesheets/parti.scss
@@ -382,6 +382,20 @@ footer{
   border-color: #7d7d7d;
 }
 
+.icon-shadow-top{
+  margin-top: -3px;
+}
+
+.prev-icon-shadow{
+  margin-right: -24px;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
+}
+
+.next-icon-shadow{
+  margin-right: -16px;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
+}
+
 @media (min-width: 768px){
   .navbar{
     padding: 1rem 1.5rem;

diff --git a/app/views/pages/home.html.haml b/app/views/pages/home.html.haml
@@ -24,9 +24,12 @@
           %h2.badge-primary
             = Post.find(2).title
     %a.carousel-control-prev{"data-bs-slide" => "prev", :href => "#introSlide", :role => "button"}
-      %span.carousel-control-prev-icon{"aria-hidden" => "true"}
+      %span.carousel-control-prev-icon.prev-icon-shadow{"aria-hidden" => "true"}
+      %span.carousel-control-prev-icon.icon-shadow-top{"aria-hidden" => "true"}
+
     %a.carousel-control-next{"data-bs-slide" => "next", :href => "#introSlide", :role => "button"}
-      %span.carousel-control-next-icon{"aria-hidden" => "true"}
+      %span.carousel-control-next-icon.next-icon-shadow{"aria-hidden" => "true"}
+      %span.carousel-control-next-icon.icon-shadow-top{"aria-hidden" => "true"}
 
 
 %section.my-5