From 99af814492c78aa053cc0a7d8bcf8087a99d92fe Mon Sep 17 00:00:00 2001 From: vrde Date: Mon, 31 Aug 2015 19:04:44 +0200 Subject: [PATCH] Lint scss --- .scss-lint.yml | 224 ++++++++++++++++ sass/ascribe_accordion_list.scss | 150 ++++++----- sass/ascribe_edition.scss | 46 ++-- sass/ascribe_footer.scss | 58 ++-- sass/ascribe_form.scss | 23 +- sass/ascribe_global_notification.scss | 49 ++-- sass/ascribe_login.scss | 127 ++++----- sass/ascribe_media_player.scss | 77 +++--- sass/ascribe_panel.scss | 19 +- sass/ascribe_piece_list_bulk_modal.scss | 27 +- sass/ascribe_piece_list_toolbar.scss | 36 ++- sass/ascribe_piece_register.scss | 21 +- sass/ascribe_settings.scss | 170 ++++++------ sass/ascribe_slides_container.scss | 25 +- sass/ascribe_table.scss | 44 ++- sass/ascribe_textarea.scss | 25 +- sass/ascribe_theme.scss | 8 +- sass/ascribe_uploader.scss | 145 +++++----- sass/ascribe_variables.scss | 2 +- sass/main.scss | 268 +++++++++++-------- sass/offset_right.scss | 340 ++++++++++++++---------- sass/variables.scss | 12 +- 22 files changed, 1117 insertions(+), 779 deletions(-) create mode 100644 .scss-lint.yml diff --git a/.scss-lint.yml b/.scss-lint.yml new file mode 100644 index 00000000..6d4fd6ba --- /dev/null +++ b/.scss-lint.yml @@ -0,0 +1,224 @@ +linters: + BangFormat: + enabled: true + space_before_bang: true + space_after_bang: false + + BemDepth: + enabled: false + max_elements: 1 + + BorderZero: + enabled: true + convention: zero # or `none` + + ColorKeyword: + enabled: true + + ColorVariable: + enabled: true + + Comment: + enabled: true + + DebugStatement: + enabled: true + + DeclarationOrder: + enabled: true + + DisableLinterReason: + enabled: false + + DuplicateProperty: + enabled: true + + ElsePlacement: + enabled: true + style: same_line # or 'new_line' + + EmptyLineBetweenBlocks: + enabled: true + ignore_single_line_blocks: true + + EmptyRule: + enabled: true + + ExtendDirective: + enabled: false + + FinalNewline: + enabled: true + present: true + + HexLength: + enabled: true + style: short # or 'long' + + HexNotation: + enabled: true + style: lowercase # or 'uppercase' + + HexValidation: + enabled: true + + IdSelector: + enabled: true + + ImportantRule: + enabled: true + + ImportPath: + enabled: true + leading_underscore: false + filename_extension: false + + Indentation: + enabled: true + allow_non_nested_indentation: false + character: space # or 'tab' + width: 4 + + LeadingZero: + enabled: true + style: exclude_zero # or 'include_zero' + + MergeableSelector: + enabled: true + force_nesting: true + + NameFormat: + enabled: true + allow_leading_underscore: true + convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern + + NestingDepth: + enabled: true + max_depth: 3 + ignore_parent_selectors: false + + PlaceholderInExtend: + enabled: true + + PropertyCount: + enabled: false + include_nested: false + max_properties: 10 + + PropertySortOrder: + enabled: true + ignore_unspecified: false + min_properties: 2 + separate_groups: false + + PropertySpelling: + enabled: true + extra_properties: [] + + PropertyUnits: + enabled: true + global: [ + 'ch', 'em', 'ex', 'rem', # Font-relative lengths + 'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths + 'vh', 'vw', 'vmin', 'vmax', # Viewport-percentage lengths + 'deg', 'grad', 'rad', 'turn', # Angle + 'ms', 's', # Duration + 'Hz', 'kHz', # Frequency + 'dpi', 'dpcm', 'dppx', # Resolution + '%'] # Other + properties: {} + + QualifyingElement: + enabled: true + allow_element_with_attribute: false + allow_element_with_class: false + allow_element_with_id: false + + SelectorDepth: + enabled: true + max_depth: 3 + + SelectorFormat: + enabled: true + convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern + + Shorthand: + enabled: true + allowed_shorthands: [1, 2, 3] + + SingleLinePerProperty: + enabled: true + allow_single_line_rule_sets: true + + SingleLinePerSelector: + enabled: true + + SpaceAfterComma: + enabled: true + + SpaceAfterPropertyColon: + enabled: true + style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned' + + SpaceAfterPropertyName: + enabled: true + + SpaceAfterVariableName: + enabled: true + + SpaceAroundOperator: + enabled: true + style: one_space # or 'no_space' + + SpaceBeforeBrace: + enabled: true + style: space # or 'new_line' + allow_single_line_padding: false + + SpaceBetweenParens: + enabled: true + spaces: 0 + + StringQuotes: + enabled: true + style: single_quotes # or double_quotes + + TrailingSemicolon: + enabled: true + + TrailingWhitespace: + enabled: true + + TrailingZero: + enabled: false + + TransitionAll: + enabled: false + + UnnecessaryMantissa: + enabled: true + + UnnecessaryParentReference: + enabled: true + + UrlFormat: + enabled: true + + UrlQuotes: + enabled: true + + VariableForProperty: + enabled: false + properties: [] + + VendorPrefix: + enabled: false + identifier_list: base + additional_identifiers: [] + excluded_identifiers: [] + + ZeroUnit: + enabled: true + + Compass::*: + enabled: false diff --git a/sass/ascribe_accordion_list.scss b/sass/ascribe_accordion_list.scss index 1ef4bef9..4b4186eb 100644 --- a/sass/ascribe_accordion_list.scss +++ b/sass/ascribe_accordion_list.scss @@ -1,5 +1,4 @@ $ascribe-accordion-list-item-height: 8em; -$ascribe-accordion-list-font: 'Source Sans Pro'; .ascribe-accordion-list { padding-left: 15px; @@ -11,68 +10,77 @@ $ascribe-accordion-list-font: 'Source Sans Pro'; border: 1px solid black; height: $ascribe-accordion-list-item-height; - padding-left:0; - padding-right:0; + padding-left: 0; + padding-right: 0; margin-top: 1.5em; + overflow: hidden; + + border-radius: 1px; + border-left: .1em solid rgba(0, 0, 0, .2); + border-right: .1em solid rgba(0, 0, 0, .2); + border-top: .1em solid rgba(0, 0, 0, .2); + border-bottom: .1em solid rgba(0, 0, 0, .2); + &::first-child { - margin-top:0; + margin-top: 0; } - overflow:hidden; - - border-left: 0.1em solid rgba(0,0,0,.2); - border-right: 0.1em solid rgba(0,0,0,.2); - border-top: 0.1em solid rgba(0,0,0,.2); - border-radius: 1px; - border-bottom: 0.1em solid rgba(0,0,0,.2); .wrapper { - &:hover{ - background-color: rgba(2, 182, 163, 0.05); + height: 100%; + width: 100%; + + &:hover { + background-color: rgba(2, 182, 163, .05); } - width:100%; - height:100%; + // ToDo: Include media queries for thumbnail .thumbnail-wrapper { - width: 110px; + cursor: pointer; height: 110px; - padding:0; - cursor: pointer; + padding: 0; text-align: center; + width: 110px; + img { - max-width: 100%; max-height: 100%; + max-width: 100%; } + &::before { - content: ' '; - display: inline-block; - vertical-align: middle; /* vertical alignment of the inline element */ - height: 100%; - } + content: ' '; + display: inline-block; + height: 100%; + vertical-align: middle; // vertical alignment of the inline element + } } + h1 { - margin: .1em 0 .1em 0; + cursor: pointer; font-size: 2.2em; - cursor: pointer; - white-space: nowrap; + margin: .1em 0; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } + h3 { - font-size: 1.3em; - margin: .2em 0 .3em 0; cursor: pointer; - white-space: nowrap; + font-size: 1.3em; + margin: .2em 0 .3em; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } + a:not(.btn) { color: #666; } + } } .accordion-list-item-header { - margin-top:.65em; + margin-top: .65em; > a { text-decoration: none; @@ -85,46 +93,47 @@ $ascribe-accordion-list-font: 'Source Sans Pro'; } .ascribe-accordion-list-item-table { - font-size: .9em; - text-align: center; background-color: white; - - //border-bottom-left-radius: 1px; - //border-bottom-right-radius: 1px; - border-bottom: 0.1em solid rgba(0,0,0,.15); - border-left: 0.1em solid rgba(0,0,0,.2); - border-right: 0.1em solid rgba(0,0,0,.2); + border-bottom: .1em solid rgba(0, 0, 0, .15); + border-left: .1em solid rgba(0, 0, 0, .2); + border-right: .1em solid rgba(0, 0, 0, .2); + font-size: .9em; padding: 0; + text-align: center; + thead:first-child { + border-bottom: 1px solid rgba(0, 0, 0, .05); + border-left: 3px solid rgba(0, 0, 0, 0); + tr:first-child { - border: none! important; + border: none !important; th { + border: none !important; padding-left: 10px; - border: none! important; } } - border-left: 3px solid rgba(0,0,0,0); - //border-top: 1px solid rgba(0,0,0,.1); - border-bottom: 1px solid rgba(0,0,0,.05); } + tbody { tr { + border-bottom: 1px solid rgba(0, 0, 0, .03); + border-left: 3px solid rgba(0, 0, 0, 0); padding: 1em; - &:hover{ + + &:hover { background-color: rgba(2, 182, 163, 0.05); border-left: 3px solid rgba(2, 182, 163, 0.4); } - border-left: 3px solid rgba(0,0,0,0); - border-bottom: 1px solid rgba(0,0,0,.03); - td { - border: none! important; - a { - color: #444 - } + td { + border: none !important; + a { + color: #444; + } } } - tr{ + + tr { td:first-child { margin-left: 10px; } @@ -132,48 +141,51 @@ $ascribe-accordion-list-font: 'Source Sans Pro'; } } -span.ascribe-accordion-list-table-toggle { - -webkit-user-select: none; - -moz-user-select: none; +.ascribe-accordion-list-table-toggle { -khtml-user-select: none; + -moz-user-select: none; -ms-user-select: none; - + -webkit-user-select: none; + &:hover { color: $ascribe-color-green; - cursor:pointer; + cursor: pointer; } } .ascribe-accordion-list-table-list { margin-bottom: .5em; - th, td { - font-size:.85em; - text-align: center; + + th, + td { + font-size: .85em; + text-align: center; } } .request-action-badge { - position: absolute; - top: 0px; - right: 0px; color: $ascribe-color-green; font-size: 1.2em; - padding: 0.3em; + padding: .3em; + position: absolute; + right: 0; + top: 0; } .ascribe-accordion-list-item-edition-widget { cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; -khtml-user-select: none; + -moz-user-select: none; -ms-user-select: none; + -webkit-user-select: none; &:hover { color: $ascribe-color-green; } + .glyphicon { + font-size: .8em; top: 1px !important; - font-size: 0.8em; } -} \ No newline at end of file +} diff --git a/sass/ascribe_edition.scss b/sass/ascribe_edition.scss index fe647e2d..f86f74e2 100644 --- a/sass/ascribe_edition.scss +++ b/sass/ascribe_edition.scss @@ -5,46 +5,48 @@ .ascribe-edition-collapsible-wrapper { vertical-align: bottom; - width:100%; -} - -.ascribe-edition-collapsible-wrapper > div:first-child { width: 100%; - cursor: pointer; - background-color: rgba(0,0,0,0); - padding: 0 10px 10px 0; - margin-top: 20px; -} -.ascribe-edition-collapsible-wrapper > div > span { - font-size: 1.2em; - margin-right: .5em; -} -.ascribe-edition-collapsible-wrapper > div > span:nth-child(2) { - font-size: 0.9em; + + > div:first-child { + background-color: rgba(0, 0, 0, 0); + cursor: pointer; + margin-top: 20px; + padding: 0 10px 10px 0; + width: 100%; + } + + > div > span { + font-size: 1.2em; + margin-right: .5em; + } + + > div > span:nth-child(2) { + font-size: .9em; + } } .ascribe-edition-collapsible-content { - width:100%; background: none; - border: none; + border: 0; + width: 100%; } .coa-file-wrapper { display: table; height: 200px; - overflow: hidden; margin: 0 auto; - width: 100%; + overflow: hidden; padding: 1em; + width: 100%; } .coa-file { + background-color: #F8F8F8; + border: 1px solid #CCC; display: table-cell; vertical-align: middle; - border: 1px solid #CCC; - background-color: #F8F8F8; } .ascribe-button-list { margin-top: 1em; -} \ No newline at end of file +} diff --git a/sass/ascribe_footer.scss b/sass/ascribe_footer.scss index e51443be..fe52b798 100644 --- a/sass/ascribe_footer.scss +++ b/sass/ascribe_footer.scss @@ -1,17 +1,32 @@ .ascribe-footer { text-align: center; -} -.ascribe-footer hr { - border: 0; - border-top: 1px solid #eee; - background-color: rgba(0,0,0,0); - margin-bottom: 0 !important; -} + hr { + background-color: rgba(0, 0, 0, 0); + border-top: 1px solid #eee; + border: 0; + margin-bottom: 0 !important; + } + + .btn-ascribe-landing { + margin-top: 2em; + } + + .social-icons-wrapper { + margin-top: 1em; + + a { + color: #424242; + font-size: 1.3em; + margin-left: 1em; + } + + a:hover { + color: #48DACB; + } + } -.ascribe-footer .btn-ascribe-landing { - margin-top: 2em; } .ascribe-footer-statement { @@ -21,7 +36,8 @@ margin-top: 0; } -.ascribe-footer-statement a, .ascribe-footer-sub-statement a { +.ascribe-footer-statement a, +.ascribe-footer-sub-statement a { color: #424242; } @@ -30,23 +46,7 @@ margin-bottom: 2.5em; } -.ascribe-footer-statement a, .ascribe-footer-sub-statement a { - color: #424242; +.ascribe-footer-statement a:hover, +.ascribe-footer-sub-statement a:hover { + color: #48dacb; } -.ascribe-footer-statement a:hover, .ascribe-footer-sub-statement a:hover { - color: #48DACB; -} - -.ascribe-footer .social-icons-wrapper { - margin-top: 1em; -} - -.ascribe-footer .social-icons-wrapper a { - color: #424242; - margin-left: 1em; - font-size: 1.3em; -} - -.ascribe-footer .social-icons-wrapper a:hover { - color: #48DACB; -} \ No newline at end of file diff --git a/sass/ascribe_form.scss b/sass/ascribe_form.scss index d2802ee8..41e17de1 100644 --- a/sass/ascribe_form.scss +++ b/sass/ascribe_form.scss @@ -1,25 +1,26 @@ .ascribe-form-bordered { - border: 1px solid #F5F5F5; + border: 1px solid #f5f5f5; } .ascribe-form-header { - padding-bottom: 0; - margin-bottom: 0; background-color: white; -} - -.ascribe-form-header > h3 { - padding: .75em 0 .75em 1em; - margin-top: 0; margin-bottom: 0; - color: #616161; + padding-bottom: 0; + + > h3 { + color: #616161; + margin-bottom: 0; + margin-top: 0; + padding: .75em 0 .75em 1em; + } } .ascribe-form-wrapper { - width: 80%; margin: 0 auto; max-width: 600px; + width: 80%; + @media (max-width: 550px) { width: 100%; } -} \ No newline at end of file +} diff --git a/sass/ascribe_global_notification.scss b/sass/ascribe_global_notification.scss index 527b1f06..5286a32c 100644 --- a/sass/ascribe_global_notification.scss +++ b/sass/ascribe_global_notification.scss @@ -1,14 +1,12 @@ .ascribe-global-notification { - position: fixed; - background-color: #212121; color: white; + display: table; + height: 3.5em; + left: 0; + position: fixed; + transition: .2s bottom cubic-bezier(.77, 0, .175, 1); width: 100%; - height:3.5em; - left:0; - display:table; - - transition: .2s bottom cubic-bezier(0.77, 0, 0.175, 1); } .ascribe-global-notification-off { @@ -19,34 +17,29 @@ bottom: 0; } -.ascribe-global-notification > div, .ascribe-global-notification-bubble > div { - display:table-cell; - vertical-align: middle; - font-size: 1.25em; - font-family: 'Source Sans Pro'; - text-align: right; - padding-right: 3em; -} - +.ascribe-global-notification > div, .ascribe-global-notification-bubble > div { - padding: .75em 1.5em .75em 1.5em; + display: table-cell; + font-size: 1.25em; + padding-right: 3em; + text-align: right; + vertical-align: middle; } .ascribe-global-notification-bubble { - position: fixed; - bottom: 3em; - right: -50em; - - display:table; - - height: 3.5em; - background-color: #212121; border-radius: 2px; - + bottom: 3em; color: white; - + display: table; + height: 3.5em; + position: fixed; + right: -50em; transition: 1s right ease; + + > div { + padding: .75em 1.5em; + } } .ascribe-global-notification-bubble-off { @@ -63,4 +56,4 @@ .ascribe-global-notification-success { background-color: rgba(2, 182, 163, 1); -} \ No newline at end of file +} diff --git a/sass/ascribe_login.scss b/sass/ascribe_login.scss index 9ff2857f..9060fee5 100644 --- a/sass/ascribe_login.scss +++ b/sass/ascribe_login.scss @@ -2,84 +2,91 @@ $break-small: 764px; .ascribe-btn-login { - padding: 0.5em; - font-weight: 500; - text-align: center; - background-color: rgba(2, 182, 163, 1); - color: white; - font-size: 1.2em; - border-radius: 0; - width: 100%; - border:none; - //margin-left: 1.2em; - - &:hover { - color: white; - background-color: rgba(2, 182, 163, 0.8); + background-color: rgba(2, 182, 163, 1); border: none; - } - &:active, &:focus { + border-radius: 0; color: white; - background-color: rgba(2, 182, 163, 0.6); - border: none; - } + font-size: 1.2em; + font-weight: 500; + padding: .5em; + text-align: center; + width: 100%; + //margin-left: 1.2em; - &[disabled] { - opacity: .3; - } + &:hover { + background-color: rgba(2, 182, 163, .8); + border: 0; + color: white; + } + + &:active, + &:focus { + background-color: rgba(2, 182, 163, .6); + border: 0; + color: white; + } + + &[disabled] { + opacity: .3; + } } -.ascribe-btn-login-spinner{ - background-color: rgba(2, 182, 163, 0.4); - padding: 0.4em; - img { - height: 1.6em; - } - &:hover { - background-color: rgba(2, 182, 163, 0.4); - } - &:active, &:focus { - background-color: rgba(2, 182, 163, 0.4); - } +.ascribe-btn-login-spinner { + background-color: rgba(2, 182, 163, .4); + padding: .4em; + + img { + height: 1.6em; + } + + &:hover { + background-color: rgba(2, 182, 163, .4); + } + + &:active, + &:focus { + background-color: rgba(2, 182, 163, .4); + } } .ascribe-login-wrapper { - width: 80%; - margin: 0 auto; - max-width: 600px; - @media screen and (max-width: $break-small) { - width: 100%; - } + margin: 0 auto; + max-width: 600px; + width: 80%; + + @media screen and (max-width: $break-small) { + width: 100%; + } } .ascribe-login-text { - font-size: 0.8em; - padding: 0 0 1em 0; - margin-left: 0.4em; - margin-top: 1.5em; - color: rgba(0, 0, 0, 0.6); + color: rgba(0, 0, 0, .6); + font-size: .8em; + margin-left: .4em; + margin-top: 1.5em; + padding: 0 0 1em; } .ascribe-login-header { - font-size: 2em; - margin-left: 0.8em; + font-size: 2em; + margin-left: .8em; } .ascribe-form { - hr { - color: rgba(0, 0, 0, 0.05); - border: none; - height: 1px; - background-color: rgba(0, 0, 0, 0.05); - margin-top: 0; - } + hr { + background-color: rgba(0, 0, 0, .05); + border: 0; + color: rgba(0, 0, 0, .05); + height: 1px; + margin-top: 0; + } } %vertical-align { - position: relative; - top: 50%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); -} \ No newline at end of file + position: relative; + top: 50%; + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + transform: translateY(-50%); +} diff --git a/sass/ascribe_media_player.scss b/sass/ascribe_media_player.scss index f3b87618..6a70ad4d 100644 --- a/sass/ascribe_media_player.scss +++ b/sass/ascribe_media_player.scss @@ -3,35 +3,35 @@ video, img { - max-width: 100%; - max-height: 640px; - width: auto; - height: auto; display: block; + height: auto; margin: 0 auto; + max-height: 640px; + max-width: 100%; + width: auto; } .media-other { - font-size: 500%; color: #cccccc; + font-size: 500%; } .audiojs { + background-image: none; margin: 50px auto; - background-image: none; - } + * { + box-sizing: content-box; + } - .audiojs * { - box-sizing: content-box; - } + .loaded { + background-color: $ascribe-color-green; + background-image: none; + } - .audiojs .loaded { - background-color: $ascribe-color-green; - background-image: none; - } - .audiojs .progress { - background-color: rgba(255,255,255,0.8); - background-image: none; + .progress { + background-color: rgba(255, 255, 255, .8); + background-image: none; + } } .video-js, @@ -44,12 +44,13 @@ } .vjs-fullscreen { - padding-top: 0px; + padding-top: 0; + + video { + max-height: 100%; + } } - .vjs-fullscreen video { - max-height: 100%; - } .vjs-default-skin .vjs-play-progress, .vjs-default-skin .vjs-volume-level { @@ -57,41 +58,35 @@ } .vjs-default-skin .vjs-big-play-button { - border-radius: 6px; - -o-border-radius: 6px; + background-color: rgba(0, 0, 0, .8); + border: 0; -moz-border-radius: 6px; + -o-border-radius: 6px; -webkit-border-radius: 6px; - - box-shadow: none; - -o-box-shadow: none; + border-radius: 6px; -moz-box-shadow: none; + -o-box-shadow: none; -webkit-box-shadow: none; - - width: 100px; + box-shadow: none; height: 60px; - top: 50%; left: 50%; margin: -30px -50px; - - border: none; - - background-color: rgba(0,0,0,.8); + top: 50%; + width: 100px; } .vjs-default-skin:hover .vjs-big-play-button, .vjs-default-skin .vjs-big-play-button:focus { + background-color: rgba(0, 0, 0, .9); border-color: #fff; - background-color: rgba(0,0,0,.9); - - box-shadow: none; - -o-box-shadow: none; -moz-box-shadow: none; + -o-box-shadow: none; -webkit-box-shadow: none; - - transition: all 0s; - -o-transition: all 0s; + box-shadow: none; -moz-transition: all 0s; + -o-transition: all 0s; -webkit-transition: all 0s; + transition: all 0s; } .vjs-default-skin .vjs-big-play-button:before { @@ -108,7 +103,7 @@ } .vjs-default-skin .vjs-control-bar { - background-color: rgba(0,0,0,.7); + background-color: rgba(0, 0, 0, .7); } } diff --git a/sass/ascribe_panel.scss b/sass/ascribe_panel.scss index 73fe572e..9d53b911 100644 --- a/sass/ascribe_panel.scss +++ b/sass/ascribe_panel.scss @@ -1,13 +1,12 @@ .ascribe-panel-wrapper { - border: 1px solid #DDD; - min-height: 5em; + border: 1px solid #ddd; height: 5em; - margin-top: 1em; + min-height: 5em; > div { - height: 100%; float: left; + height: 100%; &:first-child { width: 60%; @@ -20,7 +19,7 @@ } .ascribe-panel-table { - display:table; + display: table; > .ascribe-panel-content { display: table-cell; @@ -32,7 +31,6 @@ > div { padding-left: 1em; } - } &:nth-child(2) { @@ -40,7 +38,7 @@ padding-right: 1em; > button { - float:right; + float: right; } } } @@ -52,7 +50,6 @@ > div { padding-left: 2em; } - } &:nth-child(2) { @@ -60,7 +57,7 @@ padding-right: 2em; > button { - float:right; + float: right; } } } @@ -73,8 +70,8 @@ } .ascribe-panel-subtitle { + color: rgba(0, 0, 0, .5); font-size: .7em; - color: rgba(0,0,0,0.5); } } @@ -85,8 +82,8 @@ } .ascribe-panel-subtitle { + color: rgba(0, 0, 0, .5); font-size: .9em; - color: rgba(0,0,0,0.5); } } diff --git a/sass/ascribe_piece_list_bulk_modal.scss b/sass/ascribe_piece_list_bulk_modal.scss index 1811982b..4af61e1f 100644 --- a/sass/ascribe_piece_list_bulk_modal.scss +++ b/sass/ascribe_piece_list_bulk_modal.scss @@ -1,20 +1,17 @@ .ascribe-piece-list-bulk-modal { - position: fixed; - top:0; - left: 3%; - width:94%; - - background-color: #FAFAFA; - - border-left: 0.1em solid #E0E0E0; - border-right: 0.1em solid #E0E0E0; - border-top: 0.1em solid #E0E0E0; + background-color: #fafafa; + border-bottom: .2em solid #e0e0e0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; - border-bottom: 0.2em solid #E0E0E0; - z-index:1000; - + border-left: .1em solid #e0e0e0; + border-right: .1em solid #e0e0e0; + border-top: .1em solid #e0e0e0; + left: 3%; padding-bottom: 1em; + position: fixed; + top: 0; + width: 94%; + z-index: 1000; } @media(min-width:1174px){ @@ -25,6 +22,6 @@ } .piece-list-bulk-modal-clear-all { + cursor: pointer; text-decoration: underline; - cursor:pointer; -} \ No newline at end of file +} diff --git a/sass/ascribe_piece_list_toolbar.scss b/sass/ascribe_piece_list_toolbar.scss index 8756adf4..aeec1bff 100644 --- a/sass/ascribe_piece_list_toolbar.scss +++ b/sass/ascribe_piece_list_toolbar.scss @@ -6,6 +6,7 @@ .search-bar { max-width: 200px; + input { height: 33px; } @@ -13,37 +14,45 @@ .ascribe-input-glyph > .form-group > .input-group { margin-left: 6px; + input { - box-shadow: none; background-color: transparent; border: 1px solid #02b6a3; border-right: 0; + box-shadow: none; } + > .input-group-addon { background-color: transparent; + > .filter-glyph { color: #02b6a3; } + border: 1px solid #02b6a3; border-left: 0; } } .ascribe-piece-list-toolbar-filter-widget { + button { - background-color: rgba(0,0,0,0); + background-color: rgba(0, 0, 0, 0); + border: 1px solid rgba(0, 0, 0, 0); color: #02b6a3; - border: 1px solid rgba(0,0,0,0); padding: 6px 4px 6px 8px; - &:hover, &:active { + + &:hover, + &:active { background-color: #02b6a3 !important; - color: white; border: 1px solid #02b6a3 !important; + color: white; } .caret { display: none; } } + .filter-widget-item { > a { @@ -53,23 +62,22 @@ } .checkbox-line { - position: relative; height: 25px; + position: relative; span { - position: absolute; - left: 9px; - top: 3px; cursor: pointer; - + left: 9px; margin-right: 10px; + position: absolute; + top: 3px; } input { - position: absolute; - top: 2px; - right: 9px; margin-left: 10px; + position: absolute; + right: 9px; + top: 2px; } } -} \ No newline at end of file +} diff --git a/sass/ascribe_piece_register.scss b/sass/ascribe_piece_register.scss index 1e4c0fa6..5bc6c3d7 100644 --- a/sass/ascribe_piece_register.scss +++ b/sass/ascribe_piece_register.scss @@ -2,15 +2,16 @@ $break-small: 764px; $break-medium: 991px; .ascribe-row { - @media screen and (max-width: $break-medium) { - max-width: 600px; - } - @media screen and (min-width: $break-medium) { - max-width: 1200px; - } - margin: 0 auto; + @media screen and (max-width: $break-medium) { + max-width: 600px; + } + @media screen and (min-width: $break-medium) { + max-width: 1200px; + } + margin: 0 auto; + + > div { + padding-left: 0; + } } -.ascribe-row > div { - padding-left: 0; -} \ No newline at end of file diff --git a/sass/ascribe_settings.scss b/sass/ascribe_settings.scss index 624b8a3b..c47ddb67 100644 --- a/sass/ascribe_settings.scss +++ b/sass/ascribe_settings.scss @@ -1,98 +1,108 @@ -.settings-container{ - max-width: 600px; +.settings-container { margin: auto; + max-width: 600px; } .ascribe-settings-wrapper { - width: 100%; - text-align: center; - padding-bottom: 1em; - background-color: white; - - border-left: 3px solid rgba(0,0,0,0); + 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); + border-bottom: 1px solid rgba(0, 0, 0, .05); } - &:hover{ - border-left: 3px solid rgba(2, 182, 163, 0.4); + + &:hover { + border-left: 3px solid rgba(2, 182, 163, .4); } } -.is-hidden{ - display: none; +.is-hidden { + display: none; } .is-focused { - background-color: rgba(2, 182, 163, 0.05); + 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, 0.05); + 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: 0.9em; + font-size: .9em; margin-right: 1em; } - > input, > textarea { + + > input, + > textarea { color: #666; } } - &:hover{ + &:hover { border-left: 3px solid rgba(169, 68, 66, 1); } } .is-fixed { cursor: default; + > div { cursor: default; + > span { cursor: default; } - > input, > div, > pre, > textarea { - cursor: default; + + > input, + > div, + > pre, + > textarea { color: #666; + cursor: default; } } } .ascribe-settings-property { + border-top: 1px solid rgba(0, 0, 0, .05); + cursor: pointer; display: inline-block; - width: 100%; - text-align: left; - border-top: 1px solid rgba(0,0,0,.05); - - padding-top: 1em; padding-left: 1.5em; padding-right: 1.5em; + padding-top: 1em; + text-align: left; + width: 100%; - cursor:pointer; - - > input, > div, > span:not(.glyphicon), > pre, > textarea, > select { + > 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; - font-size: 0.9em; - color: rgba(0,0,0,.5); } > div { - /* margin-top: 10px; */ > div:not(.file-drag-and-drop div) { - padding-left: 0; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: normal; - font-size: 1.1em; - cursor: default; - color: rgba(0, 0, 0, .5); + 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; } } @@ -100,29 +110,34 @@ margin-top: 0 !important; } - > input, > pre, > textarea, > select, .datepicker__input { - font-weight: 400; - font-size: 1.1em; - width:100%; - margin-top: .5em; + > input, + > pre, + > textarea, + > select, + .datepicker__input { + background-color: rgba(0, 0, 0, 0); border: 0; - background-color: rgba(0,0,0,0); - color: rgba(0,0,0,.8); - padding-left: 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; - outline:0; + border: 0; box-shadow: none; + outline: 0; } &::selection { + background-color: rgba(0, 0, 0, 1); color: white; - background-color: rgba(0,0,0,1); } } + .datepicker__input { padding: 0; } @@ -135,78 +150,75 @@ } .ascribe-property-footer { - font-size: 0.8em; + font-size: .8em; margin-top: 10px; width: 100%; } .ascribe-settings-property-collapsible-toggle { - text-align: left; + border-top: 1px solid rgba(0, 0, 0, .05); display: inline-block; + padding: .5em 1.5em; + text-align: left; width: 100%; - border-top: 1px solid rgba(0,0,0,.05); - - padding: .5em 1.5em .5em 1.5em; } .ascribe-checkbox-wrapper{ - .checkbox > span {color: black;} + .checkbox > span { + color: black; + } } .ascribe-settings-property-collapsible-toggle, .ascribe-checkbox-wrapper { + cursor: pointer; - cursor:pointer; - - /* Taken from: http://www.htmllion.com/css3-checkbox.html */ + // Taken from: http://www.htmllion.com/css3-checkbox.html .checkbox { display: inline-block; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: normal; font-size: .9em; - vertical-align:middle; + font-weight: normal; + vertical-align: middle; > span { + left: 5px; position: relative; top: 1px; - left: 5px; - -webkit-user-select: none; - -moz-user-select: none; -khtml-user-select: none; + -moz-user-select: none; -ms-user-select: none; + -webkit-user-select: none; } } - input[type=checkbox] { - display: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; - width: 17px; height: 17px; - vertical-align:middle; - background-color: white; - color: #f3f3f3; text-align: center; - - border-radius: 1px; - border: 1px solid rgba(0, 0, 0, .5); + vertical-align: middle; + width: 17px; } - input[type=checkbox]:checked + .checkbox:before { - line-height: .8; - + [type=checkbox]:checked + .checkbox:before { + color: rgba(2, 182, 163, 1); content: "\2713"; font-size: 20px; - color: rgba(2, 182, 163, 1); + line-height: .8; } } -.ascribe-checkbox-badge{ +.ascribe-checkbox-badge { > span > span { margin-top: 0; } -} \ No newline at end of file +} diff --git a/sass/ascribe_slides_container.scss b/sass/ascribe_slides_container.scss index 4b96017c..c213e15b 100644 --- a/sass/ascribe_slides_container.scss +++ b/sass/ascribe_slides_container.scss @@ -5,41 +5,42 @@ padding-right: 0; } -.ascribe-sliding-container { - transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); +.ascribe-sliding-container { padding-left: 0; padding-right: 0; + transition: transform 1s cubic-bezier(.23, 1, .32, 1); } .ascribe-slide { - position: relative; + float: left; min-height: 1px; - float:left; + position: relative; } -.ascribe-breadcrumb-container{ +.ascribe-breadcrumb-container { div:last-child { .ascribe-breadcrumb { - border-right: 1px solid #EEE; + border-right: 1px solid #eee; } } } .ascribe-breadcrumb { - padding: 1em; - border: 1px solid #EEE; - border-right: 1px solid rgba(0, 0, 0, 0); - margin-bottom: 0.6em; background-color: white; + border: 1px solid #eee; + border-right: 1px solid rgba(0, 0, 0, 0); + margin-bottom: .6em; + padding: 1em; .active { color: #666; } + a { - color: #DDD; - text-decoration: none; + color: #ddd; font-size: 1.1em; font-style: italic; + text-decoration: none; } } diff --git a/sass/ascribe_table.scss b/sass/ascribe_table.scss index 225c27ca..c4b82a29 100644 --- a/sass/ascribe_table.scss +++ b/sass/ascribe_table.scss @@ -1,11 +1,11 @@ .ascribe-table { - margin-bottom:0; + margin-bottom: 0; font-size: 1.1em; } -/*This is aligning the first checkbox in pieclist detail with all the other ones*/ +// This is aligning the first checkbox in pieclist detail with all the other ones .table > thead:first-child > tr:first-child > th { - padding-left:0; + padding-left: 0; } @@ -14,38 +14,36 @@ } .ascribe-table-header-column > span { - display: table-cell; - vertical-align: middle; - font-family: 'Source Sans Pro'; - font-weight: 600; color: #424242; + display: table-cell; + font-weight: 600; + vertical-align: middle; } .ascribe-table-item-column { - font-family: 'Source Sans Pro'; + display: table-cell; font-size: .8em; - height:3em; + height: 3em; vertical-align: middle; - display: table-cell; -} -.ascribe-table-item-column > * { - display: table-cell; - vertical-align: middle; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} + > * { + display: table-cell; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + white-space: nowrap; + } -.ascribe-table-item-column > span > input { - margin-top:10px; - margin-left:2px; + > span > input { + margin-left: 2px; + margin-top: 10px; + } } .ascribe-table-item-selected { - background-color: rgba(2, 182, 163, 0.5); + background-color: rgba(2, 182, 163, .5); } .ascribe-table-item-selectable { cursor: default; -} \ No newline at end of file +} diff --git a/sass/ascribe_textarea.scss b/sass/ascribe_textarea.scss index 2d368dbf..bcd0502a 100644 --- a/sass/ascribe_textarea.scss +++ b/sass/ascribe_textarea.scss @@ -1,24 +1,23 @@ .ascribe-textarea { - border: none; + border: 0; box-shadow: none; margin-bottom: 1em; } .ascribe-textarea-editable:hover { - //border: 1px solid #AAA;; - border: none; + border: 0; } -.ascribe-pre{ - word-break: break-word; - white-space: pre-wrap; - white-space: -moz-pre-wrap; - white-space: -pre-wrap; - white-space: -o-pre-wrap; - font-family: inherit; - text-align: justify; +.ascribe-pre { background-color: white; - border: none; + border: 0; + font-family: inherit; + margin: 0; padding: 0; - margin:0; + text-align: justify; + white-space: -moz-pre-wrap; + white-space: -o-pre-wrap; + white-space: -pre-wrap; + white-space: pre-wrap; + word-break: break-word; } diff --git a/sass/ascribe_theme.scss b/sass/ascribe_theme.scss index e02b97c6..5f1dd563 100644 --- a/sass/ascribe_theme.scss +++ b/sass/ascribe_theme.scss @@ -1,15 +1,15 @@ -/* All bootstrap overwrites should take place in this file */ +// All bootstrap overwrites should take place in this file .pager li a { color: white; } .panel-default { - border: none; + border: 0; box-shadow: none; margin-bottom: 0; } .panel-body { - padding:0; -} \ No newline at end of file + padding: 0; +} diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss index 2aab021a..f7120fe7 100644 --- a/sass/ascribe_uploader.scss +++ b/sass/ascribe_uploader.scss @@ -1,21 +1,26 @@ .file-drag-and-drop { - display: block; - outline: 1px dashed #9E9E9E; - vertical-align: middle; - text-align: center; - height: auto; - background-color: #FEFEFE; - overflow: auto; - margin-top: 1em; - + background-color: #fefefe; cursor: default !important; + display: block; + height: auto; + margin-top: 1em; + outline: 1px dashed #9e9e9e; + overflow: auto; + padding: 1.5em 0; + text-align: center; + vertical-align: middle; - padding: 1.5em 0 1.5em 0; + .file-drag-and-drop-dialog > p:first-child { + font-size: 1.5em !important; + margin-bottom: 0; + margin-top: 0; + padding-bottom: 0; + } } .inactive-dropzone { + background-color: rgba(0, 0, 0, 0) !important; cursor: default !important; - background-color: rgba(0,0,0,0) !important; outline: 0; } @@ -25,44 +30,34 @@ } .btn { - margin: 0 1em 0 1em; + margin: 0 1em; } } -.file-drag-and-drop .file-drag-and-drop-dialog > p:first-child { - font-size: 1.5em !important; - - margin-top: 0; - margin-bottom: 0; - padding-bottom: 0; -} .file-drag-and-drop-position { - position: relative; display: inline-block; - margin-left: .7em; margin-right: .7em; + position: relative; .delete-file { - display: block; background-color: black; - - width: 20px; + border-radius: 1em; + cursor: pointer; + display: block; height: 20px; position: absolute; right: -7px; - top: -7px; - border-radius: 1em; text-align: center; - - cursor: pointer; + top: -7px; + width: 20px; span { color: white; - top: 1; - left: 0; font-size: .8em; + left: 0; + top: 1px; &:hover { color: $brand-danger; @@ -73,68 +68,74 @@ .file-drag-and-drop-preview-table-wrapper { display: table; - height:94px; - width:104px; + height: 94px; + width: 104px; } .file-drag-and-drop-preview { - overflow:hidden; - cursor: default; - background-color: #EEEEEE; + background-color: #eeeeee; border: 1px solid #616161; + cursor: default; + overflow: hidden; } .file-drag-and-drop-preview-image { - display: table; - height:104px; - width:104px; - overflow:hidden; border: 1px solid #616161; + display: table; + height: 104px; + overflow: hidden; text-align: center; -} + width: 104px; -.file-drag-and-drop-preview-image .action-file { - font-size: 2.5em; - margin-top: .6em; - color: white; - text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; - cursor: pointer; + .action-file { + color: white; + cursor: pointer; + font-size: 2.5em; + margin-top: .6em; + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; - &:link, &:visited, &:hover, &:active { - text-decoration: none; - } + &:link, + &:visited, + &:hover, + &:active { + text-decoration: none; + } - &:hover { - color: #d9534f; + &:hover { + color: #d9534f; + } } } -.file-drag-and-drop-preview-other .action-file { - position: relative; - top: .3em; - margin-top: 0; - font-size: 2.5em; - color: white; - text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; - cursor: pointer; - - &:link, &:visited, &:hover, &:active { - text-decoration: none; - } - - &:hover { - color: #d9534f; - } -} .file-drag-and-drop-preview-other { display: table-cell; text-align: center; vertical-align: middle; -} + .action-file { + color: white; + cursor: pointer; + font-size: 2.5em; + margin-top: 0; + position: relative; + text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; + top: .3em; -.file-drag-and-drop-preview-other span:not(:first-child) { - display: block; - margin-top: .5em; + &:link, + &:visited, + &:hover, + &:active { + text-decoration: none; + } + + &:hover { + color: #d9534f; + } + + span:not(:first-child) { + display: block; + margin-top: .5em; + } + } } diff --git a/sass/ascribe_variables.scss b/sass/ascribe_variables.scss index 761cbfc3..2af5c6d3 100644 --- a/sass/ascribe_variables.scss +++ b/sass/ascribe_variables.scss @@ -1,3 +1,3 @@ $ascribe-color-green: rgba(2, 182, 163, 1); -$ascribe-brand-danger: #FC535F; +$ascribe-brand-danger: #fc535f; diff --git a/sass/main.scss b/sass/main.scss index 8a4f1306..b8587635 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -33,9 +33,11 @@ $BASE_URL: '<%= BASE_URL %>'; @import 'whitelabel/index'; -html, body { +html, +body { + background-color: #fdfdfd; + font-family: 'Source Sans Pro'; height: 100%; - background-color: #FDFDFD; } html { @@ -43,8 +45,8 @@ html { } .ascribe-default-app { - padding-top: 70px; overflow-x: hidden; + padding-top: 70px; } hr { @@ -59,154 +61,182 @@ hr { display: none; } -.no-margin{ +.no-margin { margin: 0; + margin-left: 0; + margin-right: 0; } -.no-padding{ + +.no-padding { padding: 0; } -.inline{ + +.inline { display: inline; } .navbar-default { - border: none; - border-left:0; - border-right:0; + border: 0; + border-color: #ccc; + border-left: 0; + border-right: 0; + border-top: 0; + font-size: .8em; margin-bottom: 1.5em; - border-top:0; - border-color: #CCC; - font-size: 0.8em; -} -.navbar-default .navbar-nav > .active { - a { - background-color: transparent!important; - > span {color: #02b6a3;} - color: #02b6a3; - border-bottom: 1px solid #02b6a3; + .navbar-nav > li > a { + border: 1px solid rgba(0, 0, 0, 0); + } - &:hover, &:focus{ - > span {color: #02b6a3;} - color: #02b6a3; - background-color: transparent; + .navbar-nav > .active { + a { + background-color: transparent !important; border-bottom: 1px solid #02b6a3; + color: #02b6a3; + + > span { + color: #02b6a3; + } + + &:hover, + &:focus { + background-color: transparent; + border-bottom: 1px solid #02b6a3; + color: #02b6a3; + + > span { + color: #02b6a3; + } + } } } } -.navbar-default .navbar-nav > li > a { - border: 1px solid rgba(0,0,0,0); -} + + .img-brand { - padding: 0; height: 45px; - margin: 5px 0 5px 0; + margin: 5px 0; + padding: 0; } + .truncate { - white-space: nowrap; - width: 4em; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; + width: 4em; + @media only screen and (min-width: 400px) { width: 8em; } + @media only screen and (min-width: 600px) { width: 12em; } + @media only screen and (min-width: 1000px) { width: 14em; } + @media only screen and (min-width: 1200px) { width: 16em; } + @media only screen and (min-width: 1400px) { width: 18em; } } + .navbar-right { margin-right: 0; } .clear-paddings { - padding-left:0; - padding-right:0; + padding-left: 0; + padding-right: 0; } .clear-margins { - margin-top:0; - margin-bottom:0; + margin-bottom: 0; + margin-top: 0; } .ascribe-color { color: $ascribe-color-green; } -.ascribe-subheader{ +.ascribe-subheader { padding-bottom: 10px; margin-top: -10px; + a { - cursor: pointer; - font-size: 0.8em; color: #222; + cursor: pointer; + font-size: .8em; } } -.tooltip-inner{ +.tooltip-inner { + background-color: #fcfafa; + border: 1px solid; + border-radius: 0; + color: #000; max-width: 300px; padding: 3px 8px; - color: #000; text-align: center; text-decoration: none; - background-color: #FCFAFA; - border-radius: 0; - border: 1px solid; } -/* Taken from http://stackoverflow.com/a/20548578 */ +// Taken from http://stackoverflow.com/a/20548578 .vcenter { display: inline-block; - vertical-align: middle; float: none; + vertical-align: middle; } -.filter-glyph{ + +.filter-glyph { color: white; } -.no-margin { - margin-right: 0; - margin-left: 0; -} -.btn-delete{ - background-color: rgba(0,0,0,0); + +.btn-delete { + background-color: rgba(0, 0, 0, 0); + border: 1px solid rgba(0, 0, 0, 0); color: #888; - border: 1px solid rgba(0,0,0,0); - &:hover{ + + &:hover { border: 1px solid $ascribe-brand-danger; } } -.btn-ascribe, .btn-ascribe-inv { + +.btn-ascribe, +.btn-ascribe-inv { border: 1px solid #444; - line-height: 2em; - margin-right: 1px; - margin-left: 0 !important; - font-family: sans-serif !important; border-radius: 0 !important; + font-family: sans-serif !important; + line-height: 2em; + margin-left: 0 !important; + margin-right: 1px; } -.btn-ascribe, .btn-ascribe-inv:active, .btn-ascribe-inv:hover { +.btn-ascribe, +.btn-ascribe-inv:active, +.btn-ascribe-inv:hover { + background-color: #fff; color: #222 !important; - background-color: #FFF; } -.btn-ascribe:active, .btn-ascribe:hover, .btn-ascribe-inv { - color: #FFF !important; +.btn-ascribe:active, +.btn-ascribe:hover, +.btn-ascribe-inv { background-color: #444; + color: #fff !important; } -.btn-ascribe-inv:disabled, .btn-ascribe-inv:focus { - color: #444 !important; +.btn-ascribe-inv:disabled, +.btn-ascribe-inv:focus { background-color: #BBB !important; border: 1px solid #444 !important; + color: #444 !important; } .btn-ascribe-sm { @@ -214,24 +244,29 @@ hr { line-height: 1.3em; } -.btn-ascribe-green, .btn-ascribe-green-inv { - border: 1px solid #48DACB; +.btn-ascribe-green, +.btn-ascribe-green-inv { + border: 1px solid #48dacb; + border-radius: 0 !important; + font-family: sans-serif !important; line-height: 2em; margin-left: 0 !important; - font-family: sans-serif !important; - border-radius: 0 !important; } -.btn-ascribe-green, .btn-ascribe-green-inv:active, .btn-ascribe-green-inv:hover { - background-color: #FFF; - border: 1px solid rgba(2, 182, 163, 0.5); +.btn-ascribe-green, +.btn-ascribe-green-inv:active, +.btn-ascribe-green-inv:hover { + background-color: #fff; + border: 1px solid rgba(2, 182, 163, .5); color: rgba(2, 182, 163, 0.5); } -.btn-ascribe-green:active, .btn-ascribe-green:hover, .btn-ascribe-green-inv { - border: 1px solid rgba(2, 182, 163, 0.5); +.btn-ascribe-green:active, +.btn-ascribe-green:hover, +.btn-ascribe-green-inv { + background-color: rgba(2, 182, 163, .5); + border: 1px solid rgba(2, 182, 163, .5); color: white; - background-color: rgba(2, 182, 163, 0.5); } .ascribe-detail-title { @@ -240,33 +275,34 @@ hr { } .ascribe-detail-property { - padding-bottom: 0.4em; + padding-bottom: .4em; } .ascribe-detail-property-label { - font-size: 0.8em; + font-size: .8em; } .ascribe-detail-property-value { - /* white-space: nowrap; - overflow: hidden; */ text-overflow: ellipsis; } -::-webkit-input-placeholder { /* WebKit browsers */ - font-size: 0.9em; +::-webkit-input-placeholder { // WebKit browsers + font-size: .9em; font-style: italic; } -:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ - font-size: 0.9em; + +:-moz-placeholder { // Mozilla Firefox 4 to 18 + font-size: .9em; font-style: italic; } -::-moz-placeholder { /* Mozilla Firefox 19+ */ - font-size: 0.9em; + +::-moz-placeholder { // Mozilla Firefox 19+ + font-size: .9em; font-style: italic; } -:-ms-input-placeholder { /* Internet Explorer 10+ */ - font-size: 0.9em; + +:-ms-input-placeholder { // Internet Explorer 10+ + font-size: .9em; font-style: italic; } @@ -275,15 +311,15 @@ hr { } .input-checkbox-ascribe { - text-align: left; line-height: 1.6; - width: 90%; margin-left: 1.6em; margin-right: auto; + text-align: left; + width: 90%; } -/* columns of same height styles */ -/* http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height */ +// columns of same height styles +// http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height .row-full-height { height: 100%; } @@ -295,9 +331,9 @@ hr { .row-same-height { display: table; - width: 100%; - /* fix overflow */ + // fix overflow table-layout: fixed; + width: 100%; } .col-xs-height { @@ -326,7 +362,7 @@ hr { } } -/* vertical alignment styles */ +// vertical alignment styles .col-top { vertical-align: top; @@ -350,40 +386,44 @@ hr { } .spin { - display:inline-block; - -webkit-animation: spin 1s infinite linear; -moz-animation: spin 1s infinite linear; - -o-animation: spin 1s infinite linear; -ms-animation: spin 1s infinite linear; + -o-animation: spin 1s infinite linear; + -webkit-animation: spin 1s infinite linear; animation: spin 1s infinite linear; - -webkit-transform-origin: 55% 70%; -moz-transform-origin: 55% 70%; -o-transform-origin: 55% 70%; + -webkit-transform-origin: 55% 70%; + display: inline-block; transform-origin: 55% 70%; width: 10px; height: 10px; } @-webkit-keyframes spin { -0% { -webkit-transform: rotate(0deg);} -100% { -webkit-transform: rotate(360deg);} + 0% { -webkit-transform: rotate(0deg);} + 100% { -webkit-transform: rotate(360deg);} } + @-moz-keyframes spin { -0% { -moz-transform: rotate(0deg); } -100% { -moz-transform: rotate(360deg);} + 0% { -moz-transform: rotate(0deg); } + 100% { -moz-transform: rotate(360deg);} } + @-o-keyframes spin { -0% { -o-transform: rotate(0deg);} -100% { -o-transform: rotate(360deg);} + 0% { -o-transform: rotate(0deg);} + 100% { -o-transform: rotate(360deg);} } + @-ms-keyframes spin { -0% { -ms-transform: rotate(0deg);} -100% { -ms-transform: rotate(360deg);} + 0% { -ms-transform: rotate(0deg);} + 100% { -ms-transform: rotate(360deg);} } + @-keyframes spin { -0% { transform: rotate(0deg); } -100% { transform: rotate(360deg);} -} + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg);} +} .btn-default { .glyph-ascribe-spool { @@ -392,9 +432,8 @@ hr { } .fullpage-spinner { - padding-top: 30%; padding-bottom: 30%; - + padding-top: 30%; text-align: center; > span { @@ -404,21 +443,22 @@ hr { .disable-select { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; user-select: none; } .link-ascribe { color: #666; + &:hover { color: #000; } } .ascribe-loading-position { - padding-top: 30%; padding-bottom: 30%; + padding-top: 30%; text-align: center; } diff --git a/sass/offset_right.scss b/sass/offset_right.scss index f844ce20..a90e2078 100644 --- a/sass/offset_right.scss +++ b/sass/offset_right.scss @@ -1,164 +1,214 @@ -/* Taken from: http://stackoverflow.com/a/27501063/1263876 */ +// Taken from: http://stackoverflow.com/a/27501063/1263876 .col-xs-offset-right-12 { - margin-right: 100%; -} -.col-xs-offset-right-11 { - margin-right: 91.66666667%; -} -.col-xs-offset-right-10 { - margin-right: 83.33333333%; -} -.col-xs-offset-right-9 { - margin-right: 75%; -} -.col-xs-offset-right-8 { - margin-right: 66.66666667%; -} -.col-xs-offset-right-7 { - margin-right: 58.33333333%; -} -.col-xs-offset-right-6 { - margin-right: 50%; -} -.col-xs-offset-right-5 { - margin-right: 41.66666667%; -} -.col-xs-offset-right-4 { - margin-right: 33.33333333%; -} -.col-xs-offset-right-3 { - margin-right: 25%; -} -.col-xs-offset-right-2 { - margin-right: 16.66666667%; -} -.col-xs-offset-right-1 { - margin-right: 8.33333333%; -} -.col-xs-offset-right-0 { - margin-right: 0; -} -@media (min-width: 768px) { - .col-sm-offset-right-12 { margin-right: 100%; - } - .col-sm-offset-right-11 { +} + +.col-xs-offset-right-11 { margin-right: 91.66666667%; - } - .col-sm-offset-right-10 { +} + +.col-xs-offset-right-10 { margin-right: 83.33333333%; - } - .col-sm-offset-right-9 { +} + +.col-xs-offset-right-9 { margin-right: 75%; - } - .col-sm-offset-right-8 { +} + +.col-xs-offset-right-8 { margin-right: 66.66666667%; - } - .col-sm-offset-right-7 { +} + +.col-xs-offset-right-7 { margin-right: 58.33333333%; - } - .col-sm-offset-right-6 { +} + +.col-xs-offset-right-6 { margin-right: 50%; - } - .col-sm-offset-right-5 { +} + +.col-xs-offset-right-5 { margin-right: 41.66666667%; - } - .col-sm-offset-right-4 { +} + +.col-xs-offset-right-4 { margin-right: 33.33333333%; - } - .col-sm-offset-right-3 { +} + +.col-xs-offset-right-3 { margin-right: 25%; - } - .col-sm-offset-right-2 { +} + +.col-xs-offset-right-2 { margin-right: 16.66666667%; - } - .col-sm-offset-right-1 { +} + +.col-xs-offset-right-1 { margin-right: 8.33333333%; - } - .col-sm-offset-right-0 { +} + +.col-xs-offset-right-0 { margin-right: 0; - } +} + +@media (min-width: 768px) { + .col-sm-offset-right-12 { + margin-right: 100%; + } + + .col-sm-offset-right-11 { + margin-right: 91.66666667%; + } + + .col-sm-offset-right-10 { + margin-right: 83.33333333%; + } + + .col-sm-offset-right-9 { + margin-right: 75%; + } + + .col-sm-offset-right-8 { + margin-right: 66.66666667%; + } + + .col-sm-offset-right-7 { + margin-right: 58.33333333%; + } + + .col-sm-offset-right-6 { + margin-right: 50%; + } + + .col-sm-offset-right-5 { + margin-right: 41.66666667%; + } + + .col-sm-offset-right-4 { + margin-right: 33.33333333%; + } + + .col-sm-offset-right-3 { + margin-right: 25%; + } + + .col-sm-offset-right-2 { + margin-right: 16.66666667%; + } + + .col-sm-offset-right-1 { + margin-right: 8.33333333%; + } + + .col-sm-offset-right-0 { + margin-right: 0; + } } @media (min-width: 992px) { - .col-md-offset-right-12 { - margin-right: 100%; - } - .col-md-offset-right-11 { - margin-right: 91.66666667%; - } - .col-md-offset-right-10 { - margin-right: 83.33333333%; - } - .col-md-offset-right-9 { - margin-right: 75%; - } - .col-md-offset-right-8 { - margin-right: 66.66666667%; - } - .col-md-offset-right-7 { - margin-right: 58.33333333%; - } - .col-md-offset-right-6 { - margin-right: 50%; - } - .col-md-offset-right-5 { - margin-right: 41.66666667%; - } - .col-md-offset-right-4 { - margin-right: 33.33333333%; - } - .col-md-offset-right-3 { - margin-right: 25%; - } - .col-md-offset-right-2 { - margin-right: 16.66666667%; - } - .col-md-offset-right-1 { - margin-right: 8.33333333%; - } - .col-md-offset-right-0 { - margin-right: 0; - } + .col-md-offset-right-12 { + margin-right: 100%; + } + + .col-md-offset-right-11 { + margin-right: 91.66666667%; + } + + .col-md-offset-right-10 { + margin-right: 83.33333333%; + } + + .col-md-offset-right-9 { + margin-right: 75%; + } + + .col-md-offset-right-8 { + margin-right: 66.66666667%; + } + + .col-md-offset-right-7 { + margin-right: 58.33333333%; + } + + .col-md-offset-right-6 { + margin-right: 50%; + } + + .col-md-offset-right-5 { + margin-right: 41.66666667%; + } + + .col-md-offset-right-4 { + margin-right: 33.33333333%; + } + + .col-md-offset-right-3 { + margin-right: 25%; + } + + .col-md-offset-right-2 { + margin-right: 16.66666667%; + } + + .col-md-offset-right-1 { + margin-right: 8.33333333%; + } + + .col-md-offset-right-0 { + margin-right: 0; + } } + @media (min-width: 1200px) { - .col-lg-offset-right-12 { - margin-right: 100%; - } - .col-lg-offset-right-11 { - margin-right: 91.66666667%; - } - .col-lg-offset-right-10 { - margin-right: 83.33333333%; - } - .col-lg-offset-right-9 { - margin-right: 75%; - } - .col-lg-offset-right-8 { - margin-right: 66.66666667%; - } - .col-lg-offset-right-7 { - margin-right: 58.33333333%; - } - .col-lg-offset-right-6 { - margin-right: 50%; - } - .col-lg-offset-right-5 { - margin-right: 41.66666667%; - } - .col-lg-offset-right-4 { - margin-right: 33.33333333%; - } - .col-lg-offset-right-3 { - margin-right: 25%; - } - .col-lg-offset-right-2 { - margin-right: 16.66666667%; - } - .col-lg-offset-right-1 { - margin-right: 8.33333333%; - } - .col-lg-offset-right-0 { - margin-right: 0; - } -} \ No newline at end of file + .col-lg-offset-right-12 { + margin-right: 100%; + } + + .col-lg-offset-right-11 { + margin-right: 91.66666667%; + } + + .col-lg-offset-right-10 { + margin-right: 83.33333333%; + } + + .col-lg-offset-right-9 { + margin-right: 75%; + } + + .col-lg-offset-right-8 { + margin-right: 66.66666667%; + } + + .col-lg-offset-right-7 { + margin-right: 58.33333333%; + } + + .col-lg-offset-right-6 { + margin-right: 50%; + } + + .col-lg-offset-right-5 { + margin-right: 41.66666667%; + } + + .col-lg-offset-right-4 { + margin-right: 33.33333333%; + } + + .col-lg-offset-right-3 { + margin-right: 25%; + } + + .col-lg-offset-right-2 { + margin-right: 16.66666667%; + } + + .col-lg-offset-right-1 { + margin-right: 8.33333333%; + } + + .col-lg-offset-right-0 { + margin-right: 0; + } +} diff --git a/sass/variables.scss b/sass/variables.scss index 6a3571e2..909440c9 100644 --- a/sass/variables.scss +++ b/sass/variables.scss @@ -51,14 +51,14 @@ $font-family-base: $font-family-sans-serif !default; $font-size-base: 14px !default; $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px -$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px +$font-size-small: ceil(($font-size-base * .85)) !default; // ~12px $font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px $font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px $font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px $font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px $font-size-h5: $font-size-base !default; -$font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px +$font-size-h6: ceil(($font-size-base * .85)) !default; // ~12px //** Unit-less `line-height` for use in components like buttons. $line-height-base: 1.428571429 !default; // 20/14 @@ -234,7 +234,7 @@ $cursor-disabled: not-allowed !default; //** Background for the dropdown menu. $dropdown-bg: #fff !default; //** Dropdown menu `border-color`. -$dropdown-border: rgba(0,0,0,.15) !default; +$dropdown-border: rgba(0, 0, 0, .15) !default; //** Dropdown menu `border-color` **for IE8**. $dropdown-fallback-border: #ccc !default; //** Divider color for between dropdown items. @@ -541,7 +541,7 @@ $popover-bg: #fff !default; //** Popover maximum width $popover-max-width: 276px !default; //** Popover border color -$popover-border-color: rgba(0,0,0,.2) !default; +$popover-border-color: rgba(0, 0, 0, .2) !default; //** Popover fallback border color $popover-fallback-border-color: #ccc !default; @@ -556,7 +556,7 @@ $popover-arrow-color: $popover-bg !default; //** Popover outer arrow width $popover-arrow-outer-width: ($popover-arrow-width + 1) !default; //** Popover outer arrow color -$popover-arrow-outer-color: fade_in($popover-border-color, 0.05) !default; +$popover-arrow-outer-color: fade_in($popover-border-color, .05) !default; //** Popover outer arrow fallback color $popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default; @@ -804,7 +804,7 @@ $breadcrumb-separator: "/" !default; // //## -$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default; +$carousel-text-shadow: 0 1px 2px rgba(0, 0, 0, .6) !default; $carousel-control-color: #fff !default; $carousel-control-width: 15% !default;