Move debug log styles to their own file
// FREEBIE
This commit is contained in:
lilia
parent
1f4587795e
commit
531d1701ef
4 changed files with 151 additions and 148 deletions
85
stylesheets/_debugLog.scss
Normal file
85
stylesheets/_debugLog.scss
Normal file
|
|
@ -0,0 +1,85 @@
|
||||||
|
.debug-log {
|
||||||
|
&.modal {
|
||||||
|
padding: 50px;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
flex-grow: 1;
|
||||||
|
width: 100%;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
border: solid 1px #ccc;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 1em auto;
|
||||||
|
padding: 1em;
|
||||||
|
font-family: inherit;
|
||||||
|
color: $grey;
|
||||||
|
background: $grey_l;
|
||||||
|
box-shadow: 0 0 10px -5px rgba($grey, 0.5);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: black;
|
||||||
|
box-shadow: 0 0 10px -3px rgba($grey, 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.result {
|
||||||
|
$link-max-width: 400px;
|
||||||
|
$open-width: 72px;
|
||||||
|
$open-height: 36px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
$group-max-width: $link-max-width + $open-width;
|
||||||
|
.input-group {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
max-width: $group-max-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
$open-pad-x: ($open-width - $button-height - 2) / 2;
|
||||||
|
$open-pad-y: ($open-height - $button-height - 2) / 2;
|
||||||
|
.open {
|
||||||
|
float: left;
|
||||||
|
display: inline-block;
|
||||||
|
width: $open-width;
|
||||||
|
height: $open-height;
|
||||||
|
padding: $open-pad-y $open-pad-x;
|
||||||
|
cursor: pointer;
|
||||||
|
border: solid 1px #ccc;
|
||||||
|
border-radius: 0 $border-radius $border-radius 0;
|
||||||
|
background: $grey_l;
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: $button-height;
|
||||||
|
height: $button-height;
|
||||||
|
@include header-icon-black('/images/open_link.svg');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
border-radius: $border-radius 0 0 $border-radius;
|
||||||
|
float: left;
|
||||||
|
width: calc(100% - #{$open-width});
|
||||||
|
max-width: $link-max-width;
|
||||||
|
height: $open-height;
|
||||||
|
padding: 0 10px;
|
||||||
|
outline-offset: -4px;
|
||||||
|
border: solid 1px #ccc;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -407,89 +407,6 @@ $avatar-size: 44px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.debug-log {
|
|
||||||
&.modal {
|
|
||||||
padding: 50px;
|
|
||||||
|
|
||||||
.content {
|
|
||||||
margin: 0;
|
|
||||||
max-width: 100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
flex-grow: 1;
|
|
||||||
width: 100%;
|
|
||||||
resize: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.submit {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
border: solid 1px #ccc;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 1em auto;
|
|
||||||
padding: 1em;
|
|
||||||
font-family: inherit;
|
|
||||||
color: $grey;
|
|
||||||
background: $grey_l;
|
|
||||||
box-shadow: 0 0 10px -5px rgba($grey, 0.5);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: black;
|
|
||||||
box-shadow: 0 0 10px -3px rgba($grey, 0.7);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.result {
|
|
||||||
$link-max-width: 400px;
|
|
||||||
$open-width: 46px;
|
|
||||||
$open-height: 36px;
|
|
||||||
$group-max-width: $link-max-width + $open-width;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.input-group {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
max-width: $group-max-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open {
|
|
||||||
float: left;
|
|
||||||
display: inline-block;
|
|
||||||
width: $open-width;
|
|
||||||
height: $open-height;
|
|
||||||
padding: 5px 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
border: solid 1px #ccc;
|
|
||||||
border-radius: 0 $border-radius $border-radius 0;
|
|
||||||
background: $grey_l;
|
|
||||||
&:before {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
width: $button-height;
|
|
||||||
height: $button-height;
|
|
||||||
@include header-icon-black('/images/open_link.svg');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
border-radius: $border-radius 0 0 $border-radius;
|
|
||||||
float: left;
|
|
||||||
width: calc(100% - #{$open-width});
|
|
||||||
max-width: $link-max-width;
|
|
||||||
height: $open-height;
|
|
||||||
padding: 0 10px;
|
|
||||||
outline-offset: -4px;
|
|
||||||
border: solid 1px #ccc;
|
|
||||||
border-right: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.modal {
|
.modal {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
|
||||||
|
|
@ -349,71 +349,6 @@ img.emoji {
|
||||||
@keyframes rotate {
|
@keyframes rotate {
|
||||||
to {
|
to {
|
||||||
transform: rotate(360deg); } }
|
transform: rotate(360deg); } }
|
||||||
.debug-log.modal {
|
|
||||||
padding: 50px; }
|
|
||||||
.debug-log.modal .content {
|
|
||||||
margin: 0;
|
|
||||||
max-width: 100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column; }
|
|
||||||
.debug-log.modal .content textarea {
|
|
||||||
flex-grow: 1;
|
|
||||||
width: 100%;
|
|
||||||
resize: none; }
|
|
||||||
.debug-log .submit {
|
|
||||||
border-radius: 5px;
|
|
||||||
border: solid 1px #ccc;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 1em auto;
|
|
||||||
padding: 1em;
|
|
||||||
font-family: inherit;
|
|
||||||
color: #616161;
|
|
||||||
background: #f3f3f3;
|
|
||||||
box-shadow: 0 0 10px -5px rgba(97, 97, 97, 0.5); }
|
|
||||||
.debug-log .submit:hover {
|
|
||||||
color: black;
|
|
||||||
box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); }
|
|
||||||
.debug-log .result {
|
|
||||||
text-align: center; }
|
|
||||||
.debug-log .result .input-group {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 446px; }
|
|
||||||
.debug-log .result .open {
|
|
||||||
float: left;
|
|
||||||
display: inline-block;
|
|
||||||
width: 46px;
|
|
||||||
height: 36px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
border: solid 1px #ccc;
|
|
||||||
border-radius: 0 5px 5px 0;
|
|
||||||
background: #f3f3f3; }
|
|
||||||
.debug-log .result .open:before {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
-webkit-mask: url("/images/open_link.svg") no-repeat center;
|
|
||||||
-webkit-mask-size: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5); }
|
|
||||||
.debug-log .result .open:before:focus, .debug-log .result .open:before:hover {
|
|
||||||
-webkit-mask: url("/images/open_link.svg") no-repeat center;
|
|
||||||
-webkit-mask-size: 100%;
|
|
||||||
background-color: black; }
|
|
||||||
.debug-log .result .link {
|
|
||||||
border-radius: 5px 0 0 5px;
|
|
||||||
float: left;
|
|
||||||
width: calc(100% - 46px);
|
|
||||||
max-width: 400px;
|
|
||||||
height: 36px;
|
|
||||||
padding: 0 10px;
|
|
||||||
outline-offset: -4px;
|
|
||||||
border: solid 1px #ccc;
|
|
||||||
border-right: none; }
|
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -496,6 +431,71 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
|
||||||
.bar-container .progress-bar {
|
.bar-container .progress-bar {
|
||||||
height: 100%; }
|
height: 100%; }
|
||||||
|
|
||||||
|
.debug-log.modal {
|
||||||
|
padding: 50px; }
|
||||||
|
.debug-log.modal .content {
|
||||||
|
margin: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column; }
|
||||||
|
.debug-log.modal .content textarea {
|
||||||
|
flex-grow: 1;
|
||||||
|
width: 100%;
|
||||||
|
resize: none; }
|
||||||
|
.debug-log .submit {
|
||||||
|
border-radius: 5px;
|
||||||
|
border: solid 1px #ccc;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 1em auto;
|
||||||
|
padding: 1em;
|
||||||
|
font-family: inherit;
|
||||||
|
color: #616161;
|
||||||
|
background: #f3f3f3;
|
||||||
|
box-shadow: 0 0 10px -5px rgba(97, 97, 97, 0.5); }
|
||||||
|
.debug-log .submit:hover {
|
||||||
|
color: black;
|
||||||
|
box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); }
|
||||||
|
.debug-log .result {
|
||||||
|
text-align: center; }
|
||||||
|
.debug-log .result .input-group {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 472px; }
|
||||||
|
.debug-log .result .open {
|
||||||
|
float: left;
|
||||||
|
display: inline-block;
|
||||||
|
width: 72px;
|
||||||
|
height: 36px;
|
||||||
|
padding: 5px 23px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: solid 1px #ccc;
|
||||||
|
border-radius: 0 5px 5px 0;
|
||||||
|
background: #f3f3f3; }
|
||||||
|
.debug-log .result .open:before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
-webkit-mask: url("/images/open_link.svg") no-repeat center;
|
||||||
|
-webkit-mask-size: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5); }
|
||||||
|
.debug-log .result .open:before:focus, .debug-log .result .open:before:hover {
|
||||||
|
-webkit-mask: url("/images/open_link.svg") no-repeat center;
|
||||||
|
-webkit-mask-size: 100%;
|
||||||
|
background-color: black; }
|
||||||
|
.debug-log .result .link {
|
||||||
|
border-radius: 5px 0 0 5px;
|
||||||
|
float: left;
|
||||||
|
width: calc(100% - 72px);
|
||||||
|
max-width: 400px;
|
||||||
|
height: 36px;
|
||||||
|
padding: 0 10px;
|
||||||
|
outline-offset: -4px;
|
||||||
|
border: solid 1px #ccc;
|
||||||
|
border-right: none; }
|
||||||
|
|
||||||
.conversation-stack,
|
.conversation-stack,
|
||||||
.new-conversation, .inbox, .gutter {
|
.new-conversation, .inbox, .gutter {
|
||||||
height: 100%; }
|
height: 100%; }
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
@import 'progress';
|
@import 'progress';
|
||||||
|
@import 'debugLog';
|
||||||
|
|
||||||
// Build the main view
|
// Build the main view
|
||||||
@import 'index';
|
@import 'index';
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue