From 71988d502d894ff49a5a84334587572ee7e02191 Mon Sep 17 00:00:00 2001 From: diminator Date: Thu, 8 Oct 2015 11:12:15 +0200 Subject: [PATCH] ascribe fonts first cut layout spinner --- fonts/ascribe-logo-v2.eot | Bin 0 -> 2088 bytes fonts/ascribe-logo-v2.svg | 11 + fonts/ascribe-logo-v2.ttf | Bin 0 -> 1892 bytes fonts/ascribe-logo-v2.woff | Bin 0 -> 1968 bytes index.html | 6 + js/components/ascribe_spinner.js | 29 +++ js/components/header.js | 8 +- js/components/piece_list.js | 5 +- sass/ascribe-fonts/ascribe-fonts.scss | 275 ++++++++++++++++++++---- sass/ascribe-fonts/ascribe-logo-v2.eot | Bin 0 -> 2088 bytes sass/ascribe-fonts/ascribe-logo-v2.svg | 11 + sass/ascribe-fonts/ascribe-logo-v2.ttf | Bin 0 -> 1892 bytes sass/ascribe-fonts/ascribe-logo-v2.woff | Bin 0 -> 1968 bytes sass/ascribe_custom_style.scss | 72 +++++-- sass/ascribe_spinner.scss | 131 +++++++++++ sass/main.scss | 2 +- 16 files changed, 482 insertions(+), 68 deletions(-) create mode 100644 fonts/ascribe-logo-v2.eot create mode 100644 fonts/ascribe-logo-v2.svg create mode 100644 fonts/ascribe-logo-v2.ttf create mode 100644 fonts/ascribe-logo-v2.woff create mode 100644 js/components/ascribe_spinner.js create mode 100644 sass/ascribe-fonts/ascribe-logo-v2.eot create mode 100644 sass/ascribe-fonts/ascribe-logo-v2.svg create mode 100644 sass/ascribe-fonts/ascribe-logo-v2.ttf create mode 100644 sass/ascribe-fonts/ascribe-logo-v2.woff create mode 100644 sass/ascribe_spinner.scss diff --git a/fonts/ascribe-logo-v2.eot b/fonts/ascribe-logo-v2.eot new file mode 100644 index 0000000000000000000000000000000000000000..cb57c523829116aa3f8d2d3f4304ab3cfb48df32 GIT binary patch literal 2088 zcmb7FUrbY182`>~%f;dfb^Qa1?X{(p0xfOtZ7-Dq#Xmw!?jIDE#l@4Hdw$>V z`Ez9JoVG;7+h7~A7 z0lOP6gC8g8AccGZE}=(29e@ea$W(A%5p^YCzy}`iqUZmkp-5a%3v7Z4yeCc%_*)NX z&mr?A_Vc+_VXZy=-E|aoqCHa(s%tp5p)HQhg_Zh+iOcU^M0*`T6<^K^ORqoqqza(k zLVs`>34^1}h4x=)cP+2h)=fD?pb_I4R?0a6ddTN!i_6`=Dy*-8k@TV+Mw=-KtN90` zqc_n$hdF*(D_3i{PHeRJ+cBWp=O?#713=xT?j!TQJd)plCHq9(u10X#ds_tHF{rj0 zTM$uUN9WGrh&o36NZG`Uo#>NCm89wfH4GxJg=Rc_3OVL6G`1TJanf^48b7zIao+B@ z1PH2HcX9aV;X{(-h3@5CD?nqbEr+YN;ZbMc3VZ+`!5#Pl9>5>)jL@WobPy+Qi0gKG zh~3sin@0%iHytLlPGvM$DAph3jjW#5p|d-{1xJa|A!!k#&df`*j0Th0LX3tc6gg=N zMi`+2K8+V`4;A1>FpMJAQ9Dtc#M><<4A}Loo(u9)UNg^gB8verbHGQ7PQrO8QK?5G zuoK*F&>^`K-9j0C4oUVrfzK(YcOLO#AjgP`^`q(tvC}Ninpr2!o9%m(*`@W%8#DUI zpSI4!Z^mOKYp1p_dAx8pvM_382B$sQqCSx@U6`7hPUb$NHg1NGX2yeo1k>-xMkn68 z=5lS$g@>|M*7Ejj|EXaIwOqUyoQ-rjkDc|-XN_)c;7BBOb4%+)3;3TVl8^(s;#yXJQKE2lv=(0lpG4qgojRZ9napNzB!a(Oj(mH!*zEj ze<&uCMX{Ua$HwNxPNJ!_)!Nf<;F>+@jE$x&{&ANp#vV=?XUY2aT_>kGHmPa(P&+qm zFmgUW=jiJ19hga{kLz^&@W>GFcKIedyivC`>x$=whJh9EthIcAz#W@gj#-yS*$aO zTzRToE_om-mCzb6SYq>7OvS<~Kn=$w + + +Generated by IcoMoon + + + + + + + \ 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 0000000000000000000000000000000000000000..775c957d8934596618ac42d1806c5ab098293ba1 GIT binary patch literal 1892 zcmb7FO>7!h5T3Vyad3)F%8#8mumNL?ZPvgptckIWU5B3p+X-<9c8!xYA(+Mn7f5QF zI`YMelpN9?bEtaBp@%9tRFx{Vm8?p=MQRiE67|$ps-jlCRE<q{b+~Lrc1(F{?YjOZL}9L$8YQ9Y7NhcLpvqQb;=5=LS^{D=adx9mUR9E+8`Ln2ybfA{ z!XE+pDKvH)4QW>slg6)|YTUOsE&+n7_B|X0z=tHsOWo_ac7VoCM-ESI2L>{59X^6j z;2wMhkKiwOLA0cebP*R8#Pzxu;;^@9En|fBn~xH$US%>`Db^q4O{_tyM`v$<3yu?$ zQ_>(-3^)v|feZ3d zUJK82B8verbHJw+orGg3QE5OU&XB?lw^AmbQVx+=8(=W7iRL2zwO;e-;T#hwr*YFM+opwtsrW*2`sYOq0GO<|S zW;|X?d6Kr#h0yVZFinRSj)xXTZB%0*`Oa8m{j6_bc0GFQhP}2LJQuc8lv=&}oE!JdD9U2Q#Ud3-tIO@r_QytF)f> zp(7^}_-deK0 z1^HVF)&WPTR?8T``XKf`OrfBfD~(f|Me literal 0 HcmV?d00001 diff --git a/fonts/ascribe-logo-v2.woff b/fonts/ascribe-logo-v2.woff new file mode 100644 index 0000000000000000000000000000000000000000..8c7ed7152dba445f19a36ffa3876e7fab45b52de GIT binary patch literal 1968 zcmb7FO>7fK6n?X|8N>RZcXxZ+15nE=WxDX1@2$ zH}B0`>rF1q#9}}IhxRjQlh!5Kr})(|b8IL8Kw6PKO|5;G?qq&dTtjXd{aI?AnIEqf z#Tw-$Tvl>~Jry z*4L4vIgHfId4QElp6V{4PtWg!KJw+NxQ=->*U)DrGm-wXxLQE&4(9%y+Qaej8*7zX z9qYaMLZ?Ec+7Tc(K?A_tVjiIXp}dkmfg?N6e|eCOmpzK308c=5zj+^`Dl}xIZ;C4& ztTanm5Ow1o#oahlRX3<%7*`#BDF*)tuuq`5)odb%XBAAEzjdmW6Ve7w1PH3yr6@AT z00?0z_5b-_&$R|w2?02!eo4}%S#;g7OiEB zZ~^mPqSdQRMk~VwLV}4iX!W?+8{|Xd#N?E;h*4(|q*ErN*OA`hi2F}2T1SzjY5O~UBK+GKUYw0H8y$n?v&F_%rs4vq+D9B(PT(w@ODk9$uO@Ry_m>MZ`N==_?!E6O z;$>U6u6XEh@ox0gxQ!j2_U1~4WYT1=2&+T%KK!ncq!d34pwnow-5j(@E)mzWVp3rP$SfEB?>5R?RH)!Nry_u|C%UA=GZg-s9n>Njn^`Clv3>xI#=5y9j3AL{bOJhq%WkslcmC!MiQpZ>Hj(>RoDWc_odA@Y}QV&cNq zCds6ax3zg&G_hYg9S*75U$-`yi_gD}H%8CmZec>|BkY^WjZ?Qy zwMU*pn_B9sN8!((Q6R5Mx6pSDJ4+gPM(Ta&z?TUhyZlQXDJwK`B-x?IWF-O}zG+r+ zTRNd3eb~)(Y)6(HWzxf4B`%Rva)&dZg*ytbLVjAoYQ*0tSc5OSN5L(~UsSLTcEca^ zO;PVa#)>;KW <% 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 ( +
+
+
A
+
+ ); + } +}); + +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 0000000000000000000000000000000000000000..cb57c523829116aa3f8d2d3f4304ab3cfb48df32 GIT binary patch literal 2088 zcmb7FUrbY182`>~%f;dfb^Qa1?X{(p0xfOtZ7-Dq#Xmw!?jIDE#l@4Hdw$>V z`Ez9JoVG;7+h7~A7 z0lOP6gC8g8AccGZE}=(29e@ea$W(A%5p^YCzy}`iqUZmkp-5a%3v7Z4yeCc%_*)NX z&mr?A_Vc+_VXZy=-E|aoqCHa(s%tp5p)HQhg_Zh+iOcU^M0*`T6<^K^ORqoqqza(k zLVs`>34^1}h4x=)cP+2h)=fD?pb_I4R?0a6ddTN!i_6`=Dy*-8k@TV+Mw=-KtN90` zqc_n$hdF*(D_3i{PHeRJ+cBWp=O?#713=xT?j!TQJd)plCHq9(u10X#ds_tHF{rj0 zTM$uUN9WGrh&o36NZG`Uo#>NCm89wfH4GxJg=Rc_3OVL6G`1TJanf^48b7zIao+B@ z1PH2HcX9aV;X{(-h3@5CD?nqbEr+YN;ZbMc3VZ+`!5#Pl9>5>)jL@WobPy+Qi0gKG zh~3sin@0%iHytLlPGvM$DAph3jjW#5p|d-{1xJa|A!!k#&df`*j0Th0LX3tc6gg=N zMi`+2K8+V`4;A1>FpMJAQ9Dtc#M><<4A}Loo(u9)UNg^gB8verbHGQ7PQrO8QK?5G zuoK*F&>^`K-9j0C4oUVrfzK(YcOLO#AjgP`^`q(tvC}Ninpr2!o9%m(*`@W%8#DUI zpSI4!Z^mOKYp1p_dAx8pvM_382B$sQqCSx@U6`7hPUb$NHg1NGX2yeo1k>-xMkn68 z=5lS$g@>|M*7Ejj|EXaIwOqUyoQ-rjkDc|-XN_)c;7BBOb4%+)3;3TVl8^(s;#yXJQKE2lv=(0lpG4qgojRZ9napNzB!a(Oj(mH!*zEj ze<&uCMX{Ua$HwNxPNJ!_)!Nf<;F>+@jE$x&{&ANp#vV=?XUY2aT_>kGHmPa(P&+qm zFmgUW=jiJ19hga{kLz^&@W>GFcKIedyivC`>x$=whJh9EthIcAz#W@gj#-yS*$aO zTzRToE_om-mCzb6SYq>7OvS<~Kn=$w + + +Generated by IcoMoon + + + + + + + \ 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 0000000000000000000000000000000000000000..775c957d8934596618ac42d1806c5ab098293ba1 GIT binary patch literal 1892 zcmb7FO>7!h5T3Vyad3)F%8#8mumNL?ZPvgptckIWU5B3p+X-<9c8!xYA(+Mn7f5QF zI`YMelpN9?bEtaBp@%9tRFx{Vm8?p=MQRiE67|$ps-jlCRE<q{b+~Lrc1(F{?YjOZL}9L$8YQ9Y7NhcLpvqQb;=5=LS^{D=adx9mUR9E+8`Ln2ybfA{ z!XE+pDKvH)4QW>slg6)|YTUOsE&+n7_B|X0z=tHsOWo_ac7VoCM-ESI2L>{59X^6j z;2wMhkKiwOLA0cebP*R8#Pzxu;;^@9En|fBn~xH$US%>`Db^q4O{_tyM`v$<3yu?$ zQ_>(-3^)v|feZ3d zUJK82B8verbHJw+orGg3QE5OU&XB?lw^AmbQVx+=8(=W7iRL2zwO;e-;T#hwr*YFM+opwtsrW*2`sYOq0GO<|S zW;|X?d6Kr#h0yVZFinRSj)xXTZB%0*`Oa8m{j6_bc0GFQhP}2LJQuc8lv=&}oE!JdD9U2Q#Ud3-tIO@r_QytF)f> zp(7^}_-deK0 z1^HVF)&WPTR?8T``XKf`OrfBfD~(f|Me literal 0 HcmV?d00001 diff --git a/sass/ascribe-fonts/ascribe-logo-v2.woff b/sass/ascribe-fonts/ascribe-logo-v2.woff new file mode 100644 index 0000000000000000000000000000000000000000..8c7ed7152dba445f19a36ffa3876e7fab45b52de GIT binary patch literal 1968 zcmb7FO>7fK6n?X|8N>RZcXxZ+15nE=WxDX1@2$ zH}B0`>rF1q#9}}IhxRjQlh!5Kr})(|b8IL8Kw6PKO|5;G?qq&dTtjXd{aI?AnIEqf z#Tw-$Tvl>~Jry z*4L4vIgHfId4QElp6V{4PtWg!KJw+NxQ=->*U)DrGm-wXxLQE&4(9%y+Qaej8*7zX z9qYaMLZ?Ec+7Tc(K?A_tVjiIXp}dkmfg?N6e|eCOmpzK308c=5zj+^`Dl}xIZ;C4& ztTanm5Ow1o#oahlRX3<%7*`#BDF*)tuuq`5)odb%XBAAEzjdmW6Ve7w1PH3yr6@AT z00?0z_5b-_&$R|w2?02!eo4}%S#;g7OiEB zZ~^mPqSdQRMk~VwLV}4iX!W?+8{|Xd#N?E;h*4(|q*ErN*OA`hi2F}2T1SzjY5O~UBK+GKUYw0H8y$n?v&F_%rs4vq+D9B(PT(w@ODk9$uO@Ry_m>MZ`N==_?!E6O z;$>U6u6XEh@ox0gxQ!j2_U1~4WYT1=2&+T%KK!ncq!d34pwnow-5j(@E)mzWVp3rP$SfEB?>5R?RH)!Nry_u|C%UA=GZg-s9n>Njn^`Clv3>xI#=5y9j3AL{bOJhq%WkslcmC!MiQpZ>Hj(>RoDWc_odA@Y}QV&cNq zCds6ax3zg&G_hYg9S*75U$-`yi_gD}H%8CmZec>|BkY^WjZ?Qy zwMU*pn_B9sN8!((Q6R5Mx6pSDJ4+gPM(Ta&z?TUhyZlQXDJwK`B-x?IWF-O}zG+r+ zTRNd3eb~)(Y)6(HWzxf4B`%Rva)&dZg*ytbLVjAoYQ*0tSc5OSN5L(~UsSLTcEca^ zO;PVa#)>;KW 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';