29595 Customize experience callout design

This commit is contained in:
tauriedavis 2017-03-16 15:46:56 -07:00
parent 1cc2d2ecb6
commit e7c9aa6030
3 changed files with 60 additions and 22 deletions

View File

@ -289,8 +289,12 @@ table.u2f-registrations {
margin: 0 auto; margin: 0 auto;
.bordered-box { .bordered-box {
border: 1px solid $border-color; border: 1px solid $blue-300;
border-radius: $border-radius-default; border-radius: $border-radius-default;
background-color: lighten($blue-50, 3%);
position: relative;
display: flex;
justify-content: center;
} }
.landing { .landing {
@ -298,28 +302,59 @@ table.u2f-registrations {
margin-bottom: $gl-padding; margin-bottom: $gl-padding;
.close { .close {
margin-right: 20px; position: absolute;
} right: 20px;
opacity: 1;
.dismiss-icon { .dismiss-icon {
float: right; float: right;
cursor: pointer; cursor: pointer;
color: $cycle-analytics-dismiss-icon-color; color: $blue-300;
}
&:hover {
background-color: transparent;
border: 0;
.dismiss-icon {
color: $blue-400;
}
}
} }
.svg-container { .svg-container {
text-align: center; margin-right: 30px;
display: inline-block;
svg { svg {
width: 136px; height: 110px;
height: 136px; vertical-align: top;
} }
} }
.user-callout-copy {
display: inline-block;
vertical-align: top;
}
} }
@media(max-width: $screen-xs-max) { @media(max-width: $screen-xs-max) {
.inner-content { text-align: center;
padding-left: 30px;
.bordered-box {
display: block;
}
.landing {
.svg-container,
.user-callout-copy {
margin: 0;
display: block;
svg {
height: 75px;
}
}
} }
} }
} }

View File

@ -1,14 +1,13 @@
.user-callout .user-callout
.bordered-box.landing.content-block .bordered-box.landing.content-block
%button.btn.btn-default.close.js-close-callout{ type: 'button', %button.btn.btn-default.close.close-user-callout{ type: 'button',
'aria-label' => 'Dismiss customize experience box' } 'aria-label' => 'Dismiss customize experience box' }
= icon('times', class: 'dismiss-icon', 'aria-hidden' => 'true') = icon('times', class: 'dismiss-icon', 'aria-hidden' => 'true')
.row .svg-container
.col-sm-3.col-xs-12.svg-container = custom_icon('icon_customization')
= custom_icon('icon_customization') .user-callout-copy
.col-sm-8.col-xs-12.inner-content %h4
%h4 Customize your experience
Customize your experience %p
%p Change syntax themes, default project pages, and more in preferences.
Change syntax themes, default project pages, and more in preferences. = link_to 'Check it out', profile_preferences_path, class: 'btn btn-primary user-callout-btn'
= link_to 'Check it out', profile_preferences_path, class: 'btn btn-default js-close-callout'

View File

@ -0,0 +1,4 @@
---
title: 29595 Update callout design
merge_request:
author: