Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

SharePrompt styles based on rem

Browse source
This commit is contained in:
svetlagasheva 2019-09-30 16:39:46 +03:00
parent 16f4b3b5fd
commit fd197e4e9d
1 changed files with 55 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
src/common/SharePrompt/styles.less
View file

@ -1,87 +1,84 @@
.share-prompt-container {
--share-modal-width: 350px;
--spacing: 20px;
font-size: 14px;
}
.share-prompt-container {
padding: calc(var(--spacing) * 0.5);
width: var(--share-modal-width);
color: var(--color-surfacelighter);
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
padding: 2.4rem 0;
background-color: var(--color-surfacelighter);
.close-button-container {
display: flex;
flex-direction: row;
justify-content: flex-end;
.icon {
padding: 0.2em;
width: 1.2em;
height: 1.2em;
fill: var(--color-surfacedark);
cursor: pointer;
&:hover {
fill: var(--color-surface);
}
}
&:focus {
.icon {
background-color: var(--color-surfacelight);
}
}
position: absolute;
top: 0.4rem;
right: 0.4rem;
z-index: 1;
width: 2rem;
height: 2rem;
padding: 0.4rem;
&:hover {
.icon {
background-color: transparent;
}
background-color: var(--color-surfacelight);
}
.icon {
display: block;
width: 100%;
height: 100%;
fill: var(--color-backgrounddarker);
}
}
.share-prompt-content {
padding: 0 var(--spacing) calc(var(--spacing) * 1.2) var(--spacing);
padding: 0 2.4rem;
.share-prompt-label {
font-size: 1.1em;
font-size: 1.3rem;
color: var(--color-backgrounddarker);
}
.buttons-container {
padding: var(--spacing) 0;
flex: none;
align-self: stretch;
display: flex;
flex-direction: row;
margin: 1.4rem 0;
.button-container {
flex: 1;
height: 3.2em;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 0.8em;
color: var(--color-surfacelighter);
cursor: pointer;
padding: 0.6rem 1rem;
.icon {
margin-right: 0.6em;
width: 1.4em;
height: 1.4em;
flex: none;
width: 1.4rem;
height: 1.4rem;
margin-right: 0.6rem;
fill: var(--color-surfacelighter);
}
&:focus, &:hover {
.label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
font-size: 0.8rem;
font-weight: 500;
color: var(--color-surfacelighter);
text-align: center;
}
&:hover, &:focus {
filter: brightness(1.2);
}
&:not(:last-child) {
margin-right: 2em;
margin-right: 2rem;
}
}
.facebook-button {
background-color: var(--color-secondary);
background-color: var(--color-facebook);
}
.twitter-button {
@ -92,29 +89,28 @@
.url-container {
display: flex;
flex-direction: row;
border: calc(var(--focusable-border-size) * 0.5) solid var(--color-surface);
border: calc(var(--focus-outline-size) * 0.5) solid var(--color-surface);
.url-content {
flex: 4;
padding: calc(var(--spacing) * 0.5);
font-size: 0.9em;
text-align: center;
min-width: 12rem;
padding: 0.6rem 1rem;
font-size: 0.9rem;
color: var(--color-surfacedark);
text-align: center;
}
.copy-button {
flex: 1;
padding: calc(var(--spacing) * 0.5);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0.6rem 1rem;
background-color: var(--color-surface);
cursor: pointer;
.icon {
margin-right: 0.4em;
width: 1em;
height: 1em;
width: 1.4rem;
height: 1.4rem;
margin-right: 0.6rem;
fill: var(--color-surfacedarker);
}
@ -122,8 +118,8 @@
color: var(--color-surfacedarker);
}
&:focus, &:hover {
background-color: var(--color-surface60);
&:hover, &:focus {
filter: brightness(1.2);
}
}
}