diff --git a/fonts/ascribe-logo.eot b/fonts/ascribe-logo.eot new file mode 100644 index 00000000..ed256abe Binary files /dev/null and b/fonts/ascribe-logo.eot differ diff --git a/sass/ascribe-fonts/ascribe-logo-v2.svg b/fonts/ascribe-logo.svg similarity index 57% rename from sass/ascribe-fonts/ascribe-logo-v2.svg rename to fonts/ascribe-logo.svg index 771fb1b8..e765a6ce 100644 --- a/sass/ascribe-fonts/ascribe-logo-v2.svg +++ b/fonts/ascribe-logo.svg @@ -3,9 +3,13 @@ Generated by IcoMoon - + \ No newline at end of file diff --git a/fonts/ascribe-logo.ttf b/fonts/ascribe-logo.ttf new file mode 100644 index 00000000..4b4f26b8 Binary files /dev/null and b/fonts/ascribe-logo.ttf differ diff --git a/fonts/ascribe-logo.woff b/fonts/ascribe-logo.woff new file mode 100644 index 00000000..0855f268 Binary files /dev/null and b/fonts/ascribe-logo.woff differ diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js index e403db70..8b00e8dc 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item.js +++ b/js/components/ascribe_accordion_list/accordion_list_item.js @@ -29,21 +29,26 @@ let AccordionListItem = React.createClass({
-
-
- {this.props.thumbnail} + +
+ {this.props.thumbnail} +
+ +
+
+ + {this.props.heading} + + + {this.props.subheading} + {this.props.subsubheading} + +
+ {this.props.buttons}
-
- {this.props.heading} - {this.props.subheading} - {this.props.subsubheading} -
- -
- {this.props.buttons} -
+
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js index 0890db00..b6d6c4de 100644 --- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js +++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js @@ -68,7 +68,7 @@ let PieceListToolbar = React.createClass({ }, render() { - let searchIcon = ; + let searchIcon = ; return (
@@ -78,6 +78,10 @@ let PieceListToolbar = React.createClass({ {this.props.children} + + {this.getOrderWidget()} + {this.getFilterWidget()} + - - {this.getOrderWidget()} - {this.getFilterWidget()} - +
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js index 9cb8b94f..16886def 100644 --- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js +++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js @@ -76,7 +76,7 @@ let PieceListToolbarFilterWidgetFilter = React.createClass({ render() { let filterIcon = ( - + * ); diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js index a44b8ca2..a3615aec 100644 --- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js +++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js @@ -47,8 +47,8 @@ let PieceListToolbarOrderWidget = React.createClass({ render() { let filterIcon = ( - - * + + · ); return ( diff --git a/js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js b/js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js index 7b3d5de0..e6d1d055 100644 --- a/js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js +++ b/js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js @@ -184,7 +184,7 @@ let AccordionListItemPrize = React.createClass({ piece={this.props.content} artistName={artistName} subsubheading={ -
+
{this.props.content.date_created.split('-')[0]}
} buttons={this.getPrizeButtons()} diff --git a/sass/ascribe-fonts/ascribe-fonts.scss b/sass/ascribe-fonts/ascribe-fonts.scss index 58784b42..cec52964 100644 --- a/sass/ascribe-fonts/ascribe-fonts.scss +++ b/sass/ascribe-fonts/ascribe-fonts.scss @@ -24,18 +24,18 @@ } @font-face { - font-family: 'ascribe-logo-v2'; - src:url('#{$BASE_URL}static/fonts/ascribe-logo-v2.eot?8e00ie'); - src:url('#{$BASE_URL}static/fonts/ascribe-logo-v2.eot?8e00ie#iefix') format('embedded-opentype'), - url('#{$BASE_URL}static/fonts/ascribe-logo-v2.ttf?8e00ie') format('truetype'), - url('#{$BASE_URL}static/fonts/ascribe-logo-v2.woff?8e00ie') format('woff'), - url('#{$BASE_URL}static/fonts/ascribe-logo-v2.svg?8e00ie#ascribe-logo-v2') format('svg'); + font-family: 'ascribe-logo'; + src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?qdbpt8'); + src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?qdbpt8#iefix') format('embedded-opentype'), + url('#{$BASE_URL}static/fonts/ascribe-logo.ttf?qdbpt8') format('truetype'), + url('#{$BASE_URL}static/fonts/ascribe-logo.woff?qdbpt8') format('woff'), + url('#{$BASE_URL}static/fonts/ascribe-logo.svg?qdbpt8#ascribe-logo') format('svg'); font-weight: normal; font-style: normal; } -[class^="icon-"], [class*=" icon-"] { - font-family: 'ascribe-logo-v2'; +[class^="icon-ascribe-"], [class*=" icon-ascribe-"] { + font-family: 'ascribe-logo'; speak: none; font-style: normal; font-weight: normal; @@ -48,9 +48,21 @@ -moz-osx-font-smoothing: grayscale; } -.icon-ascribe-logo:before { +.icon-ascribe-sort:before { content: "\e800"; } +.icon-ascribe-filter:before { + content: "\e801"; +} +.icon-ascribe-search:before { + content: "\e802"; +} +.icon-ascribe-logo-short:before { + content: "\e803"; +} +.icon-ascribe-logo:before { + content: "\e804"; +} .glyph-ascribe-logo-spool:before { diff --git a/sass/ascribe-fonts/ascribe-logo-v2.eot b/sass/ascribe-fonts/ascribe-logo-v2.eot deleted file mode 100644 index cb57c523..00000000 Binary files a/sass/ascribe-fonts/ascribe-logo-v2.eot and /dev/null differ diff --git a/sass/ascribe-fonts/ascribe-logo-v2.ttf b/sass/ascribe-fonts/ascribe-logo-v2.ttf deleted file mode 100644 index 775c957d..00000000 Binary files a/sass/ascribe-fonts/ascribe-logo-v2.ttf and /dev/null differ diff --git a/sass/ascribe-fonts/ascribe-logo-v2.woff b/sass/ascribe-fonts/ascribe-logo-v2.woff deleted file mode 100644 index 8c7ed715..00000000 Binary files a/sass/ascribe-fonts/ascribe-logo-v2.woff and /dev/null differ diff --git a/sass/ascribe-fonts/style.scss b/sass/ascribe-fonts/style.scss deleted file mode 100644 index c753e780..00000000 --- a/sass/ascribe-fonts/style.scss +++ /dev/null @@ -1,193 +0,0 @@ -@font-face { - font-family: 'ascribe'; - src:url('../../fonts/ascribe.eot?-6bb2dq'); - src:url('../../fonts/ascribe.eot?#iefix-6bb2dq') format('embedded-opentype'), - url('../../fonts/ascribe.woff?-6bb2dq') format('woff'), - url('../../fonts/ascribe.ttf?-6bb2dq') format('truetype'), - url('../../fonts/ascribe.svg?-6bb2dq#ascribe') format('svg'); - font-weight: normal; - font-style: normal; -} - -[class^="glyph-ascribe-"], [class*=" glyph-ascribe-"] { - font-family: 'ascribe'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.glyph-ascribe-ascribe-spool:before { - content: "\e600"; -} - -.glyph-ascribe-spool:before { - content: "\e601"; -} - -.glyph-ascribe-ascribe-spool-chunked:before { - content: "\e602"; -} - -.glyph-ascribe-spool-chunked:before { - content: "\e603"; -} - -.glyph-ascribe-home:before { - content: "\e900"; -} - -.glyph-ascribe-home2:before { - content: "\e901"; -} - -.glyph-ascribe-home3:before { - content: "\e902"; -} - -.glyph-ascribe-pencil:before { - content: "\e905"; -} - -.glyph-ascribe-pencil2:before { - content: "\e906"; -} - -.glyph-ascribe-quill:before { - content: "\e907"; -} - -.glyph-ascribe-image:before { - content: "\e90d"; -} - -.glyph-ascribe-camera:before { - content: "\e90f"; -} - -.glyph-ascribe-music:before { - content: "\e911"; -} - -.glyph-ascribe-play:before { - content: "\e912"; -} - -.glyph-ascribe-film:before { - content: "\e913"; -} - -.glyph-ascribe-credit-card:before { - content: "\e93f"; -} - -.glyph-ascribe-pushpin:before { - content: "\e946"; -} - -.glyph-ascribe-undo2:before { - content: "\e967"; -} - -.glyph-ascribe-redo2:before { - content: "\e968"; -} - -.glyph-ascribe-enlarge:before { - content: "\e989"; -} - -.glyph-ascribe-shrink:before { - content: "\e98a"; -} - -.glyph-ascribe-enlarge2:before { - content: "\e98b"; -} - -.glyph-ascribe-shrink2:before { - content: "\e98c"; -} - -.glyph-ascribe-share:before { - content: "\ea7d"; -} - -.glyph-ascribe-new-tab:before { - content: "\ea7e"; -} - -.glyph-ascribe-share2:before { - content: "\ea82"; -} - -.glyph-ascribe-google:before { - content: "\ea87"; -} - -.glyph-ascribe-google-plus:before { - content: "\ea88"; -} - -.glyph-ascribe-google-plus2:before { - content: "\ea89"; -} - -.glyph-ascribe-facebook:before { - content: "\ea8c"; -} - -.glyph-ascribe-facebook2:before { - content: "\ea8d"; -} - -.glyph-ascribe-twitter:before { - content: "\ea91"; -} - -.glyph-ascribe-twitter2:before { - content: "\ea92"; -} - -.glyph-ascribe-youtube3:before { - content: "\ea99"; -} - -.glyph-ascribe-dropbox:before { - content: "\eaaf"; -} - -.glyph-ascribe-file-pdf:before { - content: "\eada"; -} - -.glyph-ascribe-chrome:before { - content: "\eae5"; -} - -.glyph-ascribe-firefox:before { - content: "\eae6"; -} - -.glyph-ascribe-IE:before { - content: "\eae7"; -} - -.glyph-ascribe-opera:before { - content: "\eae8"; -} - -.glyph-ascribe-safari:before { - content: "\eae9"; -} - -.btn-glyph-ascribe{ - font-size: 18px; - padding: 4px 12px 0 10px -} \ No newline at end of file diff --git a/sass/ascribe_accordion_list.scss b/sass/ascribe_accordion_list.scss index 81d6aeb9..be5a26f2 100644 --- a/sass/ascribe_accordion_list.scss +++ b/sass/ascribe_accordion_list.scss @@ -77,9 +77,9 @@ $ascribe-accordion-list-item-height: 100px; white-space: nowrap; } - a:not(.btn) { - color: #666; - } + a { + text-decoration: none + }; } } @@ -96,14 +96,17 @@ $ascribe-accordion-list-item-height: 100px; margin-top: 0.4em; } - > a { - text-decoration: none; - } + } .accordion-list-item-buttons { - padding-top: 60px; - padding-right: 10px; + position: absolute; + right: 1em; + bottom: 1em; + @media (max-width: 400px) { + right: 0; + bottom: 0; + } } .ascribe-accordion-list-loading img { diff --git a/sass/ascribe_custom_style.scss b/sass/ascribe_custom_style.scss index 1595d82c..c30584de 100644 --- a/sass/ascribe_custom_style.scss +++ b/sass/ascribe_custom_style.scss @@ -4,6 +4,7 @@ $ascribe-blue: #65CFE9; $ascribe-light-blue: #D3DEE4; $ascribe-white: #F8F8F8; $ascribe-pink: #D10074; +$ascribe-blue-border: rgba(0, 60, 105, 0.1); $ascribe--fg-color: $ascribe-dark-blue; $ascribe--bg-color: $ascribe-dark-blue; @@ -11,7 +12,9 @@ $ascribe--bg-color: $ascribe-dark-blue; $ascribe--nav-fg-prim-color: white; $ascribe--nav-fg-sec-color: $ascribe-light-blue; $ascribe--nav-bg-color: $ascribe-dark-blue; -$ascribe--button-color: $ascribe--bg-color; + +$ascribe--button-default-color: $ascribe--bg-color; +$ascribe--button-secondary-color: $ascribe--bg-color; $ascribe--font-weight: 300; $ascribe--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono_tv.png'; $ascribe--font: 'canada-type-gibson'; @@ -21,7 +24,7 @@ body { //font-family: 'Helvetica Neue', 'Helvetica', sans-serif; font-family: 'canada-type-gibson', sans-serif !important; font-weight: $ascribe--font-weight !important; - background-color: #f9f9f9 !important; + background-color: #fcfcfc !important; } h1, h3 { font-family: 'canada-type-gibson', sans-serif !important; @@ -40,8 +43,9 @@ h1 { .navbar-default { background-color: $ascribe--nav-bg-color; - box-shadow: 0 0 4px rgba(0,0,0,.14), - 0 4px 8px rgba(0,0,0,.28); + box-shadow: 0 0 2px rgba(0,0,0,.14), + 0 2px 4px rgba(0,0,0,.28); + //box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .52); .navbar-nav > li > a, .navbar-nav > li > .active a { @@ -68,10 +72,6 @@ h1 { background-color: $ascribe--nav-bg-color; } - .navbar-toggle .icon-bar { - background-color: $ascribe--nav-bg-color; - } - .navbar-nav > .open > a, .navbar-nav > .open > a:hover, .navbar-nav > .open > a:focus, @@ -129,31 +129,61 @@ h1 { 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: 800; +} + .ascribe-accordion-list-item { - border: 1px solid rgba(0, 60, 105, 0.1); - -webkit-box-shadow: 0 2px 2px -2px rgba(0,0,0,.58); - -moz-box-shadow: 0 2px 2px -2px rgba(0,0,0,.58); - box-shadow: 0 2px 2px -2px rgba(0,0,0,.58); + border: 1px solid $ascribe-blue-border; + -webkit-box-shadow: 0 2px 2px -2px rgba(0,0,0,.18); + -moz-box-shadow: 0 2px 2px -2px rgba(0,0,0,.18); + box-shadow: 0 2px 2px -2px rgba(0,0,0,.18); &:hover { - -webkit-transform: scale(1.02); - -moz-transform: scale(1.02); - -ms-transform: scale(1.02); - -o-transform: scale(1.02); - transform: scale(1.02); - -webkit-transition: all 0.2s ease; - -moz-transition: all 0.2s ease; - -o-transition: all 0.2s ease; - -ms-transition: all 0.2s ease; - transition: all 0.2s ease; + //-webkit-transform: scale(1.005); + // -moz-transform: scale(1.005); + // -ms-transform: scale(1.005); + // -o-transform: scale(1.005); + // transform: scale(1.005); + // -webkit-transition: all 0.1s ease; + // -moz-transition: all 0.1s ease; + // -o-transition: all 0.1s ease; + //-ms-transition: all 0.1s ease; + // transition: all 0.1s ease; } } +.ascribe-accordion-list-item .wrapper { + + h1 { + font-size: 1.6em; + margin: .4em 0 0 0; + } + h3 { + font-size: 1.1em; + margin-bottom: 0.4em; + } + a:not(.btn) { + color: $ascribe-black + } + .accordion-list-item-header { + a div { + color: rgba(0,0,0,.6) + } + } +} + + .ascribe-footer { position: fixed; left: 0; @@ -190,7 +220,7 @@ h1 { } .ascribe-btn-login-spinner { - background-color: $ascribe--button-color; + background-color: $ascribe--button-default-color; } .ascribe-form-header { @@ -290,8 +320,8 @@ fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active { - background-color: darken($ascribe--button-color, 20%); - border-color: darken($ascribe--button-color, 20%); + background-color: darken($ascribe--button-default-color, 20%); + border-color: darken($ascribe--button-default-color, 20%); } // buttons! @@ -300,20 +330,20 @@ fieldset[disabled] .btn-default.active { .ascribe-piece-list-toolbar-filter-widget button { background-color: transparent; border: 1px solid transparent; - color: $ascribe--button-color; + color: $ascribe--button-default-color; &:hover, &:active { - background-color: $ascribe--button-color !important; - border-color: $ascribe--button-color !important; + background-color: $ascribe--button-default-color !important; + border-color: $ascribe--button-default-color !important; color: white; } } .ascribe-btn-login, .btn-default { - background-color: $ascribe--button-color; - border-color: $ascribe--button-color; + background-color: $ascribe--button-default-color; + border-color: $ascribe--button-default-color; &:hover, &:active, @@ -324,15 +354,15 @@ fieldset[disabled] .btn-default.active { &.active:hover, &.active:focus, &.active.focus { - background-color: darken($ascribe--button-color, 20%); - border-color: darken($ascribe--button-color, 20%); + background-color: darken($ascribe--button-default-color, 20%); + border-color: darken($ascribe--button-default-color, 20%); } } .btn-secondary { background-color: white; - border-color: $ascribe--button-color; - color: $ascribe--button-color; + border-color: $ascribe--button-secondary-color; + color: $ascribe--button-secondary-color; &:hover, &:active, @@ -343,8 +373,8 @@ fieldset[disabled] .btn-default.active { &.active:hover, &.active:focus, &.active.focus { - background-color: darken($ascribe--button-color, 20%); - border-color: darken($ascribe--button-color, 20%); + background-color: darken($ascribe--button-secondary-color, 20%); + border-color: darken($ascribe--button-secondary-color, 20%); } } @@ -352,58 +382,84 @@ fieldset[disabled] .btn-default.active { .open > .btn-default.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle.focus, .open > .btn-default.dropdown-toggle.dropdown-toggle { - background-color: darken($ascribe--button-color, 20%); - border-color: darken($ascribe--button-color, 20%); + background-color: darken($ascribe--button-secondary-color, 20%); + border-color: darken($ascribe--button-secondary-color, 20%); } .pager li > a, .pager li > span { - background-color: $ascribe--button-color; - border-color: $ascribe--button-color; + background-color: $ascribe--button-default-color; + border-color: $ascribe--button-default-color; } // inputs! .ascribe-input-glyph > .form-group > .input-group > .input-group-addon > .filter-glyph { - color: $ascribe--button-color; + color: $ascribe--button-default-color; } -.ascribe-input-glyph > .form-group > .input-group > .input-group-addon, -.ascribe-input-glyph > .form-group > .input-group input { - border-color: $ascribe--button-color; +.search-bar > .form-group > .input-group { + border: 1px solid rgba(0, 0, 0, 0); + &:hover, &:focus, &:active { + border-color: $ascribe-blue-border; + } + input::-webkit-input-placeholder { + color: rgba($ascribe-dark-blue, 0.5); + font-style: normal; + } + input::-moz-placeholder { + color: rgba($ascribe-dark-blue, 0.5); + font-style: normal; + } + /* firefox 19+ */ + input:-ms-input-placeholder { + color: rgba($ascribe-dark-blue, 0.5); + font-style: normal; + } + /* ie */ + input:-moz-placeholder { + color: rgba($ascribe-dark-blue, 0.5); + font-style: normal; + } + + //input::-webkit-input-placeholder { color:transparent } + //input::-moz-placeholder { color:transparent; } /* firefox 19+ */ + //input:-ms-input-placeholder { color:transparent; } /* ie */ + //input:-moz-placeholder { color:transparent; } + } .ascribe-settings-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before, .ascribe-checkbox-wrapper [type=checkbox]:checked + .checkbox:before { - color: $ascribe--button-color; + color: $ascribe--button-default-color; } // properties! .is-focused { - border-left-color: $ascribe--button-color !important; - background-color: rgba($ascribe--button-color, .05); + border-left-color: $ascribe--button-default-color !important; + background-color: rgba($ascribe--button-default-color, .05); } .ascribe-settings-wrapper:hover { - border-left-color: rgba($ascribe--button-color, .5); + border-left-color: rgba($ascribe--button-default-color, .5); } .ascribe-accordion-list-item .wrapper:hover { - background-color: rgba($ascribe--button-color, .05); + background-color: rgba($ascribe--button-default-color, .05); } // intercom stuff #intercom-container .intercom-launcher-button { - background-color: $ascribe--button-color !important; - border-color: $ascribe--button-color !important; + background-color: $ascribe--button-default-color !important; + border-color: $ascribe--button-default-color !important; } // notifications .ascribe-global-notification-success { - background-color: $ascribe--button-color; + background-color: $ascribe--button-default-color; } // progress bar .ascribe-progress-bar > .progress-bar { - background-color: $ascribe--button-color; + background-color: $ascribe--button-default-color; } diff --git a/sass/ascribe_piece_list_toolbar.scss b/sass/ascribe_piece_list_toolbar.scss index dde7f2f0..f033ee81 100644 --- a/sass/ascribe_piece_list_toolbar.scss +++ b/sass/ascribe_piece_list_toolbar.scss @@ -14,23 +14,19 @@ .ascribe-input-glyph > .form-group > .input-group { margin-left: 6px; - + border: none; input { background-color: transparent; - border: 1px solid #02b6a3; - border-right: 0; box-shadow: none; + border: none; } > .input-group-addon { background-color: transparent; > .filter-glyph { - color: #02b6a3; + border: none; } - - border: 1px solid #02b6a3; - border-left: 0; } } @@ -45,7 +41,6 @@ &:hover, &:active { background-color: #02b6a3 !important; - border: 1px solid #02b6a3 !important; color: white; } .caret { diff --git a/sass/variables.scss b/sass/variables.scss index 909440c9..f4b3f30a 100644 --- a/sass/variables.scss +++ b/sass/variables.scss @@ -221,7 +221,7 @@ $legend-border-color: #e5e5e5 !default; //** Background color for textual input addons $input-group-addon-bg: $ascribe-color-green !default; //** Border color for textual input addons -$input-group-addon-border-color: $ascribe-color-green !default; +$input-group-addon-border-color: transparent !default; //** Disabled cursor for form controls and buttons. $cursor-disabled: not-allowed !default;