From 5da5c0bbfb80cb5c9cf2699f42d17decc2d60f5b Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Tue, 1 Aug 2017 11:06:53 -0400 Subject: PLT-6987 User access token UI (#7007) * Add user access token UI * Fix enter press and update mattermost-redux * Updating UI for access token stuff (#7066) * Revert segment key --- webapp/sass/components/_alerts.scss | 1 + webapp/sass/layout/_content.scss | 6 +++ webapp/sass/layout/_forms.scss | 32 ------------ webapp/sass/responsive/_tablet.scss | 6 +++ webapp/sass/routes/_admin-console.scss | 59 ++++++++++++++++----- webapp/sass/routes/_settings.scss | 16 ++++++ webapp/sass/utils/_modifiers.scss | 96 +++++++++++++++++++++++++++++----- 7 files changed, 159 insertions(+), 57 deletions(-) (limited to 'webapp/sass') diff --git a/webapp/sass/components/_alerts.scss b/webapp/sass/components/_alerts.scss index cb4c9c9e1..e0444de39 100644 --- a/webapp/sass/components/_alerts.scss +++ b/webapp/sass/components/_alerts.scss @@ -11,3 +11,4 @@ margin: 1px 0 0 10px; padding: 4px 10px; } + diff --git a/webapp/sass/layout/_content.scss b/webapp/sass/layout/_content.scss index 933f57c32..7bf6c08ad 100644 --- a/webapp/sass/layout/_content.scss +++ b/webapp/sass/layout/_content.scss @@ -87,3 +87,9 @@ .delete-message-text { margin-top: 10px; } + +.col-sm-auto { + padding-left: 15px; + padding-right: 15px; +} + diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss index 143879e2c..a49acf3e3 100644 --- a/webapp/sass/layout/_forms.scss +++ b/webapp/sass/layout/_forms.scss @@ -91,35 +91,3 @@ } } } - -.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; - } - } -} diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index ef4c2e8e5..ef68d5175 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -212,12 +212,14 @@ } } } + .post { .attachment { .attachment__image { &.attachment__image--openraph { max-height: 70px; max-width: 300px; + &.loading { height: 70px; } @@ -229,6 +231,10 @@ // Tablet and desktop @media screen and (min-width: 768px) { + .col-sm-auto { + float: left; + } + .second-bar { display: none; } diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index 4fe45d9b8..2d4ca6be1 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -78,7 +78,7 @@ .log__panel { background-color: white; - border: 1px solid #ddd; + border: $border-gray; height: calc(100vh - 200px); margin-top: 10px; overflow: scroll; @@ -180,7 +180,7 @@ .banner { background: $white; - border: 1px solid #ddd; + border: $border-gray; font-size: .95em; margin: 2em 0; padding: .8em 1.5rem; @@ -535,11 +535,34 @@ .manage-teams { .manage-teams__user { align-items: center; - border-bottom-color: lightgray; - border-bottom-style: solid; - border-bottom-width: 1px; display: flex; - padding-bottom: 15px; + } + + .manage-teams__teams { + border-top: $border-gray; + margin: 1em 0 .3em; + + .btn-link { + &.danger { + color: #c55151; + } + } + } + + .member-row--padded { + padding-left: 20px; + + strong { + margin-right: 10px; + } + } + + .manage-row--inner { + padding: 15px 0 4px; + + & + div { + border-top: $border-gray; + } } .manage-teams__profile-picture { @@ -573,21 +596,31 @@ padding-right: 10px; } + .manage-teams__teams { + margin-top: 1em; + + .manage-row__empty { + padding: 9px 0; + } + } + .manage-teams__team { align-items: center; + border-bottom: $border-gray; display: flex; - padding: 10px; - } + padding: 7px 10px; - .manage-teams__team + .manage-teams__team { - border-top-color: lightgray; - border-top-style: solid; - border-top-width: 1px; + .btn { + font-size: .9em; + } + + .dropdown { + padding: 6px 0; + } } .manage-teams__team-name { flex: 1; - font-weight: bold; overflow: hidden; text-overflow: ellipsis; } diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss index 3c5565194..f33417200 100644 --- a/webapp/sass/routes/_settings.scss +++ b/webapp/sass/routes/_settings.scss @@ -360,6 +360,22 @@ padding: 0; } + .setting-box__item { + &:first-child { + padding-top: 3px; + } + + &:last-child { + hr { + display: none; + } + } + } + + .setting-box__token-id { + margin: 4px 0; + } + .setting-list__hint { margin-top: 20px; } diff --git a/webapp/sass/utils/_modifiers.scss b/webapp/sass/utils/_modifiers.scss index aa89fc107..467b9a086 100644 --- a/webapp/sass/utils/_modifiers.scss +++ b/webapp/sass/utils/_modifiers.scss @@ -1,33 +1,105 @@ @charset 'UTF-8'; -.margin--right { - margin-right: 5px; +.padding-top { + padding-top: 7px; &.x2 { - margin-right: 10px; + 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; + } } } -.margin--left { - margin-left: 5px; +.padding-left { + padding-left: 7px; &.x2 { - margin-left: 10px; + padding-left: 14px; + } + + &.x3 { + padding-left: 21px; } } -.padding--right { - padding-right: 5px; +.padding-right { + padding-right: 7px; &.x2 { - padding-right: 10px; + padding-right: 14px; + } + + &.x3 { + padding-right: 21px; } } -.padding--left { - padding-left: 5px; +.margin-right { + margin-right: 7px; &.x2 { - padding-left: 10px; + margin-right: 14px; + } + + &.x3 { + margin-right: 21px; + } +} + +.margin-left { + margin-left: 7px; + + &.x2 { + margin-left: 14px; + } + + &.x3 { + margin-left: 21px; + } +} + +.margin-top { + margin-top: 7px; + + &.x2 { + margin-top: 14px; + } + + &.x3 { + margin-top: 21px; + } +} + +.margin-bottom { + margin-bottom: 7px; + + &.x2 { + margin-bottom: 14px; + } + + &.x3 { + margin-bottom: 21px; } } -- cgit v1.2.3-1-g7c22