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 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -349,71 +349,6 @@ img.emoji {
|
|||
@keyframes rotate {
|
||||
to {
|
||||
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 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -496,6 +431,71 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
|
|||
.bar-container .progress-bar {
|
||||
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,
|
||||
.new-conversation, .inbox, .gutter {
|
||||
height: 100%; }
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
|
||||
// Components
|
||||
@import 'progress';
|
||||
@import 'debugLog';
|
||||
|
||||
// Build the main view
|
||||
@import 'index';
|
||||
|
|
|
|||
Loading…
Reference in a new issue