From 6be9c475db7e83d405723ec6ce74172d476afbc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Wed, 22 Aug 2018 18:05:59 +0200 Subject: [PATCH] Add Montserrat font-face + new entrypoint + refactor to scss --- .../carto/oauth_provider/consent.html.erb | 194 +-------------- assets/stylesheets/oauth/oauth.scss | 226 ++++++++++++++++++ config/application.rb | 1 + package.json | 2 +- webpack/v4/entryPoints.js | 6 +- 5 files changed, 234 insertions(+), 195 deletions(-) create mode 100644 assets/stylesheets/oauth/oauth.scss diff --git a/app/views/carto/oauth_provider/consent.html.erb b/app/views/carto/oauth_provider/consent.html.erb index c43f0cb784..c91cc4406b 100644 --- a/app/views/carto/oauth_provider/consent.html.erb +++ b/app/views/carto/oauth_provider/consent.html.erb @@ -1,199 +1,7 @@ <%= content_for(:title) do %>CARTO ยท OAuth Authentication<% end %> <%= content_for(:css) do %> - + <%= stylesheet_link_tag 'oauth', :media => 'all' %> <% end %>
diff --git a/assets/stylesheets/oauth/oauth.scss b/assets/stylesheets/oauth/oauth.scss new file mode 100644 index 0000000000..b74df9c64c --- /dev/null +++ b/assets/stylesheets/oauth/oauth.scss @@ -0,0 +1,226 @@ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + src: font-files('Montserrat-Regular.woff'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 600; + src: font-files('Montserrat-Semibold.woff'); +} + +.oauth-page { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100%; + background-color: #BABEC0; +} + +/* oauth-form */ +.oauth-form { + width: 380px; + padding: 40px; + border: 1px solid #979797; + border-radius: 4px; + background-color: #FFF; + + &__header { + display: flex; + flex-direction: column; + width: 300px; + text-align: center; + } + + &__avatars { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + } + + &__avatar-image { + width: 48px; + height: 48px; + margin: 8px; + border-radius: 24px; + } + + &__title { + color: #2E3C43; + font-family: 'Montserrat'; + font-size: 16px; + font-weight: 600; + letter-spacing: 0; + line-height: 24px; + } + + &__subtitle { + width: 220px; + margin-right: auto; + margin-bottom: 8px; + margin-left: auto; + color: #2E3C43; + font-family: 'Open Sans'; + font-size: 12px; + line-height: 16px; + + &--error { + width: 300px; + text-align: left; + } + } + + &__footer { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin-top: 24px; + } + + &__powered-by { + color: #828A8F; + font-family: 'Open Sans'; + font-size: 10px; + } + + &__button { + display: inline-block; + height: 32px; + margin-left: 14px; + padding: 0 10px; + border: 2px solid #828A8F; + border-radius: 4px; + background-color: #FFF; + color: #828A8F; + font-family: 'Montserrat'; + font-size: 12px; + font-weight: 600; + letter-spacing: 1px; + text-align: center; + text-transform: uppercase; + + &--primary { + border-style: none; + background-color: #1785FB; + color: #FFF; + } + + &--is-link { + padding: 3px 10px; + text-decoration: none !important; + } + } +} + +/* oauth-scopes-category */ +.oauth-scopes-category { + margin-top: 8px; + padding: 8px 16px; + border-radius: 4px; + background-color: #F9F9F9; + + &__header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + } + + &__title { + display: inline; + color: #2E3C43; + font-family: 'Montserrat'; + font-size: 12px; + font-weight: 600; + line-height: 16px; + vertical-align: text-top; + } + + &__icon { + width: 18px; + height: 18px; + } + + &__list { + max-height: 120px; + margin-top: 8px; + padding-top: 4px; + overflow-y: auto; + list-style-type: none; + border-top: 1px solid #EEE; + font-family: 'Open Sans'; + font-size: 12px; + + &--hidden { + display: none; + } + } + + &__scope::before { + content: url($assetsDir + "/images/oauth_provider/enabled_check.svg"); + margin-right: 6px; + } + + &__scope--disabled { + color: #828A8F; + + &::before { + content: url($assetsDir + "/images/oauth_provider/disabled_check.svg"); + } + } +} + +/* oauth-error */ +.oauth-error { + color: #2E3C43; + font-size: 12px; + line-height: 16px; + + &__title { + margin-top: 8px; + font-family: 'Open Sans'; + font-weight: 600; + } + + &__list { + max-height: 120px; + overflow-y: auto; + list-style-type: none; + font-family: 'Montserrat'; + font-weight: 600; + } + + &__item { + margin-top: 8px; + padding: 16px; + border-radius: 4px; + background-color: #F9F9F9; + } +} + +/* chevrons */ +.chevron::before { + content: ''; + display: inline-block; + position: relative; + width: 10px; + height: 10px; + border-width: 0.025em 0.025em 0 0; + border-style: solid; + cursor: pointer; +} + +.chevron-up::before { + transform: rotate(-45deg); +} + +.chevron-down::before { + top: -5px; + transform: rotate(135deg); +} diff --git a/config/application.rb b/config/application.rb index 2c8174954e..dbb9f5531b 100644 --- a/config/application.rb +++ b/config/application.rb @@ -180,6 +180,7 @@ module CartoDB mobile_apps.css api_keys.css api_keys_new.css + oauth.css plugins/tipsy.css diff --git a/package.json b/package.json index f80c813a0c..5dd55d4b01 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cartodb-ui", - "version": "1.0.0-assets.4-2", + "version": "1.0.0-assets.4-3", "description": "CARTO UI frontend", "repository": { "type": "git", diff --git a/webpack/v4/entryPoints.js b/webpack/v4/entryPoints.js index df3403a6d7..5ca11f8874 100644 --- a/webpack/v4/entryPoints.js +++ b/webpack/v4/entryPoints.js @@ -159,5 +159,9 @@ module.exports = { dataset: resolve(__dirname, '../../', 'lib/assets/javascripts/builder/dataset.js'), - builder: resolve(__dirname, '../../', 'lib/assets/javascripts/builder/editor.js') + builder: resolve(__dirname, '../../', 'lib/assets/javascripts/builder/editor.js'), + + oauth: [ + rootDir('assets/stylesheets/oauth/oauth.scss') + ] };