Merge pull request #3204 from Hypolite/improvement/frio-action-links-to-buttons

Frio: Turn action links into buttons
This commit is contained in:
rabuzarus 2017-04-02 23:15:57 +02:00 committed by GitHub
commit 1ce5cc1b49
26 changed files with 615 additions and 590 deletions

View file

@ -25,7 +25,7 @@
#event-calendar-title {
vertical-align: middle;
}
a#event-calendar-views {
#event-calendar-views {
padding: 6px 9px;
font-size: 14px
}

View file

@ -51,10 +51,14 @@ body a[name]:not([href]) {
visibility: hidden;
}
body a:hover, body a:focus, body a:active, body a.active, body .btn-link:hover{
body a:hover, .btn-link:hover,
body a:focus, .btn-link:focus,
body a:active, .btn-link:active,
body a.active, .btn-link.active {
/*color: #59d6e4;*/
color: $link_hover_color;
text-decoration: none;
outline: none;
}
.wall-item-container a:hover {
@ -186,6 +190,12 @@ a#item-delete-selected {
outline: 0;
background: $btn_primary_hover_color !important;
}
.btn-default:active, .btn-default.active {
color: $link_color;
}
.btn-default:active:hover, .btn-default.active:hover {
color: $link_hover_color;
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover,
.btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover,
.open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus,
@ -196,10 +206,13 @@ a#item-delete-selected {
}
.btn-link {
border: 0;
color: $link_color;
padding-left: 0;
padding-right: 0;
}
.btn-link:focus, .btn-link:hover {
color: #23527c;
.btn {
color: inherit;
}
.btn-eventnav, btn-eventnav:hover {
font-size: 16px;
@ -395,7 +408,8 @@ header #banner #logo-img,
top: 2px;
right: 10px
}
.topbar .dropdown-header .dropdown-header-link a {
.topbar .dropdown-header .dropdown-header-link a,
.topbar .dropdown-header .dropdown-header-link .btn-link {
/*color: #6fdbe8!important;*/
color: $link_color !important;
font-size: 12px;
@ -548,9 +562,8 @@ nav.navbar .nav>li>a:focus{
#topbar-first .dropdown-footer {
margin: 10px 10px 5px
}
#topbar-first a,
nav.navbar a {
/*color: #fff*/
#topbar-first a, #topbar-first .btn-link,
nav.navbar a, nav.navbar .btn-link {
color: $nav_icon_color;
}
#topbar-first .caret {
@ -644,10 +657,12 @@ nav.navbar a {
#myNavmenu li.nav-sitename {
font-weight: bold;
}
#topbar-first .dropdown.account>a,
#topbar-first .dropdown.account.open>a,
#topbar-first .dropdown.account>a:hover,
#topbar-first .dropdown.account.open>a:hover {
#topbar-first .dropdown.account > a,
#topbar-first .dropdown.account.open > a,
#topbar-first .dropdown.account > button,
#topbar-first .dropdown.account.open > button,
#topbar-first .dropdown.account > :hover,
#topbar-first .dropdown.account.open > :hover {
background-color: $nav_bg;
}
#topbar-first .dropdown.account li#nav-sitename {
@ -696,7 +711,7 @@ nav.navbar a {
@media screen and (max-width: 767px) {
#topbar-second > .container,
#topbar-second #navbar-button {
padding: 0;
padding: 0;
}
}
#topbar-second .dropdown-menu {
@ -815,6 +830,25 @@ nav.navbar a {
}
/* Dropdown Menus */
.nav > li > .btn-link {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > .btn-link:focus,
.nav > li > .btn-link:hover {
text-decoration: none;
background-color: #eee;
}
.nav .open > .btn-link,
.nav .open > .btn-link:focus,
.nav .open > .btn-link:hover {
background-color: #eee;
border-color: #337ab7;
}
.nav-pills > li > .btn-link {
border-radius: 4px;
}
.nav-pills .dropdown-menu,
.nav-tabs .dropdown-menu,
.account .dropdown-menu,
@ -836,41 +870,43 @@ nav.navbar a {
.contact-photo-wrapper .dropdown-menu li {
border-left: 3px solid $nav_bg;
}
.nav-pills .dropdown-menu li a,
.nav-tabs .dropdown-menu li a,
.account .dropdown-menu li a,
.contact-photo-wrapper .dropdown-menu li a {
.nav-pills .dropdown-menu li a, .nav-pills .dropdown-menu li .btn-link,
.nav-tabs .dropdown-menu li a, .nav-tabs .dropdown-menu li .btn-link,
.account .dropdown-menu li a, .account .dropdown-menu li .btn-link,
.contact-photo-wrapper .dropdown-menu li a, .contact-photo-wrapper .dropdown-menu li .btn-link {
color: $nav_icon_color;
font-weight: 400;
font-size: 13px;
padding: 4px 15px;
text-transform: capitalize;
width: 100%;
text-align: left;
}
.nav-pills .dropdown-menu li a i,
.nav-tabs .dropdown-menu li a i,
.account .dropdown-menu li a i,
.contact-photo-wrapper .dropdown-menu li a i {
.nav-pills .dropdown-menu li a i, .nav-pills .dropdown-menu li .btn-link i,
.nav-tabs .dropdown-menu li a i, .nav-tabs .dropdown-menu li .btn-link i,
.account .dropdown-menu li a i, .account .dropdown-menu li .btn-link i,
.contact-photo-wrapper .dropdown-menu li a i, .contact-photo-wrapper .dropdown-menu li .btn-link i {
margin-right: 5px;
font-size: 14px;
display: inline-block;
width: 14px
}
.nav-pills .dropdown-menu li a:hover,
.nav-tabs .dropdown-menu li a:hover,
.account .dropdown-menu li a:hover,
.contact-photo-wrapper .dropdown-menu li a:hover,
.nav-pills .dropdown-menu li a:visited,
.nav-tabs .dropdown-menu li a:visited,
.account .dropdown-menu li a:visited,
.contact-photo-wrapper .dropdown-menu li a:visited,
.nav-pills .dropdown-menu li a:hover,
.nav-tabs .dropdown-menu li a:hover,
.account .dropdown-menu li a:hover,
.contact-photo-wrapper .dropdown-menu li a:hover,
.nav-pills .dropdown-menu li a:focus,
.nav-tabs .dropdown-menu li a:focus,
.account .dropdown-menu li a:focus,
.contact-photo-wrapper .dropdown-menu li a:focus {
.nav-pills .dropdown-menu li a:hover, .nav-pills .dropdown-menu li .btn-link:hover,
.nav-tabs .dropdown-menu li a:hover, .nav-tabs .dropdown-menu li .btn-link:hover,
.account .dropdown-menu li a:hover, .account .dropdown-menu li .btn-link:hover,
.contact-photo-wrapper .dropdown-menu li a:hover, .contact-photo-wrapper .dropdown-menu li .btn-link:hover,
.nav-pills .dropdown-menu li a:visited, .nav-pills .dropdown-menu li .btn-link:visited,
.nav-tabs .dropdown-menu li a:visited, .nav-tabs .dropdown-menu li .btn-link:visited,
.account .dropdown-menu li a:visited, .account .dropdown-menu li .btn-link:visited,
.contact-photo-wrapper .dropdown-menu li a:visited, .contact-photo-wrapper .dropdown-menu li .btn-link:visited,
.nav-pills .dropdown-menu li a:hover, .nav-pills .dropdown-menu li .btn-link:hover,
.nav-tabs .dropdown-menu li a:hover, .nav-tabs .dropdown-menu li .btn-link:hover,
.account .dropdown-menu li a:hover, .account .dropdown-menu li .btn-link:hover,
.contact-photo-wrapper .dropdown-menu li a:hover, .contact-photo-wrapper .dropdown-menu li .btn-link:hover,
.nav-pills .dropdown-menu li a:focus, .nav-pills .dropdown-menu li .btn-link:focus,
.nav-tabs .dropdown-menu li a:focus, .nav-tabs .dropdown-menu li .btn-link:focus,
.account .dropdown-menu li a:focus, .account .dropdown-menu li .btn-link:focus,
.contact-photo-wrapper .dropdown-menu li a:focus, .contact-photo-wrapper .dropdown-menu li .btn-link:focus {
background: 0 0
}
.nav-pills .dropdown-menu li:hover,
@ -1171,8 +1207,8 @@ section #jotOpen {
.jothidden {
/*display: none;*/
}
#jot-modal .modal-header a,
#profile-jot-submit-wrapper a {
#jot-modal .modal-header a, #jot-modal .modal-header .btn-link,
#profile-jot-submit-wrapper a, #profile-jot-submit-wrapper .btn-link {
color: #555;
text-transform: capitalize;
}
@ -1315,8 +1351,6 @@ section #jotOpen {
.wall-item-container a,
.wall-item-container .fakelink,
.toplevel_item .fakelink,
.toplevel_item .wall-item-container .btn-link,
.wall-item-container .btn-link,
.toplevel_item .wall-item-container .wall-item-responses a {
color: #555;
-webkit-transition: all 0.25s ease-in-out;
@ -1327,7 +1361,6 @@ section #jotOpen {
}
.toplevel_item:hover .fakelink, .wall-item-container:hover .fakelink,
.toplevel_item:hover .wall-item-container:hover .btn-link,
.toplevel_item:hover .wall-item-container:hover .wall-item-responses a,
.toplevel_item:hover .wall-item-content a,
.toplevel_item:hover .wall-item-name,
@ -1497,8 +1530,8 @@ section #jotOpen {
@media screen and (max-width: 767px) {
.shared-wrapper,
.vevent {
margin-left: 0px;
margin-right: 0px;
margin-left: 0px;
margin-right: 0px;
}
}
.shared-wrapper:hover,
@ -1543,19 +1576,18 @@ code > .hl-main {
}
/* item social action buttons */
.wall-item-actions, .wall-item-actions a {
.wall-item-actions {
margin-top: 15px;
}
.wall-item-actions, .wall-item-actions a, .wall-item-actions button {
font-size: 13px;
color: #555;
margin-top: 15px;
margin-bottom: 0;
}
.wall-item-actions a.active {
.wall-item-actions .active {
font-weight: bold;
}
.wall-item-actions a:hover {
color: #555;
}
.wall-item-actions a.active:hover {
.wall-item-actions .active:hover {
color: $link_color;
}
.wall-item-actions-left {
@ -1576,10 +1608,11 @@ code > .hl-main {
.wall-item-actions .button-comments,
.wall-item-actions .button-votes,
.wall-item-actions .button-likes {
padding-left: 0px;
padding-right: 0px;
text-transform: capitalize;
}
.wall-item-actions .separator {
margin: 0 .3em;
}
/* wall item hover effects */
.wall-item-container .wall-item-links,
@ -1662,8 +1695,8 @@ code > .hl-main {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.comment-icon-list a.icon,
.comment-icon-list a.icon:hover {
.comment-icon-list > li > .icon,
.comment-icon-list > li > .icon:hover {
color: #555;
background-color: transparent;
}
@ -1793,12 +1826,14 @@ ul.dropdown-menu li:hover {
/* Dropdown Menu */
.dropdown-menu li a {
.dropdown-menu li a,
.dropdown-menu li .btn-link {
font-size: 13px!important;
font-weight: 600!important;
}
.dropdown-menu li a:hover, .dropdown-menu li a:visited,
.dropdown-menu li a:hover, .dropdown-menu li a:focus {
.dropdown-menu li > :hover,
.dropdown-menu li > :visited,
.dropdown-menu li > :focus {
background: 0 0;
}
@ -2010,22 +2045,22 @@ ul.viewcontact_wrapper > li {
.contact-wrapper .contact-actions {
display: flex;
}
.contact-wrapper a.contact-action-link {
.contact-wrapper .contact-action-link,
.contact-wrapper .contact-action-link:hover,
.textcomplete-item .contact-wrapper .contact-action-link {
padding: 0 5px;
color: #555;
border: 0;
}
.contact-wrapper .contact-action-link {
opacity: 0.1;
transition: all 0.25s ease-in-out;
}
.contact-wrapper a.contact-action-link,
.contact-wrapper a.contact-action-link:hover,
.textcomplete-item .contact-wrapper a.contact-action-link {
padding-right: 5px;
padding-left: 5px;
color: #555;
}
ul li:hover .contact-wrapper a.contact-action-link {
ul li:hover .contact-wrapper .contact-action-link {
opacity: 0.8;
transition: all 0.25s ease-in-out;
}
ul li:hover .contact-wrapper a.contact-action-link:hover {
ul li:hover .contact-wrapper .contact-action-link:hover {
opacity: 1;
}
#contacts-search-wrapper,