ux: style tweaks

This commit is contained in:
Torkel Ödegaard 2017-12-12 15:13:47 +01:00
parent d379b501aa
commit 271c597c9b
3 changed files with 22 additions and 18 deletions

View File

@ -55,15 +55,15 @@
</div>
<div class="search-filter-box">
<a href="dashboard/new" class="search-filter-box-item">
<a href="dashboard/new" class="search-filter-box-link">
<i class="gicon gicon-dashboard-new"></i>
Dashboard
</a>
<a href="dashboards/folder/new" class="search-filter-box-item">
<a href="dashboards/folder/new" class="search-filter-box-link">
<i class="gicon gicon-folder-new"></i>
Folder
</a>
<a class="search-button-row-explore-link" target="_blank" href="https://grafana.com/dashboards?utm_source=grafana_search">
<a class="search-filter-box-link" target="_blank" href="https://grafana.com/dashboards?utm_source=grafana_search">
<img src="public/img/icn-dashboard-tiny.svg" width="20" /> Find dashboards on Grafana.com
</a>
</div>

View File

@ -13,9 +13,10 @@
<div ng-show="ctrl.editable && section.id > 0" ng-click="ctrl.navigateToFolder(section, $event)">
<i class="fa fa-cog search-section__header__toggle"></i>&nbsp;
</div>
<i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
<i class="fa fa-plus search-section__header__toggle" ng-hide="section.expanded"></i>
<i class="fa fa-angle-down search-section__header__toggle" ng-show="section.expanded"></i>
<i class="fa fa-angle-right search-section__header__toggle" ng-hide="section.expanded"></i>
</a>
<div class="search-section__header" ng-show="section.hideHeader"></div>
<div ng-if="section.expanded">
@ -44,4 +45,5 @@
</span>
</a>
</div>
</div>
</div>

View File

@ -83,11 +83,17 @@
margin-bottom: $spacer * 1.5;
}
.search-filter-box-item {
.search-filter-box-link {
display:block;
margin-bottom: 16px;
i {
&:last-child {
margin-bottom: 0;
}
i, img {
font-size: 20px;
margin-right: 5px;
}
}
@ -116,31 +122,27 @@
.search-section {
background: $panel-bg;
border: $panel-border;
padding: 0px 10px 2px 10px;
padding: 0px 4px 4px 4px;
margin-bottom: 3px;
border-radius: 5px;
}
.search-section__header {
font-size: $font-size-h6;
padding: 6px 0 4px 0;
padding: 7px 4px 3px 0;
color: $text-color-weak;
display: flex;
flex-grow: 1;
&:hover, &.selected {
color: $link-hover-color;
.search-section__header__toggle {
background: $tight-form-func-bg;
color: $link-hover-color;
}
color: $text-color;
}
}
.search-section__header__icon {
padding: 5px 10px;
width: 35px;
padding: 5px 0px;
width: 43px;
text-align: center;
}
.search-section__header__toggle {