Mirroring/tailblocks
1
0
Fork 0
mirror of https://github.com/mertJF/tailblocks.git synced 2025-12-08 17:03:24 +00:00
Code Issues Projects Releases Wiki Activity

App :: making responsive

Browse Source
This commit is contained in:
mertJF
2020-05-23 11:37:01 +03:00
parent 8a036cfdd0
commit 146d19522b
1 changed files with 51 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/index.css
View File

@@ -199,7 +199,7 @@ iframe {
svg { width: 100%; } svg { width: 100%; }
.app.has-sidebar .toolbar { .app.has-sidebar .toolbar {
padding: 16px 16px 16px 176px; padding: 0 16px 0 176px;
} }
.toolbar { .toolbar {
@@ -248,6 +248,7 @@ svg { width: 100%; }
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: 600; font-weight: 600;
flex-shrink: 0;
position: relative; position: relative;
} }
@@ -255,6 +256,7 @@ svg { width: 100%; }
background-image: var(--opener); background-image: var(--opener);
display: inline-block; display: inline-block;
width: 18px; width: 18px;
flex-shrink: 0;
height: 18px; height: 18px;
content: ""; content: "";
background-size: cover; background-size: cover;
@@ -272,6 +274,7 @@ svg { width: 100%; }
width: 58px; width: 58px;
position: relative; position: relative;
height: 32px; height: 32px;
flex-shrink: 0;
margin-left: 16px; margin-left: 16px;
} }
@@ -418,6 +421,7 @@ svg { width: 100%; }
.copy-the-block { .copy-the-block {
border: 1px solid rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.4);
padding: 0 12px; padding: 0 12px;
flex-shrink: 0;
border-radius: 20px; border-radius: 20px;
margin-right: 14px; margin-right: 14px;
display: flex; display: flex;
@@ -435,6 +439,7 @@ svg { width: 100%; }
} }
.copy-to-clipboard { .copy-to-clipboard {
white-space: nowrap;
width: auto; width: auto;
} }
@@ -564,17 +569,18 @@ pre, code {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
align-items: center; align-items: center;
position: relative;
} }
.clipboard-tooltip { .clipboard-tooltip {
margin-right: -10px; color: #68717d;
color: #fff;
font-size: 13px; font-size: 13px;
background-color: rgba(255, 255, 255, 0.4); background-color: #fff;
padding: 2px 5px; padding: 2px 5px;
letter-spacing: .2px; letter-spacing: .2px;
border-radius: 4px; border-radius: 4px;
position: relative; position: absolute;
right: 100%;
opacity: 0; opacity: 0;
transition: opacity .4s, margin-right .4s; transition: opacity .4s, margin-right .4s;
} }
@@ -583,3 +589,43 @@ pre, code {
margin-right: 6px; margin-right: 6px;
opacity: 1; opacity: 1;
} }
@media (max-width: 1060px) {
.device {
display: none;
}
.switcher {
margin-right: 0;
}
}
@media (max-width: 960px) {
.copy-to-clipboard {
display: none;
}
}
@media (max-width: 760px) {
.copy-the-block, .switcher {
display: none;
}
.opener {
width: 40px;
height: 100%;
overflow: hidden;
color: transparent;
white-space: nowrap;
}
.opener::before {
width: 24px;
height: 24px;
}
.mode {
margin-left: auto;
}
}