mirror of
https://github.com/ascribe/onion.git
synced 2025-02-14 21:10:27 +01:00
Merge pull request #203 from ascribe/upgrade-react-styling
Fix styles for react upgrade
This commit is contained in:
commit
d378ecb0f3
@ -1,6 +1,7 @@
|
||||
'use strict';
|
||||
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import PieceListToolbarFilterWidget from './piece_list_toolbar_filter_widget';
|
||||
import PieceListToolbarOrderWidget from './piece_list_toolbar_order_widget';
|
||||
@ -43,30 +44,26 @@ let PieceListToolbar = React.createClass({
|
||||
const { className, children, searchFor, searchQuery } = this.props;
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="row">
|
||||
<div className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
|
||||
<div className="row">
|
||||
<span className="pull-left">
|
||||
{children}
|
||||
</span>
|
||||
<span className="pull-right">
|
||||
<PieceListToolbarOrderWidget
|
||||
orderParams={this.props.orderParams}
|
||||
orderBy={this.props.orderBy}
|
||||
applyOrderBy={this.props.applyOrderBy}/>
|
||||
<PieceListToolbarFilterWidget
|
||||
filterParams={this.props.filterParams}
|
||||
filterBy={this.props.filterBy}
|
||||
applyFilterBy={this.props.applyFilterBy} />
|
||||
</span>
|
||||
<SearchBar
|
||||
className="pull-right search-bar ascribe-input-glyph"
|
||||
searchFor={searchFor}
|
||||
searchQuery={searchQuery}
|
||||
threshold={AppConstants.searchThreshold}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classNames('row', className)}>
|
||||
<div className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-piece-list-toolbar">
|
||||
<span className="pull-left">
|
||||
{children}
|
||||
</span>
|
||||
<span className="pull-right">
|
||||
<PieceListToolbarOrderWidget
|
||||
orderParams={this.props.orderParams}
|
||||
orderBy={this.props.orderBy}
|
||||
applyOrderBy={this.props.applyOrderBy}/>
|
||||
<PieceListToolbarFilterWidget
|
||||
filterParams={this.props.filterParams}
|
||||
filterBy={this.props.filterBy}
|
||||
applyFilterBy={this.props.applyFilterBy} />
|
||||
</span>
|
||||
<SearchBar
|
||||
className="pull-right search-bar ascribe-input-glyph"
|
||||
searchFor={searchFor}
|
||||
searchQuery={searchQuery}
|
||||
threshold={AppConstants.searchThreshold}/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -192,6 +192,7 @@ let Header = React.createClass({
|
||||
<Navbar.Brand>
|
||||
{this.getLogo()}
|
||||
</Navbar.Brand>
|
||||
<Navbar.Toggle />
|
||||
</Navbar.Header>
|
||||
<Navbar.Collapse
|
||||
eventKey={0}>
|
||||
|
@ -97,7 +97,7 @@ let HeaderNotifications = React.createClass({
|
||||
}
|
||||
|
||||
return (
|
||||
<Nav navbar pullRight>
|
||||
<Nav navbar pullRight className="notification-menu">
|
||||
<DropdownButton
|
||||
ref='dropdownButton'
|
||||
id="header-notification-dropdown"
|
||||
@ -107,8 +107,7 @@ let HeaderNotifications = React.createClass({
|
||||
<Glyphicon glyph='envelope' color="green"/>
|
||||
<span className="notification-amount">({numNotifications})</span>
|
||||
</span>
|
||||
}
|
||||
className="notification-menu">
|
||||
}>
|
||||
{this.renderNotifications({ notifications: pieceListNotifications, isPiece: true })}
|
||||
{this.renderNotifications({ notifications: editionListNotifications, isPiece: false })}
|
||||
</DropdownButton>
|
||||
|
@ -290,7 +290,6 @@ const PieceList = React.createClass({
|
||||
return (
|
||||
<div>
|
||||
<PieceListToolbar
|
||||
className="ascribe-piece-list-toolbar"
|
||||
searchFor={this.searchFor}
|
||||
searchQuery={this.state.search}
|
||||
filterParams={filterParams}
|
||||
|
@ -17,132 +17,6 @@ hr {
|
||||
border-top: 1px solid $ascribe-blue-border;
|
||||
}
|
||||
|
||||
.nav .open > a,
|
||||
.nav .open > a:hover,
|
||||
.nav .open > a:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-default {
|
||||
background-color: $ascribe--nav-bg-color;
|
||||
box-shadow: 0 0 1px rgba(0,0,0,.1),
|
||||
0 1px 2px rgba(0,0,0,.2);
|
||||
|
||||
.navbar-nav > li > a,
|
||||
.navbar-nav > li > .active a {
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: $ascribe--font-weight-light;
|
||||
color: $ascribe--nav-fg-prim-color;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
.navbar-nav > li > a:hover {
|
||||
color: $ascribe--nav-fg-sec-color;
|
||||
}
|
||||
|
||||
.navbar-nav > .active a,
|
||||
.navbar-nav > .active a:hover,
|
||||
.navbar-nav > .active a:focus {
|
||||
color: $ascribe--nav-fg-prim-color;
|
||||
border-bottom-color: $ascribe--nav-fg-prim-color;
|
||||
background-color: $ascribe--nav-bg-color;
|
||||
font-weight: $ascribe--font-weight-light;
|
||||
}
|
||||
|
||||
.navbar-nav > .active {
|
||||
background-color: $ascribe--nav-bg-color;
|
||||
}
|
||||
|
||||
.navbar-nav > .open > a,
|
||||
.dropdown-menu > .active > a {
|
||||
color: $ascribe--nav-fg-prim-color;
|
||||
background-color: $ascribe--nav-bg-color;
|
||||
}
|
||||
|
||||
.navbar-nav > .open > a:hover,
|
||||
.navbar-nav > .open > a:focus,,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
.dropdown-menu > .active > a:focus {
|
||||
background-color: rgba($ascribe--button-default-color, .05);
|
||||
}
|
||||
.dropdown-menu {
|
||||
background-color: $ascribe--nav-bg-color;
|
||||
}
|
||||
.navbar-nav > li > .dropdown-menu {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a {
|
||||
color: $ascribe--nav-fg-prim-color;
|
||||
font-weight: $ascribe--font-weight-light;
|
||||
padding-bottom: 9px;
|
||||
padding-top: 9px;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li > a:focus {
|
||||
background-color: rgba($ascribe--button-default-color, .05);
|
||||
}
|
||||
|
||||
.dropdown-menu > .divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.notification-menu {
|
||||
.dropdown-menu {
|
||||
background-color: white;
|
||||
li:hover {
|
||||
background-color: $ascribe-white;
|
||||
}
|
||||
}
|
||||
.notification-action{
|
||||
color: $ascribe-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 23px;
|
||||
padding: 12px 15px;
|
||||
|
||||
.icon-ascribe-logo {
|
||||
color: $ascribe--nav-fg-prim-color;
|
||||
|
||||
&:hover {
|
||||
color: $ascribe--nav-fg-sec-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.img-brand {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.img-brand .navbar-brand {
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-right: 120px;
|
||||
padding-bottom: 36px;
|
||||
padding-left: 30px;
|
||||
background: transparent no-repeat center 4px;
|
||||
background-size: 150px;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-toggle .icon-bar {
|
||||
background-color: $ascribe--nav-fg-prim-color;
|
||||
}
|
||||
|
||||
.navbar-toggle:hover,
|
||||
.navbar-toggle:focus {
|
||||
background-color: $ascribe--nav-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.ascribe-icon {
|
||||
font-size: 1.2em;
|
||||
font-weight: $ascribe--font-weight-light;
|
||||
@ -367,14 +241,6 @@ fieldset[disabled] .btn-secondary.active {
|
||||
}
|
||||
}
|
||||
|
||||
.open > .btn-default.dropdown-toggle:hover,
|
||||
.open > .btn-default.dropdown-toggle:focus,
|
||||
.open > .btn-default.dropdown-toggle.focus,
|
||||
.open > .btn-default.dropdown-toggle.dropdown-toggle {
|
||||
background-color: darken($ascribe--button-secondary-fg-color, 20%);
|
||||
border-color: darken($ascribe--button-secondary-fg-color, 20%);
|
||||
}
|
||||
|
||||
.pager li > a,
|
||||
.pager li > span {
|
||||
background-color: $ascribe--button-default-color;
|
||||
|
@ -1,4 +1,7 @@
|
||||
.navbar-default {
|
||||
background-color: $ascribe--nav-bg-color;
|
||||
box-shadow: 0 0 1px rgba(0,0,0,.1),
|
||||
0 1px 2px rgba(0,0,0,.2);
|
||||
border: 0;
|
||||
border-color: #ccc;
|
||||
border-left: 0;
|
||||
@ -6,8 +9,142 @@
|
||||
border-top: 0;
|
||||
font-size: .8em;
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
// All Navbar buttons
|
||||
.navbar-nav .dropdown .dropdown-toggle.btn,
|
||||
.navbar-nav > li > a {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
box-shadow: none;
|
||||
color: $ascribe--nav-fg-prim-color;
|
||||
font-size: 12px;
|
||||
font-weight: $ascribe--font-weight-light;
|
||||
line-height: 20px;
|
||||
padding: 15px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: $ascribe--nav-fg-sec-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Currently active route
|
||||
.navbar-nav > li.active > a {
|
||||
background-color: transparent;
|
||||
border-bottom-color: $ascribe--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: $ascribe--nav-fg-prim-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Open dropdowns
|
||||
.navbar-nav .open {
|
||||
.dropdown-toggle.btn {
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($ascribe--button-default-color, .05);
|
||||
color: $ascribe--nav-fg-prim-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu a {
|
||||
color: $ascribe--nav-fg-prim-color;
|
||||
font-weight: $ascribe--font-weight-light;
|
||||
padding-bottom: 9px;
|
||||
padding-top: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu > .divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.notification-menu {
|
||||
.dropdown-toggle.btn:focus,
|
||||
.dropdown-toggle.btn:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 23px;
|
||||
padding: 12px 15px;
|
||||
|
||||
.icon-ascribe-logo {
|
||||
color: $ascribe--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $ascribe--nav-fg-sec-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.img-brand {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
.icon-bar {
|
||||
background-color: $ascribe--nav-fg-prim-color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $ascribe--nav-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* For mobile toggled menu */
|
||||
@media (max-width: 767px) {
|
||||
.navbar-collapse {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown .dropdown-toggle.btn,
|
||||
.navbar-nav > li > a {
|
||||
display: block;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.navbar-nav .open .dropdown-menu > li > a {
|
||||
padding: 5px 15px 5px 25px;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav .open > a,
|
||||
.nav .open > a:hover,
|
||||
.nav .open > a:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
@ -1,7 +1,3 @@
|
||||
$break-small: 764px;
|
||||
$break-medium: 991px;
|
||||
$break-medium: 1200px;
|
||||
|
||||
.notification-header, .notification-wrapper {
|
||||
min-width: 350px;
|
||||
width: 100%;
|
||||
@ -47,27 +43,26 @@ $break-medium: 1200px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sub-header{
|
||||
.sub-header {
|
||||
margin-bottom: 0.6em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.notification-action{
|
||||
color: $ascribe-dark-blue;
|
||||
.notification-action {
|
||||
color: $ascribe-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-menu {
|
||||
.dropdown-menu {
|
||||
padding: 0 !important;
|
||||
li a {
|
||||
padding-top: 0;
|
||||
}
|
||||
border-top: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 70vh;
|
||||
.notification-menu .dropdown-menu {
|
||||
background-color: white;
|
||||
border-top: 0;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
li:hover {
|
||||
background-color: $ascribe-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,8 +1,3 @@
|
||||
.ascribe-piece-list-toolbar {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
max-width: 200px;
|
||||
|
||||
@ -29,42 +24,31 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ascribe-piece-list-toolbar-widget {
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
color: $ascribe--button-default-color;
|
||||
padding: 6px 4px 6px 8px;
|
||||
.ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
color: $ascribe--button-default-color;
|
||||
padding: 6px 4px 6px 8px;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: $ascribe--button-default-color !important;
|
||||
border-color: $ascribe--button-default-color !important;
|
||||
color: white;
|
||||
}
|
||||
.caret {
|
||||
display: none;
|
||||
}
|
||||
.open &,
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: $ascribe--button-default-color !important;
|
||||
border-color: $ascribe--button-default-color !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ascribe-piece-list-toolbar-widget-item {
|
||||
a {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.caret {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ascribe-piece-list-toolbar-widget-item {
|
||||
.checkbox-line {
|
||||
height: 25px;
|
||||
position: relative;
|
||||
color: #333333;
|
||||
|
||||
/* Fuck you react-bootstrap */
|
||||
&:hover {
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
left: 9px;
|
||||
@ -81,7 +65,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.dropdown-menu & {
|
||||
min-width: 170px;
|
||||
}
|
||||
}
|
||||
|
@ -2,11 +2,11 @@
|
||||
$vivi23--fg-color: black;
|
||||
$vivi23--bg-color: white;
|
||||
$vivi23--nav-fg-prim-color: $vivi23--fg-color;
|
||||
$vivi23--nav-fg-sec-color: #2882fa;
|
||||
$vivi23--nav-fg-sec-color: #3a3a3a;
|
||||
$vivi23--nav-bg-color: $vivi23--bg-color;
|
||||
$vivi23--nav-highlight-color: #f8f8f8;
|
||||
$vivi23--button-default-color: $vivi23--fg-color;
|
||||
$vivi23--highlight-color: #2882fa;
|
||||
$vivi23--highlight-color: #de2600;
|
||||
|
||||
|
||||
.client--23vivi {
|
||||
@ -53,69 +53,40 @@ $vivi23--highlight-color: #2882fa;
|
||||
/** Navbar **/
|
||||
.navbar-default {
|
||||
background-color: $vivi23--nav-fg-prim-color;
|
||||
|
||||
.navbar-brand .icon-ascribe-logo {
|
||||
color: $vivi23--bg-color;
|
||||
&:hover {
|
||||
color: darken($vivi23--bg-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar-nav > li > a,
|
||||
.navbar-nav > li > a:focus,
|
||||
.navbar-nav > li > .active a,
|
||||
.navbar-nav > li > .active a:focus {
|
||||
.navbar-nav .dropdown .dropdown-toggle.btn,
|
||||
.navbar-nav > li > a {
|
||||
color: $vivi23--nav-bg-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: darken($vivi23--nav-bg-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav > li > a:hover {
|
||||
color: darken($vivi23--nav-bg-color, 20%);
|
||||
}
|
||||
|
||||
.navbar-nav > .active a,
|
||||
.navbar-nav > .active a:hover,
|
||||
.navbar-nav > .active a:focus {
|
||||
.navbar-nav > li.active > a {
|
||||
background-color: $vivi23--nav-fg-prim-color;
|
||||
border-bottom-color: $vivi23--nav-bg-color;
|
||||
color: $vivi23--nav-bg-color;
|
||||
}
|
||||
|
||||
.navbar-nav > .open > a,
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > li > a {
|
||||
color: $vivi23--nav-fg-prim-color;
|
||||
background-color: $vivi23--nav-bg-color;
|
||||
}
|
||||
|
||||
.navbar-nav > .open > a:hover,
|
||||
.navbar-nav > .open > a:focus,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
.dropdown-menu > .active > a:focus,
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li > a:focus {
|
||||
color: lighten($vivi23--nav-fg-prim-color, 20%);
|
||||
background-color: $vivi23--nav-highlight-color;
|
||||
}
|
||||
|
||||
.navbar-collapse.collapsing,
|
||||
.navbar-collapse.collapse.in {
|
||||
background-color: $vivi23--nav-bg-color;
|
||||
|
||||
.navbar-nav > .open > a,
|
||||
.navbar-nav > .active > a {
|
||||
background-color: $vivi23--nav-highlight-color;
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $vivi23--nav-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse.collapsing li a,
|
||||
.navbar-collapse.collapse.in li a {
|
||||
color: $vivi23--nav-fg-prim-color;
|
||||
}
|
||||
.navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
|
||||
color: lighten($vivi23--nav-fg-prim-color, 20%);
|
||||
background-color: $vivi23--nav-highlight-color;
|
||||
.navbar-nav .open {
|
||||
.dropdown-toggle.btn {
|
||||
background-color: $vivi23--nav-bg-color;
|
||||
color: $vivi23--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $vivi23--nav-highlight-color;
|
||||
color: lighten($vivi23--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
@ -124,15 +95,15 @@ $vivi23--highlight-color: #2882fa;
|
||||
.icon-bar {
|
||||
background-color: $vivi23--highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle:hover,
|
||||
.navbar-toggle:focus {
|
||||
border-color: lighten($vivi23--highlight-color, 10%);
|
||||
background-color: $vivi23--nav-fg-prim-color;
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: lighten($vivi23--highlight-color, 10%);
|
||||
background-color: $vivi23--nav-fg-prim-color;
|
||||
|
||||
.icon-bar {
|
||||
background-color: lighten($vivi23--highlight-color, 10%);
|
||||
.icon-bar {
|
||||
background-color: lighten($vivi23--highlight-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -152,6 +123,40 @@ $vivi23--highlight-color: #2882fa;
|
||||
}
|
||||
}
|
||||
|
||||
/* For mobile toggled menu */
|
||||
@media (max-width: 767px) {
|
||||
.navbar-collapse {
|
||||
background-color: $vivi23--nav-bg-color;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown .dropdown-toggle.btn,
|
||||
.navbar-nav > li > a {
|
||||
color: $vivi23--nav-fg-prim-color;
|
||||
|
||||
&:hover {
|
||||
background-color: $vivi23--nav-highlight-color;
|
||||
color: lighten($vivi23--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .open .dropdown-menu > li > a {
|
||||
color: $vivi23--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $vivi23--nav-highlight-color;
|
||||
color: $vivi23--nav-fg-prim-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav > li.active > a,
|
||||
.navbar-nav > li.active > a:hover,
|
||||
.navbar-nav > li.active > a:focus, {
|
||||
background-color: $vivi23--nav-highlight-color;
|
||||
color: lighten($vivi23--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/** Buttons **/
|
||||
// reset disabled button styling for btn-default
|
||||
.btn-default.disabled,
|
||||
@ -261,7 +266,7 @@ $vivi23--highlight-color: #2882fa;
|
||||
}
|
||||
|
||||
// filter widget
|
||||
.ascribe-piece-list-toolbar-widget button {
|
||||
.ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
|
||||
background-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
color: $vivi23--button-default-color !important;
|
||||
|
@ -61,66 +61,47 @@ $artcity--ter-highlight-color: #EDEDF0;
|
||||
|
||||
.navbar-brand .icon-ascribe-logo {
|
||||
color: $artcity--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: darken($artcity--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar-nav > li > a,
|
||||
.navbar-nav > li > a:focus,
|
||||
.navbar-nav > li > .active a,
|
||||
.navbar-nav > li > .active a:focus {
|
||||
.navbar-nav .dropdown .dropdown-toggle.btn,
|
||||
.navbar-nav > li > a {
|
||||
color: $artcity--nav-fg-prim-color;
|
||||
}
|
||||
|
||||
.navbar-nav > li > a:hover {
|
||||
color: darken($artcity--nav-fg-prim-color, 20%);
|
||||
}
|
||||
|
||||
.navbar-nav > .active a,
|
||||
.navbar-nav > .active a:hover,
|
||||
.navbar-nav > .active a:focus {
|
||||
background-color: $artcity--nav-bg-color;
|
||||
border-bottom-color: $artcity--nav-fg-prim-color;
|
||||
color: $artcity--nav-fg-prim-color;
|
||||
}
|
||||
|
||||
.navbar-nav > .open > a,
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > li > a {
|
||||
color: $artcity--nav-fg-prim-color;
|
||||
background-color: $artcity--nav-bg-color;
|
||||
}
|
||||
|
||||
.navbar-nav > .open > a:hover,
|
||||
.navbar-nav > .open > a:focus,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
.dropdown-menu > .active > a:focus,
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li > a:focus {
|
||||
color: lighten($artcity--nav-fg-prim-color, 20%);
|
||||
background-color: $artcity--nav-highlight-color;
|
||||
}
|
||||
|
||||
.navbar-collapse.collapsing,
|
||||
.navbar-collapse.collapse.in {
|
||||
background-color: $artcity--nav-bg-color;
|
||||
|
||||
.navbar-nav > .open > a,
|
||||
.navbar-nav > .active > a {
|
||||
background-color: $artcity--nav-highlight-color;
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: darken($artcity--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse.collapsing li a,
|
||||
.navbar-collapse.collapse.in li a {
|
||||
.navbar-nav > li.active > a {
|
||||
background-color: $artcity--nav-bg-color;
|
||||
border-bottom-color: $artcity--nav-fg-prim-color;
|
||||
color: $artcity--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $artcity--nav-fg-prim-color;
|
||||
}
|
||||
}
|
||||
.navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
|
||||
color: lighten($artcity--nav-fg-prim-color, 20%);
|
||||
background-color: $artcity--nav-highlight-color;
|
||||
|
||||
.navbar-nav .open {
|
||||
.dropdown-toggle.btn,
|
||||
.dropdown-menu a {
|
||||
color: $artcity--nav-fg-prim-color;
|
||||
background-color: $artcity--nav-bg-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $artcity--nav-highlight-color;
|
||||
color: lighten($artcity--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
@ -129,15 +110,15 @@ $artcity--ter-highlight-color: #EDEDF0;
|
||||
.icon-bar {
|
||||
background-color: $artcity--highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle:hover,
|
||||
.navbar-toggle:focus {
|
||||
border-color: lighten($artcity--highlight-color, 10%);
|
||||
background-color: $artcity--nav-fg-prim-color;
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $artcity--nav-fg-prim-color;
|
||||
border-color: lighten($artcity--highlight-color, 10%);
|
||||
|
||||
.icon-bar {
|
||||
background-color: lighten($artcity--highlight-color, 10%);
|
||||
.icon-bar {
|
||||
background-color: lighten($artcity--highlight-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -157,6 +138,41 @@ $artcity--ter-highlight-color: #EDEDF0;
|
||||
}
|
||||
}
|
||||
|
||||
/* For mobile toggled menu */
|
||||
@media (max-width: 767px) {
|
||||
.navbar-collapse {
|
||||
background-color: $artcity--nav-bg-color;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown .dropdown-toggle.btn,
|
||||
.navbar-nav > li > a {
|
||||
color: $artcity--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $artcity--nav-highlight-color;
|
||||
color: lighten($artcity--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .open .dropdown-menu > li > a {
|
||||
color: $artcity--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $artcity--nav-highlight-color;
|
||||
color: $artcity--nav-fg-prim-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav > li.active > a,
|
||||
.navbar-nav > li.active > a:hover,
|
||||
.navbar-nav > li.active > a:focus, {
|
||||
background-color: $artcity--nav-highlight-color;
|
||||
color: lighten($artcity--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/** Buttons **/
|
||||
// reset disabled button styling for btn-default
|
||||
.btn-default.disabled,
|
||||
@ -286,7 +302,7 @@ $artcity--ter-highlight-color: #EDEDF0;
|
||||
}
|
||||
|
||||
// filter widget
|
||||
.ascribe-piece-list-toolbar-widget button {
|
||||
.ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
|
||||
background-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
color: $artcity--button-default-color !important;
|
||||
|
@ -8,50 +8,64 @@ $cc--button-color: $cc--nav-fg-prim-color;
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.navbar-nav > li > a,
|
||||
.navbar-nav > li > .active a {
|
||||
|
||||
.navbar-nav .dropdown .dropdown-toggle.btn,
|
||||
.navbar-nav > li > a {
|
||||
color: $cc--nav-fg-prim-color;
|
||||
background-color: $cc--nav-bg-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: lighten($cc--nav-fg-prim-color, 40%);
|
||||
}
|
||||
}
|
||||
.navbar-nav > li > a:hover {
|
||||
color: lighten($cc--nav-fg-prim-color, 40%);
|
||||
}
|
||||
.navbar-nav > .active a,
|
||||
.navbar-nav > .active a:hover,
|
||||
.navbar-nav > .active a:focus {
|
||||
|
||||
.navbar-nav > li.active > a {
|
||||
color: $cc--nav-fg-prim-color;
|
||||
border-bottom-color: $cc--nav-fg-prim-color;
|
||||
background-color: $cc--nav-bg-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $cc--nav-fg-prim-color;
|
||||
}
|
||||
}
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li > a:focus {
|
||||
color: lighten($cc--nav-fg-prim-color, 40%);
|
||||
background-color: $cc--nav-bg-color;
|
||||
}
|
||||
.navbar-nav > .open > a,
|
||||
.navbar-nav > .open > a:hover,
|
||||
.navbar-nav > .open > a:focus,
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
.dropdown-menu > .active > a:focus {
|
||||
color: lighten($cc--nav-fg-prim-color, 40%);
|
||||
background-color: $cc--nav-bg-color;
|
||||
|
||||
.navbar-nav .open {
|
||||
.dropdown-toggle.btn {
|
||||
background-color: $cc--nav-bg-color;
|
||||
color: lighten($cc--nav-fg-prim-color, 40%);
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $cc--nav-bg-color;
|
||||
color: lighten($cc--nav-fg-prim-color, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu a {
|
||||
color: $cc--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: lighten($cc--nav-fg-prim-color, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: $cc--nav-bg-color;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a {
|
||||
color: $cc--nav-fg-prim-color;
|
||||
}
|
||||
.navbar-toggle {
|
||||
.icon-bar {
|
||||
background-color: $cc--nav-fg-prim-color;
|
||||
}
|
||||
|
||||
.navbar-toggle .icon-bar {
|
||||
background-color: $cc--nav-fg-prim-color;
|
||||
}
|
||||
|
||||
.navbar-toggle:hover,
|
||||
.navbar-toggle:focus {
|
||||
background-color: $cc--nav-bg-color;
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $cc--nav-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -111,7 +125,7 @@ $cc--button-color: $cc--nav-fg-prim-color;
|
||||
// thought of the day:
|
||||
// "every great atrocity is the result of people just following orders"
|
||||
.client--cc {
|
||||
.ascribe-piece-list-toolbar-widget button {
|
||||
.ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
|
||||
color: $cc--button-color !important;
|
||||
background-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
|
@ -9,50 +9,65 @@ $cyland--button-sec-color: #515151;
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.navbar-nav > li > a,
|
||||
.navbar-nav > li > .active a {
|
||||
|
||||
.navbar-nav .dropdown .dropdown-toggle.btn,
|
||||
.navbar-nav > li > a {
|
||||
color: $cyland--nav-fg-prim-color;
|
||||
background-color: $cyland--nav-bg-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: lighten($cyland--nav-fg-prim-color, 40%);
|
||||
}
|
||||
}
|
||||
.navbar-nav > li > a:hover {
|
||||
color: lighten($cyland--nav-fg-prim-color, 40%);
|
||||
}
|
||||
.navbar-nav > .active a,
|
||||
.navbar-nav > .active a:hover,
|
||||
.navbar-nav > .active a:focus {
|
||||
|
||||
.navbar-nav > li.active > a {
|
||||
color: $cyland--nav-fg-prim-color;
|
||||
border-bottom-color: $cyland--nav-fg-prim-color;
|
||||
background-color: $cyland--nav-bg-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $cyland--nav-fg-prim-color;
|
||||
}
|
||||
}
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li > a:focus {
|
||||
color: lighten($cyland--nav-fg-prim-color, 40%);
|
||||
background-color: $cyland--nav-bg-color;
|
||||
}
|
||||
.navbar-nav > .open > a,
|
||||
.navbar-nav > .open > a:hover,
|
||||
.navbar-nav > .open > a:focus,
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
.dropdown-menu > .active > a:focus {
|
||||
color: lighten($cyland--nav-fg-prim-color, 40%);
|
||||
background-color: $cyland--nav-bg-color;
|
||||
|
||||
.navbar-nav .open {
|
||||
.dropdown-toggle.btn {
|
||||
background-color: $cyland--nav-bg-color;
|
||||
color: lighten($cyland--nav-fg-prim-color, 40%);
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $cyland--nav-bg-color;
|
||||
color: lighten($cyland--nav-fg-prim-color, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu a {
|
||||
color: $cc--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $cyland--nav-bg-color;
|
||||
color: lighten($cc--nav-fg-prim-color, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: $cyland--nav-bg-color;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a {
|
||||
color: $cyland--nav-fg-prim-color;
|
||||
}
|
||||
.navbar-toggle {
|
||||
.icon-bar {
|
||||
background-color: $cyland--nav-fg-prim-color;
|
||||
}
|
||||
|
||||
.navbar-toggle .icon-bar {
|
||||
background-color: $cyland--nav-fg-prim-color;
|
||||
}
|
||||
|
||||
.navbar-toggle:hover,
|
||||
.navbar-toggle:focus {
|
||||
background-color: $cyland--nav-bg-color;
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $cyland--nav-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -64,7 +79,7 @@ $cyland--button-sec-color: #515151;
|
||||
// thought of the day:
|
||||
// "every great atrocity is the result of people just following orders"
|
||||
.client--cyland {
|
||||
.ascribe-piece-list-toolbar-widget button {
|
||||
.ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
|
||||
color: $cyland--button-color !important;
|
||||
background-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
|
@ -23,91 +23,77 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
|
||||
background-color: $ikono--bg-color;
|
||||
box-shadow: none;
|
||||
|
||||
.navbar-nav > li > a,
|
||||
.navbar-nav > li > .active a {
|
||||
text-transform: uppercase;
|
||||
.navbar-nav .dropdown .dropdown-toggle.btn,
|
||||
.navbar-nav > li > a {
|
||||
border-bottom-color: transparent;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.navbar-nav > li > a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar-nav > .active a,
|
||||
.navbar-nav > .active a:hover,
|
||||
.navbar-nav > .active a:focus {
|
||||
color: black;
|
||||
border-bottom-color: transparent;
|
||||
background-color: transparent;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.navbar-nav > .active {
|
||||
.navbar-nav > li.active {
|
||||
background-color: white;
|
||||
|
||||
& > a {
|
||||
color: black;
|
||||
background-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle .icon-bar {
|
||||
background-color: white;
|
||||
}
|
||||
.navbar-nav .open {
|
||||
.dropdown-toggle.btn {
|
||||
background-color: $ikono--bg-color;
|
||||
color: white;
|
||||
|
||||
.navbar-nav > .open > a,
|
||||
.navbar-nav > .open > a:hover,
|
||||
.navbar-nav > .open > a:focus,
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
.dropdown-menu > .active > a:focus {
|
||||
color: white;
|
||||
background-color: $ikono--bg-color;
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $ikono--bg-color;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu a {
|
||||
color: white;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: white;
|
||||
color: $ikono--bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: $ikono--bg-color;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li > a:focus {
|
||||
color: $ikono--bg-color;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.notification-menu {
|
||||
.dropdown-menu {
|
||||
.navbar-toggle {
|
||||
.icon-bar {
|
||||
background-color: white;
|
||||
li:hover {
|
||||
background-color: rgba($ikono--button-color, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.img-brand.navbar-brand {
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-right: 120px;
|
||||
padding-bottom: 36px;
|
||||
padding-left: 30px;
|
||||
background-image: url($ikono--logo);
|
||||
background-color: transparent;
|
||||
background-position: center 4px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 150px;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
.notification-menu .dropdown-menu {
|
||||
background-color: white;
|
||||
|
||||
li:hover {
|
||||
background-color: rgba($ikono--button-color, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle:hover,
|
||||
.navbar-toggle:focus {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
/* For mobile toggled menu */
|
||||
@media (max-width: 767px) {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.client--ikonotv {
|
||||
.route--landing,
|
||||
.route--login,
|
||||
@ -371,7 +357,7 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
|
||||
// thought of the day:
|
||||
// "every great atrocity is the result of people just following orders"
|
||||
.client--ikonotv {
|
||||
.ascribe-piece-list-toolbar-widget button {
|
||||
.ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
|
||||
color: $ikono--button-color !important;
|
||||
background-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
|
@ -58,66 +58,47 @@ $market--highlight-color: #2882fa;
|
||||
|
||||
.navbar-brand .icon-ascribe-logo {
|
||||
color: $market--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: darken($market--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar-nav > li > a,
|
||||
.navbar-nav > li > a:focus,
|
||||
.navbar-nav > li > .active a,
|
||||
.navbar-nav > li > .active a:focus {
|
||||
.navbar-nav .dropdown .dropdown-toggle.btn,
|
||||
.navbar-nav > li > a {
|
||||
color: $market--nav-fg-prim-color;
|
||||
}
|
||||
|
||||
.navbar-nav > li > a:hover {
|
||||
color: darken($market--nav-fg-prim-color, 20%);
|
||||
}
|
||||
|
||||
.navbar-nav > .active a,
|
||||
.navbar-nav > .active a:hover,
|
||||
.navbar-nav > .active a:focus {
|
||||
background-color: $market--nav-bg-color;
|
||||
border-bottom-color: $market--nav-fg-prim-color;
|
||||
color: $market--nav-fg-prim-color;
|
||||
}
|
||||
|
||||
.navbar-nav > .open > a,
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > li > a {
|
||||
color: $market--nav-fg-prim-color;
|
||||
background-color: $market--nav-bg-color;
|
||||
}
|
||||
|
||||
.navbar-nav > .open > a:hover,
|
||||
.navbar-nav > .open > a:focus,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
.dropdown-menu > .active > a:focus,
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li > a:focus {
|
||||
color: lighten($market--nav-fg-prim-color, 20%);
|
||||
background-color: $market--nav-highlight-color;
|
||||
}
|
||||
|
||||
.navbar-collapse.collapsing,
|
||||
.navbar-collapse.collapse.in {
|
||||
background-color: $market--nav-bg-color;
|
||||
|
||||
.navbar-nav > .open > a,
|
||||
.navbar-nav > .active > a {
|
||||
background-color: $market--nav-highlight-color;
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: darken($market--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse.collapsing li a,
|
||||
.navbar-collapse.collapse.in li a {
|
||||
.navbar-nav > li.active > a {
|
||||
background-color: $market--nav-bg-color;
|
||||
border-bottom-color: $market--nav-fg-prim-color;
|
||||
color: $market--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $market--nav-fg-prim-color;
|
||||
}
|
||||
}
|
||||
.navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
|
||||
color: lighten($market--nav-fg-prim-color, 20%);
|
||||
background-color: $market--nav-highlight-color;
|
||||
|
||||
.navbar-nav .open {
|
||||
.dropdown-toggle.btn,
|
||||
.dropdown-menu a {
|
||||
background-color: $market--nav-bg-color;
|
||||
color: $market--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $market--nav-highlight-color;
|
||||
color: lighten($market--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
@ -126,15 +107,15 @@ $market--highlight-color: #2882fa;
|
||||
.icon-bar {
|
||||
background-color: $market--highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle:hover,
|
||||
.navbar-toggle:focus {
|
||||
border-color: lighten($market--highlight-color, 10%);
|
||||
background-color: $market--nav-fg-prim-color;
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: lighten($market--highlight-color, 10%);
|
||||
background-color: $market--nav-fg-prim-color;
|
||||
|
||||
.icon-bar {
|
||||
background-color: lighten($market--highlight-color, 10%);
|
||||
.icon-bar {
|
||||
background-color: lighten($market--highlight-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -154,6 +135,41 @@ $market--highlight-color: #2882fa;
|
||||
}
|
||||
}
|
||||
|
||||
/* For mobile toggled menu */
|
||||
@media (max-width: 767px) {
|
||||
.navbar-collapse {
|
||||
background-color: $market--nav-bg-color;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown .dropdown-toggle.btn,
|
||||
.navbar-nav > li > a {
|
||||
color: $market--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $market--nav-highlight-color;
|
||||
color: lighten($market--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .open .dropdown-menu > li > a {
|
||||
color: $market--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $market--nav-highlight-color;
|
||||
color: $market--nav-fg-prim-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav > li.active > a,
|
||||
.navbar-nav > li.active > a:hover,
|
||||
.navbar-nav > li.active > a:focus, {
|
||||
background-color: $market--nav-highlight-color;
|
||||
color: lighten($market--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/** Buttons **/
|
||||
// reset disabled button styling for btn-default
|
||||
.btn-default.disabled,
|
||||
@ -271,7 +287,7 @@ $market--highlight-color: #2882fa;
|
||||
}
|
||||
|
||||
// filter widget
|
||||
.ascribe-piece-list-toolbar-widget button {
|
||||
.ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
|
||||
background-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
color: $market--button-default-color !important;
|
||||
|
@ -53,76 +53,56 @@ $polline--highlight-color: #2882fa;
|
||||
.navbar-default {
|
||||
background-color: $polline--bg-color;
|
||||
|
||||
.navbar-brand .img-brand {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: 0 5px 0 15px;
|
||||
}
|
||||
|
||||
.navbar-brand .icon-ascribe-logo {
|
||||
color: $polline--nav-fg-prim-color;
|
||||
&:hover {
|
||||
color: darken($polline--nav-fg-prim-color, 20%);
|
||||
.img-brand {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon-ascribe-logo {
|
||||
color: $polline--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: darken($polline--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar-nav > li > a,
|
||||
.navbar-nav > li > a:focus,
|
||||
.navbar-nav > li > .active a,
|
||||
.navbar-nav > li > .active a:focus {
|
||||
.navbar-nav .dropdown .dropdown-toggle.btn,
|
||||
.navbar-nav > li > a {
|
||||
color: $polline--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: darken($polline--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav > li > a:hover {
|
||||
color: darken($polline--nav-fg-prim-color, 20%);
|
||||
}
|
||||
|
||||
.navbar-nav > .active a,
|
||||
.navbar-nav > .active a:hover,
|
||||
.navbar-nav > .active a:focus {
|
||||
.navbar-nav > li.active > a {
|
||||
background-color: $polline--nav-bg-color;
|
||||
border-bottom-color: $polline--nav-fg-prim-color;
|
||||
color: $polline--nav-fg-prim-color;
|
||||
}
|
||||
|
||||
.navbar-nav > .open > a,
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > li > a {
|
||||
color: $polline--nav-fg-prim-color;
|
||||
background-color: $polline--nav-bg-color;
|
||||
}
|
||||
|
||||
.navbar-nav > .open > a:hover,
|
||||
.navbar-nav > .open > a:focus,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
.dropdown-menu > .active > a:focus,
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li > a:focus {
|
||||
color: lighten($polline--nav-fg-prim-color, 20%);
|
||||
background-color: $polline--nav-highlight-color;
|
||||
}
|
||||
|
||||
.navbar-collapse.collapsing,
|
||||
.navbar-collapse.collapse.in {
|
||||
background-color: $polline--nav-bg-color;
|
||||
|
||||
.navbar-nav > .open > a,
|
||||
.navbar-nav > .active > a {
|
||||
background-color: $polline--nav-highlight-color;
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $polline--nav-fg-prim-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse.collapsing li a,
|
||||
.navbar-collapse.collapse.in li a {
|
||||
color: $polline--nav-fg-prim-color;
|
||||
}
|
||||
.navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
|
||||
color: lighten($polline--nav-fg-prim-color, 20%);
|
||||
background-color: $polline--nav-highlight-color;
|
||||
.navbar-nav .open {
|
||||
.dropdown-toggle.btn,
|
||||
.dropdown-menu a {
|
||||
color: $polline--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $polline--nav-highlight-color;
|
||||
color: lighten($polline--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
@ -159,6 +139,41 @@ $polline--highlight-color: #2882fa;
|
||||
}
|
||||
}
|
||||
|
||||
/* For mobile toggled menu */
|
||||
@media (max-width: 767px) {
|
||||
.navbar-collapse {
|
||||
background-color: $polline--nav-bg-color;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown .dropdown-toggle.btn,
|
||||
.navbar-nav > li > a {
|
||||
color: $polline--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $polline--nav-highlight-color;
|
||||
color: lighten($polline--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .open .dropdown-menu > li > a {
|
||||
color: $polline--nav-fg-prim-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $polline--nav-highlight-color;
|
||||
color: $polline--nav-fg-prim-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav > li.active > a,
|
||||
.navbar-nav > li.active > a:hover,
|
||||
.navbar-nav > li.active > a:focus, {
|
||||
background-color: $polline--nav-highlight-color;
|
||||
color: lighten($polline--nav-fg-prim-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/** Buttons **/
|
||||
// reset disabled button styling for btn-default
|
||||
.btn-default.disabled,
|
||||
@ -276,7 +291,7 @@ $polline--highlight-color: #2882fa;
|
||||
}
|
||||
|
||||
// filter widget
|
||||
.ascribe-piece-list-toolbar-widget button {
|
||||
.ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
|
||||
background-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
color: $polline--button-default-color !important;
|
||||
|
@ -33,7 +33,7 @@ gemini.suite('Authenticated', (suite) => {
|
||||
});
|
||||
});
|
||||
|
||||
gemini.suite('Authenticated', (authenticatedSuite) => {
|
||||
gemini.suite('Authenticated', () => {
|
||||
gemini.suite('Header-desktop', (headerSuite) => {
|
||||
headerSuite
|
||||
.setCaptureElements('nav.navbar .container')
|
||||
@ -48,17 +48,38 @@ gemini.suite('Authenticated', (suite) => {
|
||||
|
||||
gemini.suite('User dropdown', (headerUserSuite) => {
|
||||
headerUserSuite
|
||||
.setCaptureElements('#nav-route-user-dropdown ~ .dropdown-menu')
|
||||
.setCaptureElements('#nav-route-user-dropdown-container .dropdown-menu')
|
||||
.capture('expanded user dropdown', (actions, find) => {
|
||||
actions.click(find('#nav-route-user-dropdown'));
|
||||
|
||||
// React-bootstrap's dropdown buttons are wrapped around list items when they're in a navigation
|
||||
// context, so we can't use a simple sibling selector here to capture the dropdown menu. Instead,
|
||||
// we'll manually add an id to the dropdown container to allow us to select it.
|
||||
// eslint-disable-next-line prefer-arrow-callback
|
||||
actions.executeJS(function addIdToUserDropdownContainer(window) {
|
||||
/* eslint-disable no-var, prefer-template */
|
||||
var userDropdownButtonSelector = '#nav-route-user-dropdown';
|
||||
var userDropdownButton = window.document.querySelector(userDropdownButtonSelector);
|
||||
|
||||
var parentEl = userDropdownButton.parentElement;
|
||||
while (parentEl && parentEl.className.split(' ').indexOf('dropdown') === -1) {
|
||||
parentEl = parentEl.parentElement;
|
||||
}
|
||||
|
||||
if (parentEl) {
|
||||
parentEl.id = 'nav-route-user-dropdown-container';
|
||||
}
|
||||
/* eslint-enable no-var */
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
gemini.suite('Notification dropdown', (headerNotificationSuite) => {
|
||||
headerNotificationSuite
|
||||
.setCaptureElements('#header-notification-dropdown ~ .dropdown-menu')
|
||||
.setCaptureElements('.notification-menu .dropdown-menu')
|
||||
.capture('expanded notifications dropdown', (actions, find) => {
|
||||
actions.click(find('#header-notification-dropdown'));
|
||||
actions.waitForElementToShow('.notification-menu .dropdown-menu', TIMEOUTS.SHORT);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -110,7 +131,8 @@ gemini.suite('Authenticated', (suite) => {
|
||||
collectionPlaceholderSuite
|
||||
.setCaptureElements('.ascribe-accordion-list-placeholder')
|
||||
.capture('collection empty search', (actions, find) => {
|
||||
actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'), 'no search result');
|
||||
actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'),
|
||||
'no search result');
|
||||
actions.waitForElementToShow('.ascribe-accordion-list-placeholder', TIMEOUTS.NORMAL);
|
||||
});
|
||||
});
|
||||
@ -136,7 +158,7 @@ gemini.suite('Authenticated', (suite) => {
|
||||
.capture('piece list toolbar search filled', (actions, find) => {
|
||||
actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'), 'search text');
|
||||
actions.waitForElementToShow('.ascribe-piece-list-toolbar .search-bar .icon-ascribe-search',
|
||||
TIMEOUTS.NORMAL);
|
||||
TIMEOUTS.LONG);
|
||||
});
|
||||
|
||||
gemini.suite('Order widget dropdown', (pieceListToolbarOrderWidgetSuite) => {
|
||||
@ -147,7 +169,8 @@ gemini.suite('Authenticated', (suite) => {
|
||||
actions.click(find('#ascribe-piece-list-toolbar-order-widget-dropdown'));
|
||||
|
||||
// Wait as the dropdown screenshot still includes the collection in the background
|
||||
actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
|
||||
actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)',
|
||||
TIMEOUTS.NORMAL);
|
||||
});
|
||||
});
|
||||
|
||||
@ -159,7 +182,8 @@ gemini.suite('Authenticated', (suite) => {
|
||||
actions.click(find('#ascribe-piece-list-toolbar-filter-widget-dropdown'));
|
||||
|
||||
// Wait as the dropdown screenshot still includes the collection in the background
|
||||
actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
|
||||
actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)',
|
||||
TIMEOUTS.NORMAL);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -62,7 +62,6 @@ gemini.suite('Authenticated work detail', (suite) => {
|
||||
.setUrl('/login')
|
||||
.ignoreElements('.ascribe-body')
|
||||
.capture('logged in', (actions, find) => {
|
||||
console.log('logging in');
|
||||
actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), MAIN_USER.email);
|
||||
actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), MAIN_USER.password);
|
||||
actions.click(find('.ascribe-login-wrapper button[type=submit]'));
|
||||
@ -83,7 +82,6 @@ gemini.suite('Authenticated work detail', (suite) => {
|
||||
});
|
||||
|
||||
gemini.suite('Authorized piece', (authorizedPieceSuite) => {
|
||||
console.log('authorized piece');
|
||||
authorizedPieceSuite
|
||||
.setUrl(pieceUrl)
|
||||
.capture('authorized piece');
|
||||
@ -99,7 +97,6 @@ gemini.suite('Authenticated work detail', (suite) => {
|
||||
detailActionButtonSuite
|
||||
.setUrl(editionUrl)
|
||||
.capture('hover on action button', (actions, find) => {
|
||||
console.log('hover on action button');
|
||||
actions.mouseMove(find('.ascribe-detail-property .ascribe-button-list button.btn-default'));
|
||||
})
|
||||
.capture('hover on delete button', (actions, find) => {
|
||||
@ -147,7 +144,6 @@ gemini.suite('Authenticated work detail', (suite) => {
|
||||
.setUrl('/logout')
|
||||
.ignoreElements('.ascribe-body')
|
||||
.before((actions) => {
|
||||
console.log('before log out');
|
||||
actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
|
||||
})
|
||||
.capture('logout', (actions) => {
|
||||
|
Loading…
Reference in New Issue
Block a user