test

Author: Nkmai

src/app/styles/components/_buttons.scss

@@ -1,94 +1,100 @@
 .empty-button {
-  @extend %button-shared;
-  width: 120px;
+	@extend %button-shared;
+	width: 120px;
 }
 
 .state-dropdown {
-  width: 240px; 
-  margin-left: 20px; 
+	width: 240px;
+	margin-left: 20px;
 }
 
 .action-component:hover .time-button {
-  display: none;
+	display: none;
 }
 
 .action-component:hover .jump-button {
-  opacity: 1;
-  transform: rotateX(0deg);
-  transition: opacity 300ms, transform 0.15s linear;
+	opacity: 1;
+	transform: rotateX(0deg);
+	transition: opacity 300ms, transform 0.15s linear;
 }
 
 .time-button {
-  outline: none;
-  height: 20px;
-  margin-bottom: 8px;
-  width: 70px;
-  border: none;
-  border-radius: 3px;
-  background-color: #565A61;
-  font: normal 11px monaco, Consolas, "Lucida Console", monospace, Arial, sans-serif;
-  color: #B0B0B0;
+	outline: none;
+	height: 20px;
+	margin-bottom: 8px;
+	width: 70px;
+	border: none;
+	border-radius: 3px;
+	background-color: #565a61;
+	font: normal 11px monaco, Consolas, 'Lucida Console', monospace, Arial,
+		sans-serif;
+	color: #b0b0b0;
 }
 
 .jump-button {
-  @extend %button-shared;
-  margin-bottom: 8px;
-  width: 50px;
-  opacity: 0;
-  transform: rotateX(90deg);
-  transition: opacity 300ms, transform 0.15s linear;
+	@extend %button-shared;
+	margin-bottom: 8px;
+	width: 50px;
+	opacity: 0;
+	transform: rotateX(90deg);
+	transition: opacity 300ms, transform 0.15s linear;
 }
 
 .jump-button:hover {
-  // remove the blue border when button is clicked
-  background-color: $highlight-color;
+	// remove the blue border when button is clicked
+	background-color: $highlight-color;
 }
 
 .empty-button:hover {
-  background-color: $highlight-color;
+	background-color: $highlight-color;
 }
 
 .play-button {
-  @extend %button-shared;
-  width: 100px;
-  margin: 0 1% 0 2%;
+	@extend %button-shared;
+	width: 100px;
+	margin: 0 1% 0 2%;
 }
 
 .backward-button {
-  @extend %button-shared;
-  width: 30px;
-  margin: 7px;
+	@extend %button-shared;
+	width: 30px;
+	margin: 7px;
 }
 
 .forward-button {
-  @extend %button-shared;
-  width: 30px;
-  margin: 7px;
+	@extend %button-shared;
+	width: 30px;
+	margin: 7px;
 }
 
 .import-button,
 .export-button,
 .lock-button,
 .pause-button,
 .persist-button {
-  @extend %button-shared;
+	@extend %button-shared;
 }
 
 %button-shared {
-  outline: none;
-  background-color: $brand-color;
-  color: white;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 20px;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: 3px;
-  cursor: pointer;
-  line-height: 1.5em;
-  font: normal 13px monaco, Consolas, "Lucida Console", monospace, Arial, sans-serif;
-  font-size: $button-text-size;
+	outline: none;
+	// background-color: $brand-color;
+	color: white;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 20px;
+	// border-style: solid;
+	// border-width: 1px;
+	// border-radius: 3px;
+	cursor: pointer;
+	// line-height: 1.5em;
+	font: normal 13px monaco, Consolas, 'Lucida Console', monospace, Arial,
+		sans-serif;
+	font-size: $button-text-size;
+	padding: 1em;
+	border-radius: 51px;
+	background: #00fbff;
+	box-shadow: inset -30px -30px 100px #00a1a3, inset 30px 30px 100px #00ffff;
 
-  @extend %disable-highlight;
+	@extend %disable-highlight;
 }