genemecija/learn-morse-code
1
0
Fork 0
mirror of https://github.com/genemecija/learn-morse-code.git synced 2026-04-08 15:54:12 +00:00
Code Issues Projects Releases Packages Wiki Activity

Added paddles for electronic key

Browse source
This commit is contained in:
Gene Mecija 2020-01-18 02:38:21 -08:00
parent d681c3d237
commit ee4f87ea35
11 changed files with 213 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/scss/App.scss
View file

@ -2,6 +2,7 @@ $main-bg-color: #FFF;
$main-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
$main-border-radius: 0px;
$border-radius-neumorphic: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15);
$border-radius-neumorphic-active: 0 15px 20px rgba(0, 0, 0, 0.015), inset 0px -2px 5px rgb(255, 255, 255), inset 0px 2px 5px rgba(0, 0, 0, 0.15);
html, body {
margin: 0px;
@ -39,7 +40,8 @@ html, body {
width: 450px;
display: flex;
justify-content: space-evenly;
align-self: center;
position: absolute;
align-self: left;
flex-wrap: wrap;
div {
@ -63,13 +65,48 @@ html, body {
}
#morseButton {
width: 100px !important;
width: 100px;
height: 100px;
margin: 30px;
background: goldenrod;
border-radius: 50%;
// background: goldenrod;
border-radius: 50px;
align-self: center;
display: flex;
justify-content: center;
align-items: center;
transition: all 500ms ease-in-out;
}
#morseButton.showPaddles {
width: 239px;
background: transparent;
box-shadow: 0px 0px 0px transparent;
}
.paddle {
width: 100px;
height: 100px;
background: goldenrod;
margin: 0px;
border: 0px;
transition: all 500ms ease-in-out;
}
.paddle#left {
border-radius: 50px 0 0 50px;
}
.paddle#right {
border-radius: 0 50px 50px 0;
}
.paddle.showPaddles {
width: 250px;
height: 100px;
}
.paddle#left.showPaddles{
margin-right: 7px;
}
.paddle#right.showPaddles{
margin-left: 7px;
}
#challengeWord {
display: flex;
justify-content: center;