zhongjin
/
cartodb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Montserrat font-face + new entrypoint + refactor to scss

Browse Source
pull/14237/head
Víctor Velarde 6 years ago
parent 462eec5821
commit 6be9c475db
5 changed files with 234 additions and 195 deletions
Show Stats Download Patch File Download Diff File

194
app/views/carto/oauth_provider/consent.html.erb
Unescape View File

@ -1,199 +1,7 @@
<%= content_for(:title) do %>CARTO · OAuth Authentication<% end %>
<%= content_for(:css) do %>
<style type="text/css">
.oauth-page {
display: flex;
min-height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #BABEC0;
}
/* oauth-form */
.oauth-form {
background-color: #FFFFFF;
border: 1px solid #979797;
border-radius: 4px;
width: 380px;
padding: 40px;
}
.oauth-form__header {
display: flex;
flex-direction: column;
text-align: center;
width: 300px;
}
.oauth-form__avatars {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.oauth-form__avatar-image {
width: 48px;
height: 48px;
border-radius: 24px;
margin: 8px;
}
.oauth-form__title {
font-family: 'Montserrat';
font-weight: 600;
font-size: 16px;
color: #2E3C43;
letter-spacing: 0;
line-height: 24px;
}
.oauth-form__subtitle {
font-family: 'Open Sans';
font-size: 12px;
line-height: 16px;
margin-bottom: 8px;
color: #2E3C43;
width: 220px;
margin-left: auto;
margin-right: auto;
}
.oauth-form__subtitle--error {
text-align: left;
width: 300px;
}
.oauth-form__footer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 24px;
}
.oauth-form__powered-by {
font-family: 'Open Sans';
font-size: 10px;
color: #828A8F;
}
.oauth-form__button {
font-family: 'Montserrat';
font-weight: 600;
font-size: 12px;
display: inline-block;
border-radius: 4px;
background-color: #FFFFFF;
border: 2px solid #828A8F;
color: #828A8F;
height: 32px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0px 10px;
margin-left: 14px;
}
.oauth-form__button--primary {
background-color: #1785FB;
border-style: none;
color: #FFFFFF;
}
.oauth-form__button--is-link {
padding: 3px 10px;
text-decoration: none !important;
}
/* oauth-scopes-category */
.oauth-scopes-category {
background-color: #F9F9F9;
border-radius: 4px;
margin-top: 8px;
padding: 8px 16px 8px 16px;
}
.oauth-scopes-category__header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.oauth-scopes-category__title {
font-family: 'Montserrat';
font-weight: 600;
font-size: 12px;
line-height: 16px;
color: #2E3C43;
display: inline;
vertical-align: text-top;
}
.oauth-scopes-category__icon {
width: 18px;
height: 18px;
}
.oauth-scopes-category__list {
font-family: 'Open Sans';
border-top: 1px solid #EEEEEE;
margin-top: 8px;
padding-top: 4px;
font-size: 12px;
list-style-type: none;
max-height: 120px;
overflow-y: auto;
}
.oauth-scopes-category__list--hidden {
display: none;
}
.oauth-scopes-category__scope::before {
content: url("<%= image_path "oauth_provider/enabled_check.svg" %>");
margin-right: 6px;
}
.oauth-scopes-category__scope--disabled {
color: #828A8F;
}
.oauth-scopes-category__scope--disabled::before {
content: url("<%= image_path "oauth_provider/disabled_check.svg" %>");
}
/* oauth-error */
.oauth-error {
font-size: 12px;
color: #2E3C43;
line-height: 16px;
}
.oauth-error__title {
font-family: 'Open Sans';
font-weight: 600;
margin-top: 8px;
}
.oauth-error__list {
font-family: 'Montserrat';
font-weight: 600;
list-style-type: none;
max-height: 120px;
overflow-y: auto;
}
.oauth-error__item {
background-color: #F9F9F9;
border-radius: 4px;
margin-top: 8px;
padding: 16px;
}
/* chevrons */
.chevron::before {
border-style: solid;
border-width: 0.025em 0.025em 0 0;
content: '';
display: inline-block;
height: 10px;
position: relative;
width: 10px;
cursor: pointer;
}
.chevron-up::before {
transform: rotate(-45deg);
}
.chevron-down::before {
transform: rotate(135deg);
top: -5px;
}
</style>
<%= stylesheet_link_tag 'oauth', :media => 'all' %>
<% end %>
<div class='oauth-page'>

226
assets/stylesheets/oauth/oauth.scss
Unescape View File

@ -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);
}

1
config/application.rb
Unescape View File

@ -180,6 +180,7 @@ module CartoDB
mobile_apps.css
api_keys.css
api_keys_new.css
oauth.css
plugins/tipsy.css

2
package.json
Unescape View File

@ -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",

6
webpack/v4/entryPoints.js
Unescape View File

@ -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')
]
};

Write Preview
Loading…
Cancel
Save