29595 Customize experience callout design
This commit is contained in:
parent
1cc2d2ecb6
commit
e7c9aa6030
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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'
|
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: 29595 Update callout design
|
||||||
|
merge_request:
|
||||||
|
author:
|
Loading…
Reference in New Issue