Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 23:12:13 +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-prompt-container {
--share-modal-width: 350px; position: relative;
--spacing: 20px; z-index: 0;
font-size: 14px; display: flex;
} flex-direction: column;
padding: 2.4rem 0;
.share-prompt-container {
padding: calc(var(--spacing) * 0.5);
width: var(--share-modal-width);
color: var(--color-surfacelighter);
background-color: var(--color-surfacelighter); background-color: var(--color-surfacelighter);
.close-button-container { .close-button-container {
display: flex; position: absolute;
flex-direction: row; top: 0.4rem;
justify-content: flex-end; right: 0.4rem;
z-index: 1;
.icon { width: 2rem;
padding: 0.2em; height: 2rem;
width: 1.2em; padding: 0.4rem;
height: 1.2em;
fill: var(--color-surfacedark);
cursor: pointer;
&:hover {
fill: var(--color-surface);
}
}
&:focus {
.icon {
background-color: var(--color-surfacelight);
}
}
&:hover { &:hover {
.icon { background-color: var(--color-surfacelight);
background-color: transparent; }
}
.icon {
display: block;
width: 100%;
height: 100%;
fill: var(--color-backgrounddarker);
} }
} }
.share-prompt-content { .share-prompt-content {
padding: 0 var(--spacing) calc(var(--spacing) * 1.2) var(--spacing); padding: 0 2.4rem;
.share-prompt-label { .share-prompt-label {
font-size: 1.1em; font-size: 1.3rem;
color: var(--color-backgrounddarker); color: var(--color-backgrounddarker);
} }
.buttons-container { .buttons-container {
padding: var(--spacing) 0; flex: none;
align-self: stretch;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: 1.4rem 0;
.button-container { .button-container {
flex: 1; flex: 1;
height: 3.2em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 0.8em; padding: 0.6rem 1rem;
color: var(--color-surfacelighter);
cursor: pointer;
.icon { .icon {
margin-right: 0.6em; flex: none;
width: 1.4em; width: 1.4rem;
height: 1.4em; height: 1.4rem;
margin-right: 0.6rem;
fill: var(--color-surfacelighter); 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); filter: brightness(1.2);
} }
&:not(:last-child) { &:not(:last-child) {
margin-right: 2em; margin-right: 2rem;
} }
} }
.facebook-button { .facebook-button {
background-color: var(--color-secondary); background-color: var(--color-facebook);
} }
.twitter-button { .twitter-button {
@ -92,29 +89,28 @@
.url-container { .url-container {
display: flex; display: flex;
flex-direction: row; 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 { .url-content {
flex: 4; min-width: 12rem;
padding: calc(var(--spacing) * 0.5); padding: 0.6rem 1rem;
font-size: 0.9em; font-size: 0.9rem;
text-align: center;
color: var(--color-surfacedark); color: var(--color-surfacedark);
text-align: center;
} }
.copy-button { .copy-button {
flex: 1;
padding: calc(var(--spacing) * 0.5);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
justify-content: center; justify-content: center;
padding: 0.6rem 1rem;
background-color: var(--color-surface); background-color: var(--color-surface);
cursor: pointer;
.icon { .icon {
margin-right: 0.4em; width: 1.4rem;
width: 1em; height: 1.4rem;
height: 1em; margin-right: 0.6rem;
fill: var(--color-surfacedarker); fill: var(--color-surfacedarker);
} }
@ -122,8 +118,8 @@
color: var(--color-surfacedarker); color: var(--color-surfacedarker);
} }
&:focus, &:hover { &:hover, &:focus {
background-color: var(--color-surface60); filter: brightness(1.2);
} }
} }
} }