application/css/add_alias_dialogue.css.scss
@import "definitions.css.scss";
#add-alias-dialogue {
$instruction-height: 20px;
$paging-height: 30px;
position: absolute;
left: 0;
right: 0;
top: 0;
height: auto;
bottom: 0;
.paging {
@include interface;
@include box-sizing;
height: $paging-height;
background-color: #f2f2f2;
padding: $unit/2 $unit;
position: relative;
.progress {
position: absolute;
width: 16px;
height: 16px;
// left: $unit;
right: $unit;
top: ($paging-height - 16) / 2;
}
.search {
position: absolute;
// right: $unit;
left: $unit;
top: 6px;
width: 50%;
input {
margin: 0;
width: 100%;
}
}
}
.instructions {
@include interface;
@include box-sizing;
height: $instruction-height;
margin: 0;
background-color: #f2f2f2;
color: #666;
padding: $unit/2 $unit;
}
.typelist {
position: absolute;
left: 0;
right: 0;
top: $paging-height;
bottom: 0;
overflow: auto;
}
.alias-dialogue-empty-targets {
color: #666;
text-align: center;
margin-top: 20%;
button {
@include button(#999);
display: block;
width: 150px;
margin: 2*$unit auto 0 auto;
}
}
.type {
@include disable-text-select;
@include display-flex;
@include align-items(center);
cursor: pointer;
padding: $unit/2 $unit;
background-color: #fbfbfb;
// margin: $unit;
margin-bottom: 0;
font-size: $target-name-size;
color: #333333;
&:hover {
background-color: #666;
color: #fff;
}
&.selected {
background-color: $action;
color: #fff;
}
}
.type + .type {
border-top: solid 1px #f2f2f2;
}
.alias-icon {
border: solid 1px #ddd;
width: 80px;
display: block;
img {
max-width: 100%;
display: block;
}
}
.alias-icon-blank {
img {
display: none;
}
border: solid 1px #ddd;
height: 45px;
position: relative;
color: #ddd;
&:before {
position: absolute;
left: 0;
right: 0;
text-align: center;
line-height: 45px;
@include awesome-icon("\f03e");
}
}
.alias-icon + .alias-title {
margin-left: $unit;
}
}