diff options
Diffstat (limited to 'web/sass-files/sass')
-rw-r--r-- | web/sass-files/sass/partials/_admin-console.scss | 9 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_base.scss | 44 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_headers.scss | 5 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_modal.scss | 7 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_popover.scss | 53 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_post.scss | 28 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 36 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_search.scss | 47 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_settings.scss | 57 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_signup.scss | 28 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_statistics.scss | 84 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_tutorial.scss | 188 | ||||
-rw-r--r-- | web/sass-files/sass/styles.scss | 2 |
13 files changed, 493 insertions, 95 deletions
diff --git a/web/sass-files/sass/partials/_admin-console.scss b/web/sass-files/sass/partials/_admin-console.scss index 14f1d9c2f..206d5bfca 100644 --- a/web/sass-files/sass/partials/_admin-console.scss +++ b/web/sass-files/sass/partials/_admin-console.scss @@ -2,9 +2,18 @@ > div { height: 100%; } + + h3 { + font-weight: 600; + border-bottom: 1px solid #ddd; + padding-bottom: 0.5em; + margin: 1em 0; + } + .table { background: #fff; } + .sidebar--left { &.sidebar--collapsable { background: #333; diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 6399b8fd8..c286927a2 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -9,34 +9,45 @@ body { position: relative; height: 100%; &.white { - background: #fff; - > .container-fluid { - overflow: auto; - } - .inner__wrap { - > .row.content { - min-height: 100%; - margin-bottom: -89px; + background: #fff; + > .container-fluid { + overflow: auto; + } + .inner__wrap { + > .row.content { + min-height: 100%; + margin-bottom: -89px; + } } - } } - .inner__wrap { +} + +.inner__wrap { height: 100%; > .row.main { - height: 100%; - position: relative; + height: 100%; + position: relative; } - } - > .container-fluid { +} + +.container-fluid { + @include clearfix; + height: 100%; + position: relative; +} + +.channel-view { @include clearfix; height: 100%; position: relative; - } } img { max-width: 100%; height: auto; + &.rounded { + @include border-radius(100%); + } } .popover { @@ -122,6 +133,9 @@ a:focus, a:hover { &.no-resize { resize: none; } + &.min-height { + min-height: 100px; + } } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index 8bf163f90..feb392234 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -1,3 +1,6 @@ +#channel-header { + padding: 3px 0; +} .row { &.header { position: relative; @@ -215,7 +218,7 @@ color: #999; cursor: pointer; .fa { - margin-left: 3px; + margin-left: 4px; font-size: 16px; } } diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 1dcdbf348..9314b4980 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -113,11 +113,10 @@ text-align: center; padding: 2em 1em; .primary-message { - font-size: 1.2em; + font-size: 1.25em; } .secondary-message { - font-size: 1.25em; - color: #888; + @include opacity(0.8); margin: 1em 0 0; } } @@ -377,7 +376,7 @@ @include opacity(0.8); } - .more-description { + .more-purpose { @include opacity(0.7); } diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss index 484e63c7c..430813e63 100644 --- a/web/sass-files/sass/partials/_popover.scss +++ b/web/sass-files/sass/partials/_popover.scss @@ -28,6 +28,39 @@ @include single-transition(opacity, 0.3s, ease-in); font-size: em(13px); + &.autocomplete { + display: block; + .popover-content { + padding: 10px; + position: relative; + } + } + + .search-autocomplete__item { + cursor: pointer; + padding: 6px 8px; + margin: 3px 0; + @include border-radius(2px); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:hover { + background: rgba(black, 0.1); + } + + &.selected { + background: rgba(black, 0.2); + } + + .profile-img { + margin-top: -1px; + height: 16px; + margin-right: 6px; + width: 16px; + } + } + &.bottom > .arrow { top: -18px; border-width: 9px; @@ -61,3 +94,23 @@ @include opacity(1); } } + +#member-list-popover { + max-width: initial; + .popover-content { + position: relative; + padding: 0; + width: 260px; + max-height: 350px; + .text-nowrap { + padding: 6px 10px; + width: 100%; + overflow: hidden; + line-height: 26px; + font-size: 13px; + } + .more-name { + margin-left: 6px; + } + } +} diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index f5fc1631f..e11f9b640 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -397,11 +397,18 @@ body.ios { padding: 0; } p { - margin: 0 0 5px; + margin: 0 0 1em; + line-height: 1.6em; font-size: 0.97em; white-space: pre-wrap; } + span { + p:last-child { + margin-bottom: 0.5em; + } + } + .post-loading-gif { height:10px; width:10px; @@ -434,7 +441,10 @@ body.ios { &.post-profile-img__container { float: left; .post-profile-img { + width: 36px; + height: 36px; margin-right: 10px; + vertical-align: inherit; @include border-radius(50px); } } @@ -466,6 +476,22 @@ body.ios { white-space: nowrap; cursor: pointer; } + .post-body--code { + font-size: .97em; + position:relative; + .post-body--code__language { + position: absolute; + right: 0; + background: #fff; + cursor: default; + padding: 0.3em 0.5em 0.1em; + border-bottom-left-radius: 4px; + @include opacity(.3); + } + code { + white-space: pre; + } + } } .create-reply-form-wrap { width: 100%; diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 2cd5560ef..a49a98952 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -179,6 +179,15 @@ } @media screen and (max-width: 1140px) { + .tip-overlay { + &.tip-overlay--chat { + margin: -10px 0 0 -10px; + .arrow { + right: 15px; + left: auto; + } + } + } .inner__wrap { &.move--left { .file-overlay { @@ -266,6 +275,18 @@ } } @media screen and (max-width: 768px) { + .tip-div { + left: 15px; + right: auto; + } + .tip-overlay { + &.tip-overlay--chat { + margin-left: 10px; + .arrow { + left: 32px; + } + } + } .file-details__container { display: block; .file-details__preview { @@ -379,7 +400,9 @@ } .btn { &.btn-primary { - margin: 8px 0 0 -10px; + display: block; + margin: 10px 0 6px; + width: 100%; float: none; } } @@ -401,7 +424,13 @@ &.minimize-settings { display: block; .section-edit { - text-align: left; + position: absolute; + top: 7px; + right: 0; + width: 50px; + .fa { + display: inline-block; + } } } .no-padding--left { @@ -474,7 +503,6 @@ padding-bottom: 10px; display: table; width: 100%; - table-layout: fixed; .post-body__cell { display: table-cell; padding-left: 45px; @@ -755,7 +783,7 @@ .channel__wrap & { padding-top: 45px; } - .channel-header { + #channel-header { display: none; } } diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss index ce3563885..73b69c866 100644 --- a/web/sass-files/sass/partials/_search.scss +++ b/web/sass-files/sass/partials/_search.scss @@ -1,5 +1,8 @@ +#channel-header .search-bar__container { + padding: 8px 8px 8px 0; +} .search-bar__container { - padding: 8px 8px 8px 0; + padding: 12px 8px 12px 0; } .search__clear { display: none; @@ -108,44 +111,4 @@ .search-highlight { background-color: #FFF2BB; -} - -.search-autocomplete { - background-color: #fff; - border: $border-gray; - line-height: 36px; - overflow-x: hidden; - overflow-y: scroll; - position: absolute; - text-align: left; - width: 100%; - z-index: 100; - @extend %popover-box-shadow; -} - -.search-autocomplete__channel { - cursor: pointer; - height: 36px; - padding: 0px 6px; - - &.selected { - background-color:rgba(51, 51, 51, 0.15); - } -} - -.search-autocomplete__user { - cursor: pointer; - height: 36px; - padding: 0px; - - .profile-img { - height: 32px; - margin-right: 6px; - width: 32px; - @include border-radius(16px); - } - - &.selected { - background-color:rgba(51, 51, 51, 0.15); - } -} +}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index c881f9073..fbbd07485 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -33,6 +33,33 @@ label { font-weight: 600; } + .no-padding--left { + padding-left: 0; + } + .padding-top { + padding-top: 7px; + &.x2 { + padding-top: 14px; + } + &.x3 { + padding-top: 21px; + } + } + .padding-bottom { + padding-bottom: 7px; + &.x2 { + padding-bottom: 14px; + } + &.x3 { + padding-bottom: 21px; + } + .control-label { + font-weight: 600; + &.text-left { + text-align: left; + } + } + } .settings-table { display: table; table-layout: fixed; @@ -44,7 +71,7 @@ .nav { position: fixed; top: 57px; - width: 180px; + width: 179px; } .security-links { margin-right: 20px; @@ -66,6 +93,7 @@ padding: 1em 0; margin-bottom: 0; cursor: pointer; + position: relative; @include clearfix; &:hover { background: #f9f9f9; @@ -170,33 +198,6 @@ .has-error { color: #a94442; } - .no-padding--left { - padding-left: 0; - } - .padding-top { - padding-top: 7px; - &.x2 { - padding-top: 14px; - } - &.x3 { - padding-top: 21px; - } - } - .padding-bottom { - padding-bottom: 7px; - &.x2 { - padding-bottom: 14px; - } - &.x3 { - padding-bottom: 21px; - } - .control-label { - font-weight: 600; - &.text-left { - text-align: left; - } - } - } .file-status { font-size: 13px; diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss index 6d0256142..84f9892f4 100644 --- a/web/sass-files/sass/partials/_signup.scss +++ b/web/sass-files/sass/partials/_signup.scss @@ -313,6 +313,34 @@ } +.signup-team-all { + width: 280px; + box-shadow: 3px 3px 1px #d5d5d5; + margin: 0px 0px 50px 5px; +} + +.signup-team-dir { + background: #fafafa; + border-bottom: 1px solid #d5d5d5; +} + +.signup-team-dir__group { + padding: 15px 10px 15px 10px; +} + +.signup-team-dir__name { + line-height: 1.3 !important; + font-size: 1.5em !important; + font-weight: 300 !important; +} + +.signup-team-dir__arrow { + float: right; + line-height: 1.3 !important; + font-size: 1.5em !important; + font-weight: 300 !important; +} + .authorize-box { margin: 100px auto; width:500px; diff --git a/web/sass-files/sass/partials/_statistics.scss b/web/sass-files/sass/partials/_statistics.scss new file mode 100644 index 000000000..a2401a70f --- /dev/null +++ b/web/sass-files/sass/partials/_statistics.scss @@ -0,0 +1,84 @@ +.team_statistics { + .total-count { + margin: 1em 0; + text-align: center; + background: #fff; + border: 1px solid #ddd; + width: 100%; + @include border-radius(3px); + + .title { + font-weight: 400; + padding: 7px 10px; + border-bottom: 1px solid #ddd; + text-align: left; + + .fa { + float: right; + margin: 3px 0 0; + color: #555; + font-size: 16px; + } + + } + + .content { + font-size: 30px; + font-weight: 600; + color: #555; + padding: 0.3em 0 0.35em; + overflow: auto; + } + + } + + .total-count--day { + width: 760px; + height: 275px; + border: 1px solid #ddd; + padding: 5px 10px 10px 10px; + margin: 10px 10px 10px 10px; + background: #fff; + clear: both; + + > div { + font-size: 18px; + font-weight: 300; + } + } + + .recent-active-users { + + table { + width: 100%; + table-layout: fixed; + } + + .content { + max-height: 400px; + overflow: auto; + padding: 0; + } + + tr { + &:first-child { + td { + border-top: none; + } + } + td { + font-weight: 400; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 13px; + border-left: 1px solid #ddd; + border-top: 1px solid #ddd; + padding: 5px 5px 6px; + @include clearfix; + &:first-child { + border-left: none; + } + } + } + } +}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss new file mode 100644 index 000000000..42183d599 --- /dev/null +++ b/web/sass-files/sass/partials/_tutorial.scss @@ -0,0 +1,188 @@ +.tip-backdrop { + background: rgba(black, 0.5); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 999; +} + +.tip-overlay { + width: 350px; + max-width: 90%; + position:absolute; + background-color: #fff; + @include border-radius(3px); + padding: 20px; + z-index: 1000; + + .arrow { + border-width: 10px; + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + &.tip-overlay--sidebar { + max-width: 75%; + margin: 50px 0 0 10px; + .arrow { + top: 80px; + left: -10px; + margin-top: -10px; + border-left-width: 0; + border-right-color: #fff; + } + } + + &.tip-overlay--header { + margin: 10px 0 0 10px; + .arrow { + top: 15px; + left: -10px; + border-left-width: 0; + border-right-color: #fff; + } + } + + &.tip-overlay--chat { + margin-top: -10px; + .arrow { + left: 50%; + margin-left: -10px; + border-bottom-width: 0; + border-top-color: #fff; + bottom: -10px; + } + } + + h4 { + font-size: em(16px); + font-weight: 600; + margin: 5px 0 15px; + } + + p { + font-size: 13px; + line-height: 1.6; + + strong { + font-weight: 600; + } + + } + + .btn { + background: #cccccc; + color: #fff; + @include border-radius(3px); + border: none; + margin-bottom: 10px; + + &:hover, &:active, &:focus { + color: #fff; + border: none; + background: #bbb; + } + + } + + .tip-opt { + font-size: 12px; + + span { + @include opacity(0.5); + } + + } + + .tutorial__circles { + margin: 1.5em 0px -1.7em -4px; + + .circle { + width: 7px; + height: 7px; + margin: 0 4px; + &.active { + background: #000; + @include opacity(0.4); + } + + } + + } + +} + +.tip-button { + z-index: 998; + right: -10px; + top: -10px; + position: relative; + cursor: pointer; +} + +.tip-div { + position:absolute; + top:0px; + right:0px; + + &.tip-overlay--header { + top: 20px; + } + + &.tip-overlay--sidebar { + left: 0; + top: -9px; + } + +} + +.tutorial-steps__container { + text-align: center; + width: 100%; + display: table; + .tutorial__content { + display: table-cell; + vertical-align: middle; + padding-bottom: 100px; + padding: 0 40px; + .tutorial__steps { + max-width: 310px; + min-height: 420px; + text-align: left; + display: inline-block; + } + } + h1 { + font-size: em(40px); + margin: -20px 0 30px; + font-weight: 600; + } + h3 { + font-size: em(24px); + margin-bottom: 30px; + font-weight: 600; + } +} + +.tutorial__circles { + margin: 2em 0; + .circle { + width: 9px; + height: 9px; + @include border-radius(9px); + @include opacity(0.1); + background: #000; + display: inline-block; + margin: 0 5px; + &.active { + background: $primary-color; + @include opacity(1); + } + } +}
\ No newline at end of file diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss index c614052da..5c83d5c5b 100644 --- a/web/sass-files/sass/styles.scss +++ b/web/sass-files/sass/styles.scss @@ -38,6 +38,8 @@ @import "partials/loading"; @import "partials/get-link"; @import "partials/markdown"; +@import "partials/tutorial"; +@import "partials/statistics"; // Responsive Css @import "partials/responsive"; |