diff options
Diffstat (limited to 'web-ui/app/scss')
19 files changed, 146 insertions, 108 deletions
diff --git a/web-ui/app/scss/_alerts.scss b/web-ui/app/scss/_alerts.scss deleted file mode 100644 index cfb31cbe..00000000 --- a/web-ui/app/scss/_alerts.scss +++ /dev/null @@ -1,23 +0,0 @@ -.message-panel { - width: 100%; - margin: 10px auto; - position: fixed; - z-index: 10000; - text-align: center; - span{ - padding: 5px 60px; - &.success { - background: $warning; - color: darken($warning, 50%); - border: 1px solid darken($warning, 10%); - @include box-shadow(1px 1px 3px darken($warning, 60%)); - } - &.error { - font-weight: bold; - color: white; - background: $error; - border: 1px solid darken($error, 10%); - @include box-shadow(1px 1px 3px darken($error, 60%)); - } - } -} diff --git a/web-ui/app/scss/_mascot.scss b/web-ui/app/scss/_mascot.scss deleted file mode 100644 index 74279063..00000000 --- a/web-ui/app/scss/_mascot.scss +++ /dev/null @@ -1,47 +0,0 @@ -#no-message-selected-pane { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - - z-index: -100; - background: $contrast; - padding: 30px; - vertical-align:middle; - text-align:center; - -webkit-transform: translate3d(0, 0, 0); - &:before{ - content: ''; - display: inline-block; - height: 100%; - vertical-align: middle; - margin-right: -0.25em; - } - .scene{ - display:inline-block; - vertical-align:middle; - } - - .text{ - color:$medium_dark_grey; - margin-bottom: 40px; - } -} - -#no-mails-available-pane { - text-align: center; - line-height: 100vh; - margin-top: -130px; - - .scene{ - display:inline-block; - vertical-align:middle; - } - - .text{ - color:$medium_dark_grey; - margin-bottom: 40px; - } - -} diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss index 5bb84105..4583c55d 100644 --- a/web-ui/app/scss/_mixins.scss +++ b/web-ui/app/scss/_mixins.scss @@ -1,4 +1,4 @@ -@import 'colors'; +@import 'base/colors'; // SHARED MIXINS @mixin btn-transition { diff --git a/web-ui/app/scss/_others.scss b/web-ui/app/scss/_others.scss new file mode 100644 index 00000000..e73ed33d --- /dev/null +++ b/web-ui/app/scss/_others.scss @@ -0,0 +1,7 @@ +.no-padding { + padding: 0; +} + +.text-right { + text-align: right; +} diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss index 2c079408..236a7c7c 100644 --- a/web-ui/app/scss/_read.scss +++ b/web-ui/app/scss/_read.scss @@ -66,6 +66,13 @@ .bodyArea { padding: 10px 30px 0 30px; + box-sizing: border-box; + + iframe { + box-sizing: inherit; + border: none; + width: 100%; + } } .attachmentsAreaWrap { diff --git a/web-ui/app/scss/_colors.scss b/web-ui/app/scss/base/_colors.scss index de5f76b3..de5f76b3 100644 --- a/web-ui/app/scss/_colors.scss +++ b/web-ui/app/scss/base/_colors.scss diff --git a/web-ui/app/scss/opensans.scss b/web-ui/app/scss/base/_fonts.scss index ada6a025..ada6a025 100644 --- a/web-ui/app/scss/opensans.scss +++ b/web-ui/app/scss/base/_fonts.scss diff --git a/web-ui/app/scss/base/_scaffolding.scss b/web-ui/app/scss/base/_scaffolding.scss new file mode 100644 index 00000000..b8b5fa3b --- /dev/null +++ b/web-ui/app/scss/base/_scaffolding.scss @@ -0,0 +1,10 @@ +html { + height: 100% ; +} + +body { + min-height: 100% ; + overflow: hidden; + background: $white; +} + diff --git a/web-ui/app/scss/layout/_message-panel.scss b/web-ui/app/scss/layout/_message-panel.scss new file mode 100644 index 00000000..e311a9bf --- /dev/null +++ b/web-ui/app/scss/layout/_message-panel.scss @@ -0,0 +1,9 @@ +message-panel-container { + overflow: hidden; + position: fixed; + top: 0; + width: 100% ; + position: relative; + margin-bottom: 0; +} + diff --git a/web-ui/app/scss/main.scss b/web-ui/app/scss/main.scss deleted file mode 100644 index b582a5d5..00000000 --- a/web-ui/app/scss/main.scss +++ /dev/null @@ -1,37 +0,0 @@ -@import "compass/css3"; -@import "reset"; -@import "foundation"; -@import "colors"; -@import "mixins"; -@import "alerts"; -@import "read"; -@import "reply"; -@import "compose"; -@import "security"; -@import "mascot"; -@import "styles"; - -html { - height:100%; -} -body { - min-height:100%; - overflow: hidden; - background: $white; -} -header#main { - overflow: hidden; - position: fixed; - top: 0; - width: 100%; - position: relative; - margin-bottom: 0; -} - -.no-padding { - padding: 0; -} - -.text-right { - text-align: right; -} diff --git a/web-ui/app/scss/mixins/_position-helpers.scss b/web-ui/app/scss/mixins/_position-helpers.scss new file mode 100644 index 00000000..254bfc6c --- /dev/null +++ b/web-ui/app/scss/mixins/_position-helpers.scss @@ -0,0 +1,9 @@ +@mixin absolute-center-unknown-height-width() { + margin: auto; + position: absolute; + left: 50%; + top: 50%; + -ms-transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} diff --git a/web-ui/app/scss/sandbox.scss b/web-ui/app/scss/sandbox.scss new file mode 100644 index 00000000..3cb4c441 --- /dev/null +++ b/web-ui/app/scss/sandbox.scss @@ -0,0 +1,20 @@ +$search-highlight: #FFEF29; + +body { + font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif; + font-size: 13px; + line-height: 1.2em; + background: white; + color: #333; + padding: 0; + margin: 0; + font-weight: normal; + -webkit-font-smoothing: antialiased; + font-style: normal; + box-sizing: border-box; + word-wrap: break-word; +} + +.search-highlight { + background-color: $search-highlight; +} diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss new file mode 100644 index 00000000..d27b3031 --- /dev/null +++ b/web-ui/app/scss/style.scss @@ -0,0 +1,35 @@ +// vendor stylesheets and resets +@import "vendor/reset"; +@import "compass/css3"; +@import "vendor/foundation"; + +// basic configuration +@import "base/fonts"; +@import "base/colors"; +@import "base/scaffolding"; + +// mixins +@import "mixins/position-helpers"; +@import "mixins"; + +// templates +@import "templates/no-content-placeholder"; + +// layout +@import "layout/message-panel"; + +// views +@import "views/message-panel"; +@import "views/no-message-selected"; +@import "views/no-mails-available"; + +// misc stuff +@import "others"; + +// TODO +@import "compose"; +@import "read"; +@import "reply"; +@import "security"; +@import "styles"; + diff --git a/web-ui/app/scss/templates/_no-content-placeholder.scss b/web-ui/app/scss/templates/_no-content-placeholder.scss new file mode 100644 index 00000000..c6807011 --- /dev/null +++ b/web-ui/app/scss/templates/_no-content-placeholder.scss @@ -0,0 +1,5 @@ +.no-content-placeholder { + @include absolute-center-unknown-height-width; + + color: $medium_dark_grey; +} diff --git a/web-ui/app/scss/foundation.scss b/web-ui/app/scss/vendor/_foundation.scss index 7918cf26..7918cf26 100644 --- a/web-ui/app/scss/foundation.scss +++ b/web-ui/app/scss/vendor/_foundation.scss diff --git a/web-ui/app/scss/reset.scss b/web-ui/app/scss/vendor/_reset.scss index 55f8d054..55f8d054 100644 --- a/web-ui/app/scss/reset.scss +++ b/web-ui/app/scss/vendor/_reset.scss diff --git a/web-ui/app/scss/views/_message-panel.scss b/web-ui/app/scss/views/_message-panel.scss new file mode 100644 index 00000000..4a0a7a6b --- /dev/null +++ b/web-ui/app/scss/views/_message-panel.scss @@ -0,0 +1,26 @@ +.message-panel { + width: 100%; + margin: 10px auto; + position: fixed; + z-index: 10000; + text-align: center; + + &__growl { + padding: 5px 60px; + + &--success { + background: $warning; + color: darken($warning, 50%); + border: 1px solid darken($warning, 10%); + @include box-shadow(1px 1px 3px darken($warning, 60%)); + } + + &--error { + font-weight: bold; + color: white; + background: $error; + border: 1px solid darken($error, 10%); + @include box-shadow(1px 1px 3px darken($error, 60%)); + } + } +} diff --git a/web-ui/app/scss/views/_no-mails-available.scss b/web-ui/app/scss/views/_no-mails-available.scss new file mode 100644 index 00000000..bf5d256a --- /dev/null +++ b/web-ui/app/scss/views/_no-mails-available.scss @@ -0,0 +1,3 @@ +.no-mails-available-pane { + @extend .no-content-placeholder; +} diff --git a/web-ui/app/scss/views/_no-message-selected.scss b/web-ui/app/scss/views/_no-message-selected.scss new file mode 100644 index 00000000..0e367bf2 --- /dev/null +++ b/web-ui/app/scss/views/_no-message-selected.scss @@ -0,0 +1,14 @@ +.no-message-selected-pane { + background: $contrast; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + &__text { + @extend .no-content-placeholder; + + margin-bottom: 40px; // aligns label with "no results for XYZ" + } +} |