[WIP] sass(chromakeying): move chroma related button styles to button…

… partial

Change-Id: I8054b6cdbfe18e690f67be6dd5c8bdd66e48cb22

livechroma.php

@@ -66,11 +66,11 @@
 	<div class="rotarygroup" id="start">
 		<div class="top-bar">
 			<?php if (!$config['live_keying']['enabled']): ?>
-			<a href="index.php" class="<?php echo $btnClass; ?> closebtn rotaryfocus"><i class="fa fa-times"></i></a>
+			<a href="index.php" class="<?php echo $btnClass; ?> livechroma-close-btn rotaryfocus"><i class="fa fa-times"></i></a>
 			<?php endif; ?>
 
 			<?php if ($config['gallery']['enabled']): ?>
-			<a href="#" class="<?php echo $btnClass ?> gallerybtn rotaryfocus"><i class="fa fa-th"></i> <span data-i18n="gallery"></span></a>
+			<a href="#" class="<?php echo $btnClass ?> livechroma-gallery-btn rotaryfocus"><i class="fa fa-th"></i> <span data-i18n="gallery"></span></a>
 			<?php endif; ?>
 
 		</div>
@@ -117,11 +117,11 @@
 		</div>
 
 		<div class="chroma-control-bar">
-			<a href="#" class="<?php echo $btnClass; ?> takeChroma rotaryfocus"><i class="fa fa-camera"></i> <span data-i18n="takePhoto"></span></a>
+			<a href="#" class="<?php echo $btnClass; ?> takeChroma livechroma rotaryfocus"><i class="fa fa-camera"></i> <span data-i18n="takePhoto"></span></a>
 			<?php if ($config['picture']['allow_delete']): ?>
-			<a href="#" class="<?php echo $btnClass; ?> deletebtn"><i class="fa fa-trash"></i> <span data-i18n="delete"></span></a>
+			<a href="#" class="<?php echo $btnClass; ?> deletebtn livechroma"><i class="fa fa-trash"></i> <span data-i18n="delete"></span></a>
 			<?php endif; ?>
-			<a href="#" class="reloadPage <?php echo $btnClass; ?> rotaryfocus"><i class="fa fa-refresh"></i> <span data-i18n="reload"></span></a>
+			<a href="#" class="reloadPage <?php echo $btnClass; ?> livechroma rotaryfocus"><i class="fa fa-refresh"></i> <span data-i18n="reload"></span></a>
 		</div>
 	</div>
 	<div class="rotarygroup">

src/js/livechroma.js

@@ -323,14 +323,14 @@ $('.reloadPage').on('click', function (e) {
 });
 
 // Open Gallery Button
