thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Harmonize x/close buttons

Browse source 
// FREEBIE
This commit is contained in:
lilia 2016-04-01 15:15:02 -07:00
parent 242c05834b
commit e5748b974f
4 changed files with 43 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
background.html
View file

@ -108,7 +108,7 @@
</script> </script>
<script type='text/x-tmpl-mustache' id='attachment-preview'> <script type='text/x-tmpl-mustache' id='attachment-preview'>
<img src='{{ source }}' class='preview' /> <img src='{{ source }}' class='preview' />
<div class='close'>x</div> <div class='x close'></div>
</script> </script>
<script type='text/x-tmpl-mustache' id='hasRetry'> <script type='text/x-tmpl-mustache' id='hasRetry'>
{{ messageNotSent }} {{ messageNotSent }}
@ -331,7 +331,7 @@
<script type='text/x-tmpl-mustache' id='debug-log'> <script type='text/x-tmpl-mustache' id='debug-log'>
<div class='content'> <div class='content'>
<div> <div>
<a class='x close'>&times;</a> <a class='x close'></a>
<h1> {{ title }} </h1> <h1> {{ title }} </h1>
<p> {{ debugLogExplanation }}</p> <p> {{ debugLogExplanation }}</p>
</div> </div>
@ -348,7 +348,7 @@
</script> </script>
<script type='text/x-tmpl-mustache' id='settings'> <script type='text/x-tmpl-mustache' id='settings'>
<div class='content'> <div class='content'>
<a class='x close'>&times;</a> <a class='x close'></a>
<h3>{{ notifications }}</h3> <h3>{{ notifications }}</h3>
<p>{{ notificationSettingsDialog }}</p> <p>{{ notificationSettingsDialog }}</p>
<div> <div>

3
stylesheets/_conversation.scss
View file

@ -496,6 +496,9 @@
} }
.close { .close {
position: absolute;
top: 5px;
right: 2px;
background: #999; background: #999;
&:hover { &:hover {

48
stylesheets/_global.scss
View file

@ -169,23 +169,6 @@ button.back {
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
} }
.close {
font-family: sans-serif;
color: white;
position: absolute;
top: 5px;
right: 2px;
cursor: pointer;
border-radius: 50%;
width: 20px;
height: 20px;
padding: 0px;
background: #666;
color: #fff;
text-align: center;
}
} }
.dropoff { .dropoff {
@ -487,23 +470,24 @@ $avatar-size: 44px;
overflow: auto; overflow: auto;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
} }
}
a.x { .x {
display: inline-block; display: inline-block;
float: right; float: right;
cursor: pointer; cursor: pointer;
border-radius: 50%;
width: 22px;
height: 22px;
padding: 3px;
background: $grey;
font-family: sans-serif; &:before {
color: white; content: '';
border-radius: 50%; display: block;
width: 20px; width: 100%;
height: 20px; height: 100%;
padding: 0px; @include color-svg('/images/x.svg', white);
background: #666;
color: #fff;
text-align: center;
font-size: 19px;
} }
} }

49
stylesheets/manifest.css
View file

@ -172,20 +172,6 @@ button.back {
left: 0; left: 0;
cursor: pointer; cursor: pointer;
z-index: 1; } z-index: 1; }
.file-input .close {
font-family: sans-serif;
color: white;
position: absolute;
top: 5px;
right: 2px;
cursor: pointer;
border-radius: 50%;
width: 20px;
height: 20px;
padding: 0px;
background: #666;
color: #fff;
text-align: center; }
.dropoff { .dropoff {
outline: solid 1px #2090ea; } outline: solid 1px #2090ea; }
@ -412,20 +398,24 @@ img.emoji {
border-radius: 5px; border-radius: 5px;
overflow: auto; overflow: auto;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); } box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); }
.modal a.x {
display: inline-block; .x {
float: right; display: inline-block;
cursor: pointer; float: right;
font-family: sans-serif; cursor: pointer;
color: white; border-radius: 50%;
border-radius: 50%; width: 22px;
width: 20px; height: 22px;
height: 20px; padding: 3px;
padding: 0px; background: #616161; }
background: #666; .x:before {
color: #fff; content: '';
text-align: center; display: block;
font-size: 19px; } width: 100%;
height: 100%;
-webkit-mask: url("/images/x.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: white; }
input[type=text]:active, input[type=text]:focus, input[type=search]:active, input[type=search]:focus, textarea:active, textarea:focus { input[type=text]:active, input[type=text]:focus, input[type=search]:active, input[type=search]:focus, textarea:active, textarea:focus {
outline: 1px solid #2090ea; } outline: 1px solid #2090ea; }
@ -1026,6 +1016,9 @@ input.search {
border-radius: 5px; border-radius: 5px;
max-height: 100px; } max-height: 100px; }
.bottom-bar .attachment-previews .close { .bottom-bar .attachment-previews .close {
position: absolute;
top: 5px;
right: 2px;
background: #999; } background: #999; }
.bottom-bar .attachment-previews .close:hover { .bottom-bar .attachment-previews .close:hover {
background: #616161; } background: #616161; }