diff --git a/fonts/ascribe-logo.eot b/fonts/ascribe-logo.eot index d4815136..609770bc 100644 Binary files a/fonts/ascribe-logo.eot and b/fonts/ascribe-logo.eot differ diff --git a/fonts/ascribe-logo.svg b/fonts/ascribe-logo.svg index 4024b64a..28ab9458 100644 --- a/fonts/ascribe-logo.svg +++ b/fonts/ascribe-logo.svg @@ -7,12 +7,13 @@ - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/fonts/ascribe-logo.ttf b/fonts/ascribe-logo.ttf index b42d5303..79acfe89 100644 Binary files a/fonts/ascribe-logo.ttf and b/fonts/ascribe-logo.ttf differ diff --git a/fonts/ascribe-logo.woff b/fonts/ascribe-logo.woff index c3cd4d76..e8c8b031 100644 Binary files a/fonts/ascribe-logo.woff and b/fonts/ascribe-logo.woff differ diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js index 62394631..c9399b4e 100644 --- a/js/components/ascribe_detail/edition.js +++ b/js/components/ascribe_detail/edition.js @@ -30,6 +30,7 @@ import Note from './note'; import ApiUrls from '../../constants/api_urls'; import AppConstants from '../../constants/application_constants'; +import AscribeSpinner from '../ascribe_spinner'; import { getLangText } from '../../utils/lang_utils'; @@ -277,7 +278,7 @@ let CoaDetails = React.createClass({ } return (
- +
); } diff --git a/js/components/ascribe_detail/edition_container.js b/js/components/ascribe_detail/edition_container.js index 0f726ae5..338f9bee 100644 --- a/js/components/ascribe_detail/edition_container.js +++ b/js/components/ascribe_detail/edition_container.js @@ -7,8 +7,7 @@ import EditionStore from '../../stores/edition_store'; import Edition from './edition'; -import AppConstants from '../../constants/application_constants'; - +import AscribeSpinner from '../ascribe_spinner'; /** @@ -70,7 +69,7 @@ let EditionContainer = React.createClass({ } else { return (
- +
); } diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js index c2eb1759..229639d2 100644 --- a/js/components/ascribe_detail/piece_container.js +++ b/js/components/ascribe_detail/piece_container.js @@ -35,7 +35,8 @@ import GlobalNotificationActions from '../../actions/global_notification_actions import Note from './note'; import ApiUrls from '../../constants/api_urls'; -import AppConstants from '../../constants/application_constants'; +import AscribeSpinner from '../ascribe_spinner'; + import { mergeOptions } from '../../utils/general_utils'; import { getLangText } from '../../utils/lang_utils'; @@ -269,7 +270,7 @@ let PieceContainer = React.createClass({ } else { return (
- +
); } diff --git a/js/components/ascribe_forms/form_consign.js b/js/components/ascribe_forms/form_consign.js index de4a4788..f57e0045 100644 --- a/js/components/ascribe_forms/form_consign.js +++ b/js/components/ascribe_forms/form_consign.js @@ -8,7 +8,7 @@ import Form from './form'; import Property from './property'; import InputTextAreaToggable from './input_textarea_toggable'; -import AppConstants from '../../constants/application_constants'; +import AscribeSpinner from '../ascribe_spinner'; import { getLangText } from '../../utils/lang_utils.js'; @@ -43,7 +43,9 @@ let ConsignForm = React.createClass({ } spinner={
- +

+ +

}> -
+
{this.renderChildren()}
diff --git a/js/components/ascribe_settings/account_settings.js b/js/components/ascribe_settings/account_settings.js index 1898c599..5f4cfe7a 100644 --- a/js/components/ascribe_settings/account_settings.js +++ b/js/components/ascribe_settings/account_settings.js @@ -15,7 +15,7 @@ import AclProxy from '../acl_proxy'; import CopyrightAssociationForm from '../ascribe_forms/form_copyright_association'; import ApiUrls from '../../constants/api_urls'; -import AppConstants from '../../constants/application_constants'; +import AscribeSpinner from '../ascribe_spinner'; import { getLangText } from '../../utils/lang_utils'; @@ -37,7 +37,7 @@ let AccountSettings = React.createClass({ }, render() { - let content = ; + let content = ; let profile = null; if (this.props.currentUser.username) { @@ -78,7 +78,7 @@ let AccountSettings = React.createClass({ getFormData={this.getFormDataProfile}> diff --git a/js/components/ascribe_settings/api_settings.js b/js/components/ascribe_settings/api_settings.js index 0f638675..ed35041b 100644 --- a/js/components/ascribe_settings/api_settings.js +++ b/js/components/ascribe_settings/api_settings.js @@ -15,7 +15,7 @@ import ActionPanel from '../ascribe_panel/action_panel'; import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph'; import ApiUrls from '../../constants/api_urls'; -import AppConstants from '../../constants/application_constants'; +import AscribeSpinner from '../ascribe_spinner'; import { getLangText } from '../../utils/lang_utils'; @@ -57,7 +57,7 @@ let APISettings = React.createClass({ }, getApplications(){ - let content = ; + let content = ; if (this.state.applications.length > -1) { content = this.state.applications.map(function(app, i) { diff --git a/js/components/ascribe_settings/bitcoin_wallet_settings.js b/js/components/ascribe_settings/bitcoin_wallet_settings.js index ea528709..91f5e5d6 100644 --- a/js/components/ascribe_settings/bitcoin_wallet_settings.js +++ b/js/components/ascribe_settings/bitcoin_wallet_settings.js @@ -10,7 +10,7 @@ import Property from '../ascribe_forms/property'; import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph'; -import AppConstants from '../../constants/application_constants'; +import AscribeSpinner from '../ascribe_spinner'; import { getLangText } from '../../utils/lang_utils'; @@ -38,7 +38,7 @@ let BitcoinWalletSettings = React.createClass({ }, render() { - let content = ; + let content = ; if (this.state.walletSettings.btc_public_key) { content = ( diff --git a/js/components/piece_list.js b/js/components/piece_list.js index a543f7b7..45d17f74 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -168,10 +168,9 @@ let PieceList = React.createClass({ applyOrderBy={this.applyOrderBy}> {this.props.customSubmitButton ? this.props.customSubmitButton : - - - - + } diff --git a/js/components/whitelabel/prize/components/prize_register_piece.js b/js/components/whitelabel/prize/components/prize_register_piece.js index 0bd3fe75..4a62dfdd 100644 --- a/js/components/whitelabel/prize/components/prize_register_piece.js +++ b/js/components/whitelabel/prize/components/prize_register_piece.js @@ -60,7 +60,7 @@ let PrizeRegisterPiece = React.createClass({ diff --git a/sass/ascribe-fonts/ascribe-fonts.scss b/sass/ascribe-fonts/ascribe-fonts.scss index 263c6f3a..0d428e7d 100644 --- a/sass/ascribe-fonts/ascribe-fonts.scss +++ b/sass/ascribe-fonts/ascribe-fonts.scss @@ -24,11 +24,11 @@ } @font-face { font-family: 'ascribe-logo'; - src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?ijga43'); - src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?ijga43#iefix') format('embedded-opentype'), - url('#{$BASE_URL}static/fonts/ascribe-logo.ttf?ijga43') format('truetype'), - url('#{$BASE_URL}static/fonts/ascribe-logo.woff?ijga43') format('woff'), - url('#{$BASE_URL}static/fonts/ascribe-logo.svg?ijga43#ascribe-logo') format('svg'); + src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?q6qoae'); + src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?q6qoae#iefix') format('embedded-opentype'), + url('#{$BASE_URL}static/fonts/ascribe-logo.ttf?q6qoae') format('truetype'), + url('#{$BASE_URL}static/fonts/ascribe-logo.woff?q6qoae') format('woff'), + url('#{$BASE_URL}static/fonts/ascribe-logo.svg?q6qoae#ascribe-logo') format('svg'); font-weight: normal; font-style: normal; } @@ -47,32 +47,35 @@ -moz-osx-font-smoothing: grayscale; } -.icon-ascribe-sort:before { +.icon-ascribe-add:before { content: "\e800"; } -.icon-ascribe-search:before { +.icon-ascribe-sort:before { content: "\e801"; } -.icon-ascribe-filter:before { +.icon-ascribe-search:before { content: "\e802"; } -.icon-ascribe-add-white:before { +.icon-ascribe-filter:before { content: "\e803"; } -.icon-ascribe-add .path1:before { +.icon-ascribe-add-white:before { content: "\e804"; +} +.icon-ascribe-add-blue .path1:before { + content: "\e805"; color: rgb(0, 60, 106); } -.icon-ascribe-add .path2:before { - content: "\e805"; +.icon-ascribe-add-blue .path2:before { + content: "\e806"; margin-left: -1em; color: rgb(255, 255, 255); } .icon-ascribe-icon:before { - content: "\e806"; + content: "\e807"; } .icon-ascribe-logo:before { - content: "\e807"; + content: "\e808"; } diff --git a/sass/ascribe_custom_style.scss b/sass/ascribe_custom_style.scss index 180b5e9b..e12f657a 100644 --- a/sass/ascribe_custom_style.scss +++ b/sass/ascribe_custom_style.scss @@ -142,7 +142,7 @@ h1 { .ascribe-icon { font-size: 1.2em; - font-weight: 800; + font-weight: 300; } .ascribe-accordion-list-item { @@ -184,7 +184,16 @@ h1 { } } - +.ascribe-accordion-list-item-table { + tbody { + tr { + &:hover { + background-color: rgba($ascribe--button-default-color, .05); + border-left-color: rgba($ascribe--button-default-color, .5); + } + } + } +} .ascribe-footer { position: fixed; left: 0; @@ -259,15 +268,15 @@ h1 { } } - .ascribe-settings-property { + .ascribe-property { border: none; } - .ascribe-settings-property > span { + .ascribe-property > span { color: white; } - .ascribe-settings-property > input { + .ascribe-property > input { padding: 10px; background-color: #fff; margin-top: .1em; @@ -310,6 +319,31 @@ h1 { } } +.btn-ascribe-add { + width: 30px; + height: 30px; + background-color: transparent !important; + border: 1px solid $ascribe-dark-blue; + border-radius: 50%; + + &:hover { + border-color: white!important; + background-color: $ascribe-dark-blue!important; + } + + > span { + position: absolute; + left: 0; + top: 2px; + width: 30px; + height: 30px; + color: $ascribe-dark-blue; + padding: 0.4em; + &:hover { + color: white; + } + } +} // disabled buttons .btn-default.disabled, @@ -477,7 +511,7 @@ fieldset[disabled] .btn-secondary.active { } -.ascribe-settings-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before, +.ascribe-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before, .ascribe-checkbox-wrapper [type=checkbox]:checked + .checkbox:before { color: $ascribe--button-default-color; } diff --git a/sass/ascribe_property.scss b/sass/ascribe_property.scss new file mode 100644 index 00000000..dd28f901 --- /dev/null +++ b/sass/ascribe_property.scss @@ -0,0 +1,219 @@ +.ascribe-property-wrapper { + background-color: white; + border-left: 3px solid rgba(0, 0, 0, 0); + padding-bottom: 1em; + text-align: center; + width: 100%; + + &div:last-of-type { + border-bottom: 1px solid rgba(0, 0, 0, .05); + } + + &:hover { + border-left: 3px solid rgba(2, 182, 163, .4); + } +} + +.is-hidden { + display: none; +} + +.is-focused { + background-color: rgba(2, 182, 163, .05); + border-left: 3px solid rgba(2, 182, 163, 1) !important; +} + +.is-error { + background-color: rgba(169, 68, 66, .05); + border-left: 3px solid rgba(169, 68, 66, 1); + + > div { + > span { + color: rgba(169, 68, 66, 1); + font-size: .9em; + margin-right: 1em; + } + + > input, + > textarea { + color: #666; + } + } + + &:hover { + border-left: 3px solid rgba(169, 68, 66, 1); + } +} + +.is-fixed { + cursor: default; + + > div { + cursor: default; + + > span { + cursor: default; + } + + > input, + > div, + > pre, + > textarea { + color: #666; + cursor: default; + } + } +} + +.ascribe-property { + border-top: 1px solid rgba(0, 0, 0, .05); + cursor: pointer; + display: inline-block; + padding-left: 1.5em; + padding-right: 1.5em; + padding-top: 1em; + text-align: left; + width: 100%; + + > div, + > input, + > pre, + > select, + > span:not(.glyphicon), + > textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + } + + > span { + color: rgba(0, 0, 0, .5); + font-size: .9em; + font-weight: normal; + } + + > div { + > div:not(.file-drag-and-drop div) { + color: rgba(0, 0, 0, .5); + cursor: default; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1.1em; + font-weight: normal; + padding-left: 0; + } + } + + > .progressbar-container, .progressbar-progress { + margin-top: 0 !important; + } + + > input, + > pre, + > textarea, + > select, + .datepicker__input { + background-color: rgba(0, 0, 0, 0); + border: 0; + box-shadow: none; + color: rgba(0, 0, 0, .8); + font-size: 1.1em; + font-weight: 400; + margin-top: .5em; + padding-left: 0; + width: 100%; + + &:focus { + border: 0; + box-shadow: none; + outline: 0; + } + + &::selection { + background-color: rgba(0, 0, 0, 1); + color: white; + } + + } + + .datepicker__input { + padding: 0; + } + + > textarea{ + color: #666; + margin-top: 1em; + padding: 0; + } +} + +.ascribe-property-footer { + font-size: .8em; + margin-top: 10px; + width: 100%; +} + +.ascribe-property-collapsible-toggle { + border-top: 1px solid rgba(0, 0, 0, .05); + display: inline-block; + padding: .5em 1.5em; + text-align: left; + width: 100%; +} + +.ascribe-checkbox-wrapper{ + .checkbox > span { + color: black; + } +} + +.ascribe-property-collapsible-toggle, .ascribe-checkbox-wrapper { + cursor: pointer; + + // Taken from: http://www.htmllion.com/css3-checkbox.html + .checkbox { + display: inline-block; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: .9em; + font-weight: normal; + vertical-align: middle; + + > span { + left: 5px; + position: relative; + top: 1px; + + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + } + } + + [type=checkbox] { + display: none; + } + + .checkbox:before { + background-color: white; + border: 1px solid rgba(0, 0, 0, .5); + border-radius: 1px; + color: #f3f3f3; + content: ""; + display: inline-block; + height: 17px; + text-align: center; + vertical-align: middle; + width: 17px; + } + + [type=checkbox]:checked + .checkbox:before { + color: rgba(2, 182, 163, 1); + content: "\2713"; + font-size: 20px; + line-height: .8; + } +} + +.ascribe-checkbox-badge { + > span > span { + margin-top: 0; + } +} diff --git a/sass/ascribe_settings.scss b/sass/ascribe_settings.scss index c47ddb67..505444ea 100644 --- a/sass/ascribe_settings.scss +++ b/sass/ascribe_settings.scss @@ -3,72 +3,6 @@ max-width: 600px; } -.ascribe-settings-wrapper { - background-color: white; - border-left: 3px solid rgba(0, 0, 0, 0); - padding-bottom: 1em; - text-align: center; - width: 100%; - - &div:last-of-type { - border-bottom: 1px solid rgba(0, 0, 0, .05); - } - - &:hover { - border-left: 3px solid rgba(2, 182, 163, .4); - } -} - -.is-hidden { - display: none; -} - -.is-focused { - background-color: rgba(2, 182, 163, .05); - border-left: 3px solid rgba(2, 182, 163, 1) !important; -} - -.is-error { - background-color: rgba(169, 68, 66, .05); - border-left: 3px solid rgba(169, 68, 66, 1); - - > div { - > span { - color: rgba(169, 68, 66, 1); - font-size: .9em; - margin-right: 1em; - } - - > input, - > textarea { - color: #666; - } - } - - &:hover { - border-left: 3px solid rgba(169, 68, 66, 1); - } -} - -.is-fixed { - cursor: default; - - > div { - cursor: default; - - > span { - cursor: default; - } - - > input, - > div, - > pre, - > textarea { - color: #666; - cursor: default; - } - } -} .ascribe-settings-property { border-top: 1px solid rgba(0, 0, 0, .05); diff --git a/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss b/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss index 982fda69..b96385c1 100644 --- a/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss +++ b/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss @@ -154,15 +154,15 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik } } - .ascribe-settings-property { + .ascribe-property { border: none; } - .ascribe-settings-property > span { + .ascribe-property > span { color: white; } - .ascribe-settings-property > input { + .ascribe-property > input { padding: 10px; background-color: #fff; margin-top: .1em; @@ -390,7 +390,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik border-color: $ikono--button-color; } - .ascribe-settings-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before, + .ascribe-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before, .ascribe-checkbox-wrapper [type=checkbox]:checked + .checkbox:before { color: $ikono--button-color; }