Implement edge highlighting and finished state
This commit is contained in:
parent
3633b32b3f
commit
748e1e0739
8 changed files with 141 additions and 11 deletions
42
styles.scss
42
styles.scss
|
|
@ -149,6 +149,8 @@ button {
|
|||
z-index: 10;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
min-width: 60%;
|
||||
max-width: 90%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #fff;
|
||||
padding: 2.5rem 4rem;
|
||||
|
|
@ -157,10 +159,44 @@ button {
|
|||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
|
||||
#info-message-headline {
|
||||
margin: 0;
|
||||
padding-bottom: 1rem;
|
||||
#info-message-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 25px;
|
||||
|
||||
#info-message-img {
|
||||
display: none;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#info-message-headline {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#info-message-link {
|
||||
display: none;
|
||||
min-width: 20%;
|
||||
padding: 6px 15px;
|
||||
background-color: transparent;
|
||||
border: 2px solid black;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
float: right;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
#info-message-close {
|
||||
|
|
|
|||
Reference in a new issue