diff options
author | Christopher Speller <crspeller@gmail.com> | 2016-03-15 14:05:05 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-03-15 14:05:05 -0400 |
commit | 3745204097b2f03cd5f3fc1292ea62fb4f931232 (patch) | |
tree | 3380ee0fd2341dac1814aed8cf851bfe274a21a7 /web/sass-files/sass/routes | |
parent | bf7ae0711743926cfbb031675cc3320d7a942465 (diff) | |
parent | 7d79a916dd58d51989d35721060cfca6dce1baca (diff) | |
download | chat-3745204097b2f03cd5f3fc1292ea62fb4f931232.tar.gz chat-3745204097b2f03cd5f3fc1292ea62fb4f931232.tar.bz2 chat-3745204097b2f03cd5f3fc1292ea62fb4f931232.zip |
Merge pull request #2429 from asaadmahmoodspin/ui-improvements
PLT-963 - Improving scss structure
Diffstat (limited to 'web/sass-files/sass/routes')
-rw-r--r-- | web/sass-files/sass/routes/_access-history.scss | 32 | ||||
-rw-r--r-- | web/sass-files/sass/routes/_activity-log.scss | 64 | ||||
-rw-r--r-- | web/sass-files/sass/routes/_admin-console.scss | 343 | ||||
-rw-r--r-- | web/sass-files/sass/routes/_docs.scss | 19 | ||||
-rw-r--r-- | web/sass-files/sass/routes/_error-page.scss | 35 | ||||
-rw-r--r-- | web/sass-files/sass/routes/_loading.scss | 48 | ||||
-rw-r--r-- | web/sass-files/sass/routes/_module.scss | 11 | ||||
-rw-r--r-- | web/sass-files/sass/routes/_print.scss | bin | 0 -> 4392 bytes | |||
-rw-r--r-- | web/sass-files/sass/routes/_settings.scss | 451 | ||||
-rw-r--r-- | web/sass-files/sass/routes/_signup.scss | 440 | ||||
-rw-r--r-- | web/sass-files/sass/routes/_statistics.scss | 85 |
11 files changed, 1528 insertions, 0 deletions
diff --git a/web/sass-files/sass/routes/_access-history.scss b/web/sass-files/sass/routes/_access-history.scss new file mode 100644 index 000000000..7ede7b085 --- /dev/null +++ b/web/sass-files/sass/routes/_access-history.scss @@ -0,0 +1,32 @@ +@charset 'UTF-8'; + +.access-history__table { + display: table; + width: 100%; + padding-top: 15px; + line-height: 1.6; + + &:first-child { + padding: 0; + } + + > div { + display: table-cell; + vertical-align: top; + } + + .access__date { + font-weight: 600; + font-size: 15px; + width: 190px; + } + + .access__report { + border-bottom: 1px solid #ddd; + padding-bottom: 15px; + } + + .report__info { + @include opacity(.8); + } +} diff --git a/web/sass-files/sass/routes/_activity-log.scss b/web/sass-files/sass/routes/_activity-log.scss new file mode 100644 index 000000000..6e8d0a925 --- /dev/null +++ b/web/sass-files/sass/routes/_activity-log.scss @@ -0,0 +1,64 @@ +@charset 'UTF-8'; + +@keyframes highlight { + from { + background: rgba(yellow, .5); + } + to { + background: none; + } +} + +.animation--highlight { + &:before { + content: ''; + animation: highlight 1.5s ease; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +.activity-log__table { + display: table; + width: 100%; + line-height: 1.8; + border-top: 1px solid #ddd; + padding: 15px 0; + + &:first-child { + padding-top: 0; + border: none; + } + + > div { + display: table-cell; + vertical-align: top; + } + + .activity-log__report { + width: 80%; + } + + .activity-log__action { + text-align: right; + } + + .report__platform { + font-size: 15px; + font-weight: 600; + .fa { + margin-right: 6px; + } + } + + .report__info { + @include opacity(.8); + } +} + +.session-help-text { + padding: 0 0 20px; +} diff --git a/web/sass-files/sass/routes/_admin-console.scss b/web/sass-files/sass/routes/_admin-console.scss new file mode 100644 index 000000000..f83ce487e --- /dev/null +++ b/web/sass-files/sass/routes/_admin-console.scss @@ -0,0 +1,343 @@ +@charset 'UTF-8'; + +.admin-controller { + > div { + height: 100%; + } + + .inner-wrap { + position: absolute; + width: 100%; + } + + .row { + margin: 0; + } + + h3 { + font-weight: 600; + border-bottom: 1px solid #ddd; + padding-bottom: .5em; + margin: 1em 0; + } + + .table { + background: #fff; + } + + .form-control { + background-color: #fff; + border: 1px solid #ccc; + color: #555; + + &:focus { + border-color: #66afe9; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); + } + } + + .btn { + color: #333; + + &.btn-primary { + background: #2389d7; + + &:hover, + &:focus, + &:active { + background: #1c6dab; + } + } + } + + .dropdown-menu { + background: #fff; + border: 1px solid rgba(0,0,0,.15); + color: inherit; + } + + .sidebar--left { + &.sidebar--collapsable { + background: #333; + + .team__header { + background: transparent; + margin-bottom: 5px; + } + + .nav { + li { + padding: 0; + @include opacity(1); + + .icon { + width: 17px; + } + + > a { + &:hover, + &.active, + &:focus { + background-color: #eaeaea; + } + } + + > h4 { + background: #333; + padding: 10px 10px; + margin: 1px 0 0; + + .menu-icon--right { + top: 6px; + right: 12px; + } + } + } + + .menu-icon--right { + position: absolute; + right: 10px; + top: 3px; + font-size: 18px; + font-weight: 600; + width: 20px; + height: 20px; + line-height: 20px; + text-align: center; + + .fa { + font-size: 13px; + right: -2px; + position: relative; + color: #fff; + } + } + + &.nav__sub-menu { + background: #111; + -webkit-font-smoothing: auto; + + &.padded { + padding: 5px 0; + } + + li { + > a { + font-size: 13px; + padding: 5px 35px 5px 15px; + background: transparent; + color: #bbb; + + &:hover { + color: lighten($color--primary, 10); + } + + &.active { + color: #fff; + font-weight: 600; + } + } + + .nav-more { + font-size: 13px; + padding: 5px 15px; + background: transparent; + color: #bbb; + display: block; + cursor: pointer; + &:hover { + color: lighten($color--primary, 10); + } + } + } + } + + &.nav__inner-menu { + li { + > a { + padding-left: 20px; + } + } + } + } + } + } + + .log__panel { + overflow: scroll; + width: 100%; + height: 800px; + border: 1px solid #ddd; + margin-top: 10px; + padding: 5px; + background-color: white; + } + + .app__content { + color: #333; + + &.admin { + overflow: auto; + background-color: #f1f1f1; + padding: 0 20px 20px; + min-height: 600px; + } + + .wrapper--fixed { + max-width: 800px; + } + + .form-horizontal { + margin-top: 40px; + + .control-label { + text-align: left; + padding-right: 0; + font-weight: 600; + } + + .form-group { + margin-bottom: 25px; + } + + .file__upload { + position: relative; + margin: 0 10px 10px 0; + display: inline-block; + + input { + position: absolute; + @include opacity(0); + width: 100%; + height: 100%; + z-index: 5; + top: 0; + left: 0; + } + } + + .help-text { + &.no-margin { + margin: 0; + } + + ul, + ol { + padding-left: 23px; + } + + margin: 10px 0 0 15px; + color: #777; + + .help-link { + margin-right: 5px; + } + + .btn { + font-size: 13px; + } + } + + .alert { + display: inline-block; + padding: 5px 7px; + margin: 1em 0 0; + top: 1px; + position: relative; + + .fa { + margin-right: 5px; + } + } + } + + .banner { + background: #fff; + border: 1px solid #ddd; + padding: .7em 1.5em; + font-size: .95em; + margin: 2em 0; + + .banner__heading { + font-size: 1.5em; + } + + .banner__content { + width: 80%; + } + + &.warning { + background: #e60000; + } + } + + .popover { + border-radius: 3px; + width: 100%; + font-size: .95em; + } + + .panel { + border: none; + background-color: transparent; + } + + .panel-default { + > .panel-heading { + padding: 10px 0; + background-color: transparent; + } + + .panel-body { + padding: 30px 0 10px; + } + } + + .panel-group { + margin-bottom: 50px; + } + + .panel-title { + font-size: 24px; + line-height: 1.5; + + a { + text-decoration: none; + display: block; + @include clearfix; + + &.collapsed { + .fa-minus { + display: none; + } + + .fa-plus { + display: inline-block; + } + } + + .fa { + font-size: 18px; + float: right; + margin-top: 8px; + color: #aaa; + } + + .fa-plus { + display: none; + } + } + } + } + + .member-list-holder { + .member-role, + .member-drop { + position: absolute; + right: 15px; + top: 8px; + } + } +} diff --git a/web/sass-files/sass/routes/_docs.scss b/web/sass-files/sass/routes/_docs.scss new file mode 100644 index 000000000..24e96772b --- /dev/null +++ b/web/sass-files/sass/routes/_docs.scss @@ -0,0 +1,19 @@ +@charset 'UTF-8'; + +.docs__page { + line-height: 1.7; + padding-bottom: 20px; + + > div { + width: 1170px; + margin: 0 auto; + padding: 0 15px; + max-width: 100%; + } + + h1.markdown__heading { + border-bottom: 1px solid #ddd; + padding-bottom: 1rem; + margin: 1em 0 1em; + } +} diff --git a/web/sass-files/sass/routes/_error-page.scss b/web/sass-files/sass/routes/_error-page.scss new file mode 100644 index 000000000..8cd0716ca --- /dev/null +++ b/web/sass-files/sass/routes/_error-page.scss @@ -0,0 +1,35 @@ +@charset 'UTF-8'; + +body { + &.error { + .container-fluid { + display: table; + height: 90%; + } + + .error__container { + max-width: 800px; + margin: 0 auto; + display: table-cell; + vertical-align: top; + padding: 5em 0; + text-align: left; + color: #555; + } + + .error__icon { + font-size: 4em; + color: #ccc; + } + + h2 { + font-weight: 600; + font-size: 1.5em; + margin: .8em 0 .5em; + } + + p { + font-size: 1.2em; + } + } +} diff --git a/web/sass-files/sass/routes/_loading.scss b/web/sass-files/sass/routes/_loading.scss new file mode 100644 index 000000000..5e4e7359a --- /dev/null +++ b/web/sass-files/sass/routes/_loading.scss @@ -0,0 +1,48 @@ +@charset 'UTF-8'; + +.loading-screen { + display: table; + width: 100%; + height: 100%; + padding: 60px; + text-align: center; + + .loading__content { + display: table-cell; + vertical-align: middle; + font-size: 0; + + h3 { + font-size: 16px; + font-weight: 400; + margin: 0 .2em 0; + display: inline-block; + } + + .round { + background-color: #444; + width: 4px; + height: 4px; + display: inline-block; + margin: 0 2px; + opacity: .1; + @include border-radius(10px); + @include animation(move .75s infinite linear); + } + + @for $i from 1 through 3 { + .round-#{$i} { + @include animation-delay(.2s*$i); + } + } + + @include keyframes(move) { + from { + opacity: 1; + } + to { + opacity: .1; + } + } + } +} diff --git a/web/sass-files/sass/routes/_module.scss b/web/sass-files/sass/routes/_module.scss new file mode 100644 index 000000000..48c1af1d9 --- /dev/null +++ b/web/sass-files/sass/routes/_module.scss @@ -0,0 +1,11 @@ +// Only for combining all the files in this folder +@import 'access-history'; +@import 'activity-log'; +@import 'admin-console'; +@import 'docs'; +@import 'error-page'; +@import 'loading'; +@import 'print'; +@import 'settings'; +@import 'signup'; +@import 'statistics'; diff --git a/web/sass-files/sass/routes/_print.scss b/web/sass-files/sass/routes/_print.scss Binary files differnew file mode 100644 index 000000000..1c2ef9c0f --- /dev/null +++ b/web/sass-files/sass/routes/_print.scss diff --git a/web/sass-files/sass/routes/_settings.scss b/web/sass-files/sass/routes/_settings.scss new file mode 100644 index 000000000..3c735be3c --- /dev/null +++ b/web/sass-files/sass/routes/_settings.scss @@ -0,0 +1,451 @@ +@charset 'UTF-8'; + +.user-settings { + min-height: 300px; + .table-responsive { + max-width: 560px; + max-height: 300px; + } +} + +.modal { + .settings-modal { + width: 800px; + .modal-back { + width: 50px; + height: 40px; + top: 12px; + font-size: 27px; + font-weight: normal; + line-height: 32px; + position: absolute; + left: 0; + text-align: center; + .fa { + line-height: inherit; + position: absolute; + width: 100%; + height: 100%; + left: 0; + } + } + .modal-body { + padding: 0; + margin: 0 auto; + min-height: calc(100% - 62px); + } + li { + list-style: none; + } + 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; + } + } + } + .profile-img { + width: 128px; + height: 128px; + } + .settings-table { + max-width: 1000px; + margin: 0 auto; + display: table; + table-layout: fixed; + width: 100%; + > div { + display: table-cell; + vertical-align: top; + } + .nav { + position: fixed; + width: 179px; + &.position--top { + top: 57px; + } + } + .security-links { + margin-right: 20px; + .fa { + margin-right: 6px; + } + } + .settings-links { + width: 180px; + } + .settings-content { + padding: 0px 20px 30px; + .modal-header { + display: none; + } + .section-min { + padding: 1em 0; + margin-bottom: 0; + cursor: pointer; + position: relative; + @include clearfix; + &:hover { + background: #f9f9f9; + } + &:hover .fa { + display: inline-block; + } + &:hover .section-edit { + text-decoration: underline; + } + } + + .section-max { + background: rgba(black, .05); + padding: 1em 0 1.3em; + margin-bottom: 0; + @include clearfix; + .section-title { + margin-bottom: 10px; + } + } + + .appearance-section { + .theme-group { + .input-group-addon { + padding: 4px 5px; + width: 40px; + } + img { + border: 1px solid rgba(black, .15); + width: 29px; + } + } + .group--code { + select { + padding-right: 25px; + } + select::-ms-expand { + display: none; + } + &:before { + pointer-events: none; + position: absolute; + top: 11px; + right: 50px; + z-index: 5; + content: '\f0d7'; + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + select { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + } + } + .premade-themes { + margin-bottom: 10px; + .theme-label { + font-weight: 400; + margin-top: 5px; + } + img { + border: 3px solid transparent; + } + .active { + img { + border-color: $color--primary; + } + } + } + + .theme-elements { + padding-left: 15px; + + .element { + margin-right: 10px; + + &:nth-child(2n) { + margin-right: 0; + } + } + } + + .theme-elements__header { + margin: 10px 20px 0px 0; + border-bottom: 1px solid #ccc; + padding: 5px 0 10px; + font-size: em(13.5px); + font-weight: 600; + cursor: pointer; + + .fa-minus { + display: none; + } + + &.open { + .fa-minus { + display: inline-block; + } + .fa-plus { + display: none; + } + } + + .header__icon { + float: right; + @include opacity(.5); + } + } + + .theme-elements__body { + padding-top: 5px; + display: none; + @include legacy-pie-clearfix; + background: rgba(255, 255, 255, .05); + padding: 20px 0 0 20px; + margin: 0 20px 0 0; + @include border-radius(0 0 3px 3px); + } + + .custom-label { + white-space: nowrap; + font-weight: normal; + font-size: 12px; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 0; + } + .input-group-addon { + background: transparent; + } + .radio { + label { + font-weight: 600; + } + } + } + + .section-title { + margin-bottom: 5px; + font-weight: 600; + padding-right: 50px; + } + + .section-edit { + text-align: right; + margin-bottom: 5px; + .fa { + margin-right: 5px; + font-size: 12px; + @include opacity(.5); + display: none; + &.fa-chevron-down { + top: -1px; + margin-right: 0; + position: relative; + } + } + } + + .section-describe { + @include opacity(.7); + white-space: pre; + @include clearfix; + text-overflow: ellipsis; + } + + .divider-dark { + border-bottom: 1px solid #aaa; + } + + .divider-light { + border-bottom: 1px solid lightgrey; + } + + .setting-list { + padding: 0; + list-style-type: none; + } + + .setting-list__hint { + margin-top: 20px; + } + + .mentions-input { + margin-top: 10px; + } + + .setting-list-item { + margin-top: 7px; + } + .has-error { + color: #a94442; + } + + .file-status { + font-size: 13px; + margin-top: 8px; + color: #555; + } + + .confirm-import { + padding: 4px 10px; + margin: 10px 0; + } + } + } + } + .nav-pills { + > li { + margin: 0; + a { + padding: 8px 5px 8px 15px; + border-radius: 0; + color: #777; + } + .glyphicon { + width: 25px; + top: 2px; + } + &:hover { + a { + background-color: rgba(black, .1); + } + } + &.active { + a { + color: #111; + background-color: #e1e1e1; + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 5px; + height: 100%; + background: #000; + } + } + a, + a:hover, + a:focus { + background-color: rgba(black, .1); + border-radius: 0; + font-weight: 400; + position: relative; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + } + h3 { + font-size: em(20px); + } +} + +.channel-settings { + padding: 0 10px; +} + +.tab-header { + margin-bottom: 1em; +} + +.setting-name { + color: grey; + font-weight: 500; +} + +.sel-btn { + margin-right: 5px; +} + +.member-div { + border-bottom: 1px solid lightgrey; + position: relative; + padding: 2px; + margin: 0; + width: 100%; + &:first-child { + border-top: 1px solid lightgrey; + } + .post-profile-img { + @include border-radius(50px); + margin-right: 8px; + } +} + +.member-role, +.member-drop { + .fa { + margin-right: 5px; + @include opacity(.5); + font-size: 12px; + } + + .member-menu { + top: -50%; + right: 110%; + } +} + +.member-invite { + position: absolute; + right: 10px; + top: 7px; +} + +.member-menu { + right: 0px; + left: auto; +} + +.member-list { + width: 100%; + overflow-x: visible; +} + +.member-page { + padding-top: 50px; +} + +.active-border { + border: 1px solid red; +} + +.color-btn { + margin: 4px; +} + +.no-resize { + resize: none; +} diff --git a/web/sass-files/sass/routes/_signup.scss b/web/sass-files/sass/routes/_signup.scss new file mode 100644 index 000000000..53c59c222 --- /dev/null +++ b/web/sass-files/sass/routes/_signup.scss @@ -0,0 +1,440 @@ +@charset 'UTF-8'; + +.signup-header { + width: 100%; + line-height: 33px; + padding: 0 1em .2em; + background: $bg--gray; + + .fa { + margin-right: 5px; + } +} +.signup-team__container { + padding: 100px 0px 50px 0px; + max-width: 380px; + margin: 0 auto; + position: relative; + + &.padding--less { + padding-top: 50px; + } + + .form-control:focus { + @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)); + } + + h1, + h2, + h3, + h4, + h5, + h6, + p { + line-height: 1.3; + } + + h1 { + font-weight: 600; + } + + h2 { + font-weight: 600; + margin-bottom: .8em; + letter-spacing: -.5px; + font-size: em(30px); + } + + h3 { + font-weight: 600; + margin: 0 0 1.3em 0; + font-size: 1.5em; + } + + h4 { + font-size: em(20px); + font-weight: 600; + margin-bottom: 1em; + } + + h5 { + font-size: em(16px); + } + + hr { + margin: 2em 0; + } + + p { + color: #555; + line-height: 1.5; + margin-bottom: 1em; + } + + .input-group { + &.input-group--limit { + table-layout: fixed; + width: 100%; + + .tooltip-inner { + word-wrap: break-word; + } + + .form-control { + text-align: left; + display: table-cell; + width: 100%; + } + + .input-group-addon { + text-align: left; + width: 50%; + display: table-cell; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + + .inner__content { + padding: 0 1rem; + margin: 30px 0 20px; + } + + .block--gray { + background: #f2f2f2; + display: inline-block; + padding: .85em 1.2em; + font-weight: 600; + @include border-radius(3px); + } + + form { + margin-bottom: .8em; + } + + .signup-team-confirm__container { + padding: 100px 0px 100px 0px; + } + + .signup-team-logo { + display: none; + width: 210px; + margin: 0 0 2em 0; + } + + .signup-team-login { + padding-bottom: 10px; + font-weight: 600; + } + + .signup-team__name { + margin: .5em 0 0; + font-size: 2.2em; + font-weight: 600; + padding-left: 1rem; + } + + .signup-team__subdomain { + margin: .2em 0 1.2em; + font-size: 1.5em; + padding-left: 1rem; + font-weight: 300; + text-transform: uppercase; + } + + .form-control { + height: em(38px); + } + + .or__container { + height: 1px; + background: #ddd; + text-align: left; + margin: 2em 0; + + span { + width: 40px; + top: -10px; + position: relative; + font-size: 1.14286em; + line-height: 20px; + font-weight: 600; + background: #fff; + display: inline-block; + text-align: center; + } + } + + ul { + margin-bottom: 0; + padding-left: 18px; + } + + .signup__email-container { + margin-left: 1rem; + } + + .btn { + font-size: 1em; + padding: em(7px) em(15px); + font-weight: 600; + margin-right: 5px; + + .fa { + font-size: 17px; + margin-right: 8px; + } + + .icon { + width: 18px; + height: 18px; + margin-right: 8px; + @include background-size(100% 100%); + display: inline-block; + } + + &.btn-custom-login { + display: block; + min-width: 200px; + width: 200px; + padding: 0 1em; + margin: 1em 1rem; + height: 40px; + line-height: 34px; + color: #fff; + @include border-radius(2px); + + &.gitlab { + background: #548; + + &:hover { + background: darken(#548, 10%); + } + + span { + vertical-align: middle; + } + + .icon { + background-image: url('../images/gitlabLogo.png'); + } + } + + &.google { + background: #dd4b39; + + &:hover { + background: darken(#dd4b39, 10%); + } + + span { + vertical-align: middle; + } + + .icon { + background-image: url('../images/googleLogo.png'); + } + } + + &.ldap { + background: #dd4b39; + + &:hover { + background: darken(#dd4b39, 10%); + } + + span { + vertical-align: middle; + } + } + + &.email { + background: #2389d7; + + &:hover { + background: darken(#2389d7, 10%); + } + + span { + vertical-align: middle; + } + } + + &.btn-full { + width: 100%; + text-align: left; + padding-left: 35px; + } + } + + &.btn-default { + color: #444; + } + + .glyphicon { + &.glyphicon-ok, + &.glyphicon-refresh { + margin-right: .5em; + left: -2px; + font-size: .9em; + } + + &.glyphicon-chevron-right { + font-size: .8em; + right: -2px; + top: 0px; + } + + &.glyphicon-chevron-left { + font-size: .8em; + left: -2px; + top: 0px; + } + } + } + + .has-error { + .control-label { + background: #f2f2f2; + padding: .7em 1em; + @include border-radius(3px); + margin: 1em 0 0; + font-size: 14px; + font-weight: normal; + color: #999; + width: 100%; + + &:before { + @extend .fa; + content: '\f071'; + margin-right: 4px; + color: #aaa; + } + } + } + + .reset-form { + @include border-radius(3px); + position: relative; + font-size: .95em; + p { + color: inherit; + } + } + + // Modifier Styles + h1, + h2, + h3, + h4, + h5, + h6 { + &.margin--top-none { + margin-top: 0; + } + + &.margin--bottom-none { + margin-bottom: 0; + } + + &.margin--less { + margin-bottom: .3em; + } + + &.sub-heading { + font-weight: 400; + margin-bottom: 0; + } + + &.color--light { + font-weight: 300; + } + } + + p { + &.margin--extra { + margin-bottom: 1.5em; + } + + &.margin--less { + margin-bottom: .3em; + } + + .black, + &.black { + color: #000; + } + } + + .color--light { + color: #777; + } + + .margin--extra { + margin-top: 3em; + } + + .margin--extra-2x { + margin-top: 6em; + } +} + +.signup-team-all { + margin: 0 0 20px; + border: 1px solid #ddd; + @include border-radius(2px); + .signup-team-dir { + background: #fafafa; + border-top: 1px solid #d5d5d5; + + &:first-child { + border: none; + } + + a { + color: inherit; + display: block; + padding: 0 15px; + line-height: 3.5em; + height: 3.5em; + font-size: 1.1em; + } + } + + .signup-team-dir__name { + white-space: nowrap; + float: left; + overflow: hidden; + text-overflow: ellipsis; + width: 90%; + } + + .signup-team-dir__arrow { + float: right; + font-size: .9em; + color: #999; + line-height: 3.5em; + } +} + + +.authorize-box { + margin: 100px auto; + width: 500px; + height: 280px; + border: 1px solid black; +} + +.authorize-inner { + padding: 20px; +} + +.authorize-btn { + margin-right: 6px; +} + +.verify_panel { + margin: 60px auto auto auto; + max-width: 380px; +} diff --git a/web/sass-files/sass/routes/_statistics.scss b/web/sass-files/sass/routes/_statistics.scss new file mode 100644 index 000000000..b48c137c3 --- /dev/null +++ b/web/sass-files/sass/routes/_statistics.scss @@ -0,0 +1,85 @@ +@charset 'UTF-8'; + +.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; + font-size: 13px; + + .fa { + float: right; + margin: 0px 0 0; + color: #555; + font-size: 16px; + } + } + + .content { + font-size: 30px; + font-weight: 600; + color: #555; + padding: .3em 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; + } + } + } + } +} |