diff --git a/fonts/ascribe-logo-v2.eot b/fonts/ascribe-logo-v2.eot
new file mode 100644
index 00000000..cb57c523
Binary files /dev/null and b/fonts/ascribe-logo-v2.eot differ
diff --git a/fonts/ascribe-logo-v2.svg b/fonts/ascribe-logo-v2.svg
new file mode 100644
index 00000000..771fb1b8
--- /dev/null
+++ b/fonts/ascribe-logo-v2.svg
@@ -0,0 +1,11 @@
+
+
+
\ No newline at end of file
diff --git a/fonts/ascribe-logo-v2.ttf b/fonts/ascribe-logo-v2.ttf
new file mode 100644
index 00000000..775c957d
Binary files /dev/null and b/fonts/ascribe-logo-v2.ttf differ
diff --git a/fonts/ascribe-logo-v2.woff b/fonts/ascribe-logo-v2.woff
new file mode 100644
index 00000000..8c7ed715
Binary files /dev/null and b/fonts/ascribe-logo-v2.woff differ
diff --git a/index.html b/index.html
index 743d01dc..1e9ab32c 100644
--- a/index.html
+++ b/index.html
@@ -41,6 +41,12 @@
<% DEBUG && print('window.DEBUG = true'); %>
<% DEBUG && print('window.CREDENTIALS = \'' + CREDENTIALS + '\''); %>
+
+ ;
+
diff --git a/js/components/ascribe_spinner.js b/js/components/ascribe_spinner.js
new file mode 100644
index 00000000..f41c87f8
--- /dev/null
+++ b/js/components/ascribe_spinner.js
@@ -0,0 +1,29 @@
+'use strict';
+
+import React from 'react';
+import classNames from 'classnames';
+
+let AscribeSpinner = React.createClass({
+ propTypes: {
+ size: React.PropTypes.oneOf(['sm', 'md', 'lg']),
+ color: React.PropTypes.oneOf(['blue', 'dark-blue', 'light-blue', 'pink', 'black', 'loop'])
+ },
+
+ getDefaultProps() {
+ return {
+ size: 'sm',
+ color: 'loop'
+ };
+ },
+
+ render() {
+ return (
+
+ );
+ }
+});
+
+export default AscribeSpinner;
diff --git a/js/components/header.js b/js/components/header.js
index 64224d8c..57bf8c5d 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -64,13 +64,13 @@ let Header = React.createClass({
},
getLogo(){
- if (this.state.whitelabel && this.state.whitelabel.logo){
- return
;
+ let { whitelabel } = this.state;
+ if (whitelabel && whitelabel.logo){
+ return
;
}
return (
- ascribe
-
+
);
},
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 35dcaba0..58104542 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -20,6 +20,8 @@ import PieceListFilterDisplay from './piece_list_filter_display';
import PieceListBulkModal from './ascribe_piece_list_bulk_modal/piece_list_bulk_modal';
import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
+import AscribeSpinner from './ascribe_spinner';
+
import AppConstants from '../constants/application_constants';
import { mergeOptions } from '../utils/general_utils';
@@ -149,7 +151,8 @@ let PieceList = React.createClass({
},
render() {
- let loadingElement = (
);
+ //let loadingElement = (
);
+ let loadingElement = ;
let AccordionListItemType = this.props.accordionListItemType;
return (
diff --git a/sass/ascribe-fonts/ascribe-fonts.scss b/sass/ascribe-fonts/ascribe-fonts.scss
index 0a66ac68..58784b42 100644
--- a/sass/ascribe-fonts/ascribe-fonts.scss
+++ b/sass/ascribe-fonts/ascribe-fonts.scss
@@ -1,55 +1,238 @@
- @font-face {
- font-family: 'ascribe';
- src:url('#{$BASE_URL}static/fonts/ascribe.eot?-oi6ttk');
- src:url('#{$BASE_URL}static/fonts/ascribe.eot?#iefix-oi6ttk') format('embedded-opentype'),
- url('#{$BASE_URL}static/fonts/ascribe.woff?-oi6ttk') format('woff'),
- url('#{$BASE_URL}static/fonts/ascribe.ttf?-oi6ttk') format('truetype'),
- url('#{$BASE_URL}static/fonts/ascribe.svg?-oi6ttk#ascribe') format('svg');
- font-weight: normal;
- font-style: normal;
- }
+@font-face {
+ font-family: 'ascribe';
+ src: url('#{$BASE_URL}static/fonts/ascribe.eot?-oi6ttk');
+ src: url('#{$BASE_URL}static/fonts/ascribe.eot?#iefix-oi6ttk') format('embedded-opentype'),
+ url('#{$BASE_URL}static/fonts/ascribe.woff?-oi6ttk') format('woff'),
+ url('#{$BASE_URL}static/fonts/ascribe.ttf?-oi6ttk') format('truetype'),
+ url('#{$BASE_URL}static/fonts/ascribe.svg?-oi6ttk#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;
+[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;
- }
+ /* Better Font Rendering =========== */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
- .glyph-ascribe-logo-spool:before {
- content: "\e600";
- }
+@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-weight: normal;
+ font-style: normal;
+}
- .glyph-ascribe-spool:before {
- content: "\e601";
- }
+[class^="icon-"], [class*=" icon-"] {
+ font-family: 'ascribe-logo-v2';
+ speak: none;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
- .glyph-ascribe-logo-spool-chunked:before {
- content: "\e602";
- }
+ /* Better Font Rendering =========== */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
- .glyph-ascribe-spool-chunked:before {
- content: "\e603";
- }
+.icon-ascribe-logo:before {
+ content: "\e800";
+}
- @font-face {
- font-family: mercury_regular;
- src: url(Mercury_Regular.otf);
- }
- @font-face {
- font-family: mercury_medium;
- src: url(Mercury_Medium.otf);
- }
+.glyph-ascribe-logo-spool:before {
+ content: "\e600";
+}
- @font-face {
- font-family: mercury_light;
- src: url(Mercury_Light.otf);
- }
+.glyph-ascribe-spool:before {
+ content: "\e601";
+}
+
+.glyph-ascribe-logo-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
+}
+
+@font-face {
+ font-family: mercury_regular;
+ src: url(Mercury_Regular.otf);
+}
+
+@font-face {
+ font-family: mercury_medium;
+ src: url(Mercury_Medium.otf);
+}
+
+@font-face {
+ font-family: mercury_light;
+ src: url(Mercury_Light.otf);
+}
diff --git a/sass/ascribe-fonts/ascribe-logo-v2.eot b/sass/ascribe-fonts/ascribe-logo-v2.eot
new file mode 100644
index 00000000..cb57c523
Binary files /dev/null and b/sass/ascribe-fonts/ascribe-logo-v2.eot differ
diff --git a/sass/ascribe-fonts/ascribe-logo-v2.svg b/sass/ascribe-fonts/ascribe-logo-v2.svg
new file mode 100644
index 00000000..771fb1b8
--- /dev/null
+++ b/sass/ascribe-fonts/ascribe-logo-v2.svg
@@ -0,0 +1,11 @@
+
+
+
\ No newline at end of file
diff --git a/sass/ascribe-fonts/ascribe-logo-v2.ttf b/sass/ascribe-fonts/ascribe-logo-v2.ttf
new file mode 100644
index 00000000..775c957d
Binary files /dev/null and b/sass/ascribe-fonts/ascribe-logo-v2.ttf differ
diff --git a/sass/ascribe-fonts/ascribe-logo-v2.woff b/sass/ascribe-fonts/ascribe-logo-v2.woff
new file mode 100644
index 00000000..8c7ed715
Binary files /dev/null and b/sass/ascribe-fonts/ascribe-logo-v2.woff differ
diff --git a/sass/ascribe_custom_style.scss b/sass/ascribe_custom_style.scss
index 7eab3e39..62e4ee6c 100644
--- a/sass/ascribe_custom_style.scss
+++ b/sass/ascribe_custom_style.scss
@@ -1,42 +1,68 @@
-$ascribe--bg-color: #06c;
+$ascribe-black: #1E1E1E;
+$ascribe-dark-blue: #003C69;
+$ascribe-blue: #65CFE9;
+$ascribe-light-blue: #D3DEE4;
+$ascribe-pink: #D10074;
+
+$ascribe--fg-color: $ascribe-dark-blue;
+$ascribe--bg-color: $ascribe-blue;
+
+$ascribe--nav-fg-prim-color: $ascribe-light-blue;
+$ascribe--nav-fg-sec-color: $ascribe-pink;
+$ascribe--nav-bg-color: $ascribe-dark-blue;
$ascribe--button-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';
-
+html,
body {
- font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
+ //font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
+ font-family: 'canada-type-gibson', sans-serif !important;
+ font-weight: $ascribe--font-weight !important;
+}
+h1, h3 {
+ font-family: 'canada-type-gibson', sans-serif !important;
+ font-weight: $ascribe--font-weight !important;
}
+.nav .open > a,
+.nav .open > a:hover,
+.nav .open > a:focus {
+ border-color: transparent;
+}
.navbar-default {
- background-color: $ascribe--bg-color;
+ background-color: $ascribe--nav-bg-color;
.navbar-nav > li > a,
.navbar-nav > li > .active a {
text-transform: uppercase;
border-bottom-color: transparent;
- font-size: 14px;
- font-weight: bold;
+ font-size: 12px;
+ }
+ .navbar-nav > li > a:hover {
+ color: $ascribe--nav-fg-sec-color;
}
.navbar-nav > li > a {
- color: white;
+ color: $ascribe--nav-fg-prim-color;
}
.navbar-nav > .active a,
.navbar-nav > .active a:hover,
.navbar-nav > .active a:focus {
- color: black;
- borderjbottom-color: transparent;
- background-color: transparent;
+ color: $ascribe--nav-fg-prim-color;
+ border-bottom-color: $ascribe--nav-fg-prim-color;
+ background-color: $ascribe--nav-bg-color;
}
.navbar-nav > .active {
- background-color: white;
+ background-color: $ascribe--nav-bg-color;
}
.navbar-toggle .icon-bar {
- background-color: white;
+ background-color: $ascribe--nav-bg-color;
}
.navbar-nav > .open > a,
@@ -45,11 +71,25 @@ body {
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
- color: white;
- background-color: $ascribe--bg-color;
+ color: $ascribe--nav-fg-prim-color;
+ background-color: $ascribe--nav-bg-color;
}
- .img-brand.navbar-brand {
+ .dropdown-menu > li > a {
+ color: $ascribe--nav-fg-prim-color;
+ font-weight: $ascribe--font-weight !important;
+ }
+
+ .dropdown-menu > li > a:hover,
+ .dropdown-menu > li > a:focus {
+ color: $ascribe--nav-fg-prim-color;
+ background-color: $ascribe--nav-bg-color;
+ }
+
+ .navbar-brand {
+ color: $ascribe--nav-fg-prim-color;
+ }
+ .img-brand .navbar-brand {
width: 0;
height: 0;
padding-right: 120px;
@@ -66,7 +106,7 @@ body {
.navbar-toggle:hover,
.navbar-toggle:focus {
- background-color: rgba(255, 255, 255, 0.1);
+ background-color: $ascribe--nav-bg-color;
}
}
diff --git a/sass/ascribe_spinner.scss b/sass/ascribe_spinner.scss
new file mode 100644
index 00000000..d58cbf8c
--- /dev/null
+++ b/sass/ascribe_spinner.scss
@@ -0,0 +1,131 @@
+$ascribe-black: #1E1E1E;
+$ascribe-dark-blue: #003C69;
+$ascribe-blue: #65CFE9;
+$ascribe-light-blue: #D3DEE4;
+$ascribe-pink: #D10074;
+
+$ascribe--spinner-color: $ascribe-blue;
+
+$ascribe--spinner-size-md: 50px;
+$ascribe--spinner-size-sm: 30px;
+
+
+[class^="spinner-wrapper-"]{
+ margin: auto;
+}
+
+.spinner-wrapper-blue {
+ color: $ascribe-blue;
+ .spinner-circle {
+ border-color: $ascribe-blue;
+ }
+}
+
+.spinner-wrapper-dark-blue {
+ color: $ascribe-dark-blue;
+ .spinner-circle {
+ border-color: $ascribe-dark-blue;
+ }
+}
+
+.spinner-wrapper-pink {
+ color: $ascribe-pink;
+ .spinner-circle {
+ border-color: $ascribe-pink;
+ }
+}
+
+.spinner-wrapper-loop {
+ animation: spinner-color-loop 20s;
+ -moz-animation: spinner-color-loop 20s infinite;
+ -webkit-animation: spinner-color-loop 20s infinite;
+}
+
+.spinner-wrapper-black {
+ color: $ascribe-black;
+ .spinner-circle {
+ border-color: $ascribe-black;
+ }
+}
+
+.spinner-wrapper-md {
+ width: $ascribe--spinner-size-md;
+ height: $ascribe--spinner-size-md;
+}
+
+.spinner-wrapper-sm {
+ width: $ascribe--spinner-size-sm;
+ height: $ascribe--spinner-size-sm;
+}
+
+.spinner-circle {
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+
+ border-style: solid;
+
+ -webkit-animation: spin 1s infinite linear;
+ -moz-animation: spin 1s infinite linear;
+ -o-animation: spin 1s infinite linear;
+ animation: spin 1s infinite linear;
+}
+
+.spinner-wrapper-md .spinner-circle {
+ width: $ascribe--spinner-size-md;
+ height: $ascribe--spinner-size-md;
+ border-width: 1px 1px 1px 0;
+}
+
+.spinner-wrapper-sm .spinner-circle {
+ width: $ascribe--spinner-size-sm;
+ height: $ascribe--spinner-size-sm;
+ border-width: 1px 1px 1px 0;
+}
+
+.spinner-inner {
+ position: relative;
+ text-align: center;
+}
+
+.spinner-wrapper-md .spinner-inner {
+ font-size: $ascribe--spinner-size-md;
+ top: -64px;
+ height: $ascribe--spinner-size-md;
+ width: $ascribe--spinner-size-md;
+}
+
+.spinner-wrapper-sm .spinner-inner {
+ font-size: $ascribe--spinner-size-sm;
+ top: -38px;
+ height: $ascribe--spinner-size-sm;
+ width: $ascribe--spinner-size-sm;
+}
+
+@-webkit-keyframes spin {
+ from {-webkit-transform: rotate(0deg);}
+ to {-webkit-transform: rotate(359deg);}
+}
+
+@-moz-keyframes spin {
+ from {-moz-transform: rotate(0deg);}
+ to {-moz-transform: rotate(359deg);}
+}
+
+@-o-keyframes spin {
+ from {-o-transform: rotate(0deg);}
+ to {-o-transform: rotate(359deg);}
+}
+
+@keyframes spin{
+ from {transform: rotate(0deg);}
+ to {transform: rotate(359deg);}
+}
+
+@include keyframes(spinner-color-loop) {
+ 0% { color: $ascribe-black; }
+ 20% { color: $ascribe-dark-blue; }
+ 40% { color: $ascribe-blue; }
+ 60% { color: $ascribe-light-blue; }
+ 80% { color: $ascribe-pink; }
+}
\ No newline at end of file
diff --git a/sass/main.scss b/sass/main.scss
index 2ae02fff..ff1c4715 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -11,7 +11,6 @@ $BASE_URL: '<%= BASE_URL %>';
@import '../node_modules/react-datepicker/dist/react-datepicker';
@import 'glyphicons-social';
@import 'ascribe_theme';
-@import './ascribe-fonts/style';
@import './ascribe-fonts/ascribe-fonts';
@import 'ascribe_login';
@import 'ascribe_table';
@@ -35,6 +34,7 @@ $BASE_URL: '<%= BASE_URL %>';
@import 'ascribe_panel';
@import 'ascribe_collapsible';
@import 'ascribe_custom_style';
+@import 'ascribe_spinner';
@import 'whitelabel/index';