-$('.gallerybtn').on('click', function (e) {
+$('.livechroma-gallery-btn').on('click', function (e) {
     e.preventDefault();
 
     photoBooth.openGallery($(this));
 });
 
 // Close Button
-$('.closebtn').on('click', function () {
+$('.livechroma-close-btn').on('click', function () {
     location.assign('./index.php');
 });
 

src/sass/classic_live_chromakeying.scss

@@ -8,32 +8,6 @@
 @import 'partials/shutter_animation';
 @import 'vendor/photoswipe';
 
-.home {
-  position: fixed;
-  top: 1em;
-  right: 0;
-  z-index: 10;
-}
-
-.deletebtn {
-  display: inline-block;
-  visibility: hidden;
-}
-
-.gallerybtn {
-  position: fixed;
-  top: 1em;
-  left: 0;
-  z-index: 10;
-}
-
-.closebtn {
-  position: fixed;
-  top: 1em;
-  right: 0;
-  z-index: 10;
-}
-
 .top-bar {
   display: inline-block;
   width: 100%;
@@ -104,21 +78,6 @@
     }
   }
 
-  .takeChroma,
-  .reloadPage,
-  .deletebtn {
-    margin: 0.5em;
-    display: block;
-  }
-
-  .home,
-  .gallerybtn,
-  .closebtn {
-    position: relative;
-    top: 0;
-    max-width: 150px;
-  }
-
   .top-bar {
     display: block;
     position: relative;

src/sass/modern_live_chromakeying.scss

@@ -4,44 +4,6 @@
   border-radius: 4%;
 }
 
-.round-btn {
-  width: 4em;
-  height: 4em;
-}
-
-.gallerybtn {
-  position: fixed;
-  top: 1em;
-  left: 0;
-  z-index: 10;
-  margin: 10px;
-}
-
-.closebtn {
-  position: fixed;
-  top: 1em;
-  right: 0;
-  z-index: 10;
-  margin: 10px;
-}
-
-@media (max-width: 1280px) and (orientation: landscape) {
-  .takeChroma,
-  .reloadPage,
-  .deletebtn {
-    margin: auto;
-    display: inline-block;
-  }
-
-  .home,
-  .gallerybtn,
-  .closebtn {
-    position: relative;
-    top: 0;
-    max-width: 150px;
-  }
-}
-
 @media (max-height: 740px) and (orientation: landscape) {
   .backgrounds {
     &.shrinked {

src/sass/modern_squared_live_chromakeying.scss

@@ -1,39 +1,2 @@
 @import 'modern_live_chromakeying';
 @import 'partials/squared_gallery';
-
-.round-btn {
-  border: none;
-  border-radius: 15%;
-  margin: unset;
-  flex: none;
-  span {
-    display: block;
-    position: absolute;
-    bottom: 10%;
-    left: 0;
-    right: 0;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .fa {
-    top: 35%;
-  }
-}
-
-.closebtn {
-  margin: auto;
-  text-align: center;
-  span {
-    display: none;
-    bottom: unset;
-  }
-  .fa {
-    font-size: 2em;
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    -ms-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-  }
-}

src/sass/partials/_button.scss

@@ -164,6 +164,97 @@
   }
 }
 
+.livechroma-gallery-btn {
+  position: fixed;
+  top: 1em;
+  left: 0;
+
+  &.btn--classic {
+    width: auto;
+    padding: 12px 40px;
+  }
+
+  &.btn--modern,
+  &.btn--modern_squared {
+    margin: 10px;
+  }
+  @media (max-width: 1280px) and (orientation: landscape) {
+    position: relative;
+    top: 0;
+    max-width: 150px;
+  }
+}
+
+.livechroma-close-btn {
+  position: fixed;
+  top: 1em;
+  right: 0;
+
+  &.btn--classic {
+    width: auto;
+    padding: 12px 40px;
+  }
+
+  &.btn--modern {
+    margin: 10px;
+  }
+
+  &.btn--modern_squared {
+    margin: auto;
+    text-align: center;
+    span {
+      display: none;
+      bottom: unset;
+    }
+    .fa {
+      font-size: 2em;
+      margin: 0;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      -ms-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+
+.livechroma {
+  &.deletebtn {
+    display: inline-block;
+    visibility: hidden;
+  }
+
+  @media (max-width: 1280px) and (orientation: landscape) {
+    &.btn--classic {
+      &.takeChroma,
+      &.reloadPage,
+      &.deletebtn {
+        margin: 0.5em;
+        display: block;
+      }
+    }
+    &.btn--modern,
+    &.btn--modern_squared {
+      &.takeChroma,
+      &.reloadPage,
+      &.deletebtn {
+        margin: auto;
+        display: inline-block;
+      }
+    }
+  }
+}
+
+.chroma-control-bar {
+  .btn--classic {
+    &#save-chroma-btn,
+    &#print-btn,
+    &#close-btn {
+      width: auto;
+    }
+  }
+}
+
 .homebtn {
   &.btn--modern,
   &.btn--modern_squared {
@@ -272,7 +363,7 @@
     width: 4em;
     height: 4em;
   }
-  .btn--modrn_squared {
+  .btn--modern_squared {
     span {
       font-size: 1em;
     }

src/sass/partials/_modern_gallery.scss

@@ -40,13 +40,13 @@ a.gallery__close {
   border-radius: 50%;
 }
 
-.gallerybtn {
+.livechroma-gallery-btn {
   border-radius: 50%;
   left: 1em;
   margin: auto;
 }
 
-.closebtn {
+.livechroma-close-btn {
   border-radius: 50%;
   right: 1em;
   margin: auto;

src/sass/partials/_squared_gallery.scss

@@ -33,12 +33,12 @@
   border-radius: 15%;
 }
 
-.gallerybtn {
+.livechroma-gallery-btn {
   left: 1em;
   margin: auto;
 }
 
-.closebtn {
+.livechroma-close-btn {
   right: 1em;
   margin: auto;
 }