make sidebar header clickarea even bigger

This commit is contained in:
Felix Niklas 2015-05-27 10:49:45 +02:00
parent 1b7d17b897
commit 0b29920a0c
6 changed files with 33 additions and 30 deletions

View file

@ -1,5 +1,5 @@
<div class="dropdown dropdown--actions">
<div class="dropdown-toggle horizontal center" id="userAction" data-toggle="dropdown">
<div class="dropdown-toggle" id="userAction" data-toggle="dropdown">
<% if @type isnt 'small': %>
<svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
<label><%- @T('Action') %></label>

View file

@ -1,4 +1,4 @@
<div class="flex profile">
<div class="profile">
<div class="modal modal--local">
<div class="modal-backdrop"></div>
<div class="modal-dialog">
@ -301,7 +301,7 @@
<div class="profile-window">
<div class="profile-section vertical centered">
<div class="align-right profile-action dropdown dropdown--actions">
<div class="dropdown-toggle horizontal center" id="profileAction" data-toggle="dropdown">
<div class="dropdown-toggle" id="profileAction" data-toggle="dropdown">
<svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
<label>Aktion</label>
<span class="select-arrow icon"></span>

View file

@ -3,7 +3,7 @@
<div class="profile-window">
<div class="profile-section vertical centered">
<div class="align-right profile-action dropdown dropdown--actions">
<div class="dropdown-toggle horizontal center" id="organizationProfile" data-toggle="dropdown">
<div class="dropdown-toggle" id="organizationProfile" data-toggle="dropdown">
<svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
<label>Aktion</label>
<span class="select-arrow icon"></span>

View file

@ -3,7 +3,7 @@
<div class="profile-window">
<div class="profile-section vertical centered">
<div class="align-right profile-action dropdown dropdown--actions">
<div class="dropdown-toggle horizontal center" id="profileAction" data-toggle="dropdown">
<div class="dropdown-toggle" id="profileAction" data-toggle="dropdown">
<svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
<label>Aktion</label>
<span class="select-arrow icon"></span>

View file

@ -1,7 +1,7 @@
<% for item in @items: %>
<% if item.child: %>
<li class="dropdown <%= item.class %> <% if @open_tab[item.target] : %>open<% end %>">
<a href="<%= item.target %>" class="dropdown-toggle horizontal center" data-toggle="dropdown">
<a href="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown">
<svg class="nav-icon"><use xlink:href="#icon-<%= item.class %>" /></svg>
<span class="nav-item-name flex">
<%- @T( item.name ) %>

View file

@ -3416,21 +3416,17 @@ footer {
.tabsSidebar .sidebar-header {
display: flex;
align-items: center;
align-content: stretch;
position: relative;
margin: 0 20px;
+ hr {
margin-top: 0;
}
.dropdown {
position: static;
}
}
.sidebar-header-headline {
padding: 25px 0 15px 25px;
padding: 33px 0 17px 25px;
margin: 0 0 0 -20px;
line-height: 1;
padding-right: 8px;
@ -3439,16 +3435,23 @@ footer {
.sidebar-header-actions {
flex: 1;
margin-top: 10px;
margin-right: 20px;
margin-right: 5px;
display: flex;
align-items: center;
.dropdown {
flex: 1;
position: static;
}
.dropdown-toggle {
height: 30px;
padding-top: 38px;
padding-bottom: 24px;
}
}
.tabsSidebar-close {
padding: 28px 35px 20px 0;
padding: 27px 35px 12px 0;
margin: 0 -20px 0 0;
@extend .u-clickable;
display: flex;
@ -3513,20 +3516,18 @@ footer {
justify-content: center;
}
.tabs
.tabsSidebar-tab.is-changed:before {
position: absolute;
content: '';
left: -3px;
width: 6px;
height: 6px;
top: 50%;
margin-top: -3px;
border-radius: 100%;
background: hsl(198,19%,72%);
box-shadow: 0 0 0 2px hsl(210,17%,98%);
}
.tabsSidebar-tab.is-changed:before {
position: absolute;
content: '';
left: -3px;
width: 6px;
height: 6px;
top: 50%;
margin-top: -3px;
border-radius: 100%;
background: hsl(198,19%,72%);
box-shadow: 0 0 0 2px hsl(210,17%,98%);
}
.tabsSidebar-tab:first-child {
border-top-left-radius: 8px;
@ -3939,6 +3940,8 @@ footer {
}
.dropdown-toggle {
display: flex;
align-items: center;
@extend .u-clickable;
}