Commit 9b87b2b4 authored by alexpott's avatar alexpott
Browse files

Issue #1921044 by pakmanlh, Manuel Garcia, rteijeiro, dasjo, aboros, sqndr,...

Issue #1921044 by pakmanlh, Manuel Garcia, rteijeiro, dasjo, aboros, sqndr, LewisNyman: Align the styling of tool tips to be more consistent with Seven.
parent 9696e518
/* Artfully masterminded by ZURB */
#joyRideTipContent { display: none; }
/* Default styles for the container */
.joyride-tip-guide {
position: absolute;
background: #000;
background: rgba(0,0,0,0.8);
display: none;
color: #fff;
width: 300px;
z-index: 101;
top: 0; /* keeps the page from scrolling when calculating position */
left: 0;
font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", Helvetica, Arial, Lucida, sans-serif;
font-weight: normal;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.joyride-content-wrapper {
padding: 10px 10px 15px 15px;
}
/* Mobile */
@media only screen and (max-width: 767px) {
.joyride-tip-guide {
width: 95% !important;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
left: 2.5% !important;
}
.joyride-tip-guide-wrapper {
width: 100%;
}
}
/* Add a little css triangle pip, older browser just miss out on the fanciness of it */
.joyride-tip-guide span.joyride-nub {
display: block;
position: absolute;
left: 22px;
width: 0;
height: 0;
border: solid 14px;
border: solid 14px;
}
.joyride-tip-guide span.joyride-nub.top {
/*
IE7/IE8 Don't support rgba so we set the fallback
border color here. However, IE7/IE8 are also buggy
in that the fallback color doesn't work for
border-bottom-color so here we set the border-color
and override the top,left,right colors below.
*/
border-color: #000;
border-color: rgba(0,0,0,0.8);
border-top-color: transparent !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
top: -28px;
bottom: none;
}
.joyride-tip-guide span.joyride-nub.bottom {
/*
IE7/IE8 Don't support rgba so we set the fallback
border color here. However, IE7/IE8 are also buggy
in that the fallback color doesn't work for
border-top-color so here we set the border-color
and override the bottom,left,right colors below.
*/
border-color: #000;
border-color: rgba(0,0,0,0.8) !important;
border-bottom-color: transparent !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
bottom: -28px;
bottom: none;
}
.joyride-tip-guide span.joyride-nub.right {
border-color: #000;
border-color: rgba(0,0,0,0.8) !important;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
top: 22px;
bottom: none;
left: auto;
right: -28px;
}
.joyride-tip-guide span.joyride-nub.left {
border-color: #000;
border-color: rgba(0,0,0,0.8) !important;
border-top-color: transparent !important;
border-left-color: transparent !important;
border-bottom-color: transparent !important;
top: 22px;
left: -28px;
right: auto;
bottom: none;
}
/* Typography */
.joyride-tip-guide h1,.joyride-tip-guide h2,.joyride-tip-guide h3,.joyride-tip-guide h4,.joyride-tip-guide h5,.joyride-tip-guide h6 {
line-height: 1.25;
margin: 0;
font-weight: bold;
color: #fff;
}
.joyride-tip-guide h1 { font-size: 30px; }
.joyride-tip-guide h2 { font-size: 26px; }
.joyride-tip-guide h3 { font-size: 22px; }
.joyride-tip-guide h4 { font-size: 18px; }
.joyride-tip-guide h5 { font-size: 16px; }
.joyride-tip-guide h6 { font-size: 14px; }
.joyride-tip-guide p {
margin: 0 0 18px 0;
font-size: 14px;
line-height: 18px;
}
.joyride-tip-guide a {
color: rgb(255,255,255);
text-decoration: none;
border-bottom: dotted 1px rgba(255,255,255,0.6);
}
.joyride-tip-guide a:hover {
color: rgba(255,255,255,0.8);
border-bottom: none;
}
/* Button Style */
.joyride-tip-guide .joyride-next-tip {
width: auto;
padding: 6px 18px 4px;
font-size: 13px;
text-decoration: none;
color: rgb(255,255,255);
border: solid 1px rgb(0,60,180);
background: rgb(0,99,255);
background: -moz-linear-gradient(top, rgb(0,99,255) 0%, rgb(0,85,214) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,99,255)), color-stop(100%,rgb(0,85,214)));
background: -webkit-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
background: -o-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
background: -ms-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0063ff', endColorstr='#0055d6',GradientType=0 );
background: linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 1px 0px rgba(255,255,255,0.3) inset;
-moz-box-shadow: 0px 1px 0px rgba(255,255,255,0.3) inset;
box-shadow: 0px 1px 0px rgba(255,255,255,0.3) inset;
}
.joyride-next-tip:hover {
color: rgb(255,255,255) !important;
border: solid 1px rgb(0,60,180) !important;
background: rgb(43,128,255);
background: -moz-linear-gradient(top, rgb(43,128,255) 0%, rgb(29,102,211) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(43,128,255)), color-stop(100%,rgb(29,102,211)));
background: -webkit-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
background: -o-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
background: -ms-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b80ff', endColorstr='#1d66d3',GradientType=0 );
background: linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
}
.joyride-timer-indicator-wrap {
width: 50px;
height: 3px;
border: solid 1px rgba(255,255,255,0.1);
position: absolute;
right: 17px;
bottom: 16px;
}
.joyride-timer-indicator {
display: block;
width: 0;
height: inherit;
background: rgba(255,255,255,0.25);
}
.joyride-close-tip {
position: absolute;
right: 10px;
top: 10px;
color: rgba(255,255,255,0.4) !important;
text-decoration: none;
font-family: Verdana, sans-serif;
font-size: 10px;
font-weight: bold;
border-bottom: none !important;
}
.joyride-close-tip:hover {
color: rgba(255,255,255,0.9) !important;
}
.joyride-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: rgb(0,0,0);
background: transparent;
background: rgba(0,0,0, 0.5);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
z-index: 100;
display: none;
top: 0;
left: 0;
cursor: pointer;
}
......@@ -329,9 +329,6 @@ jquery.joyride:
version: v2.0.3
js:
assets/vendor/jquery-joyride/jquery.joyride-2.0.3.js: {}
css:
component:
assets/vendor/jquery-joyride/joyride-2.0.3.css: { media: screen }
dependencies:
- core/jquery
- core/jquery.cookie
......
......@@ -18,29 +18,132 @@
}
.toolbar .tour-toolbar-tab button.active {
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
}
.tour-toolbar-tab button:focus {
outline: thin dotted;
}
/* Joyride tips should always be on top of everything else. */
.joyride-tip-guide {
z-index: 999;
/* @todo Remove once http://drupal.org/node/1916690 is resolved. */
.toolbar .tour-toolbar-tab.toolbar-tab.hidden {
display: none;
}
/* Override placement of the tour progress indicator. */
.tour-progress {
position: absolute;
bottom: 10px;
right: 15px; /* LTR */
/* Equals paddings from .joyride-content-wrapper */
bottom: 0;
right: 0; /* LTR */
}
[dir="rtl"] .tour-progress {
right: 0;
left: 15px;
right: auto;
left: 0;
}
/* @todo Remove once http://drupal.org/node/1916690 is resolved. */
.toolbar .tour-toolbar-tab.toolbar-tab.hidden {
display: none;
}
/* JoyRide Styles. */
#joyRideTipContent {
display: none;
}
/* Default styles for the container */
.joyride-tip-guide {
position: absolute;
display: none;
background: #fff;
width: 300px;
z-index: 101;
top: 0; /* keeps the page from scrolling when calculating position. */
left: 0;
padding: 1em 1em 1.5em 1.5em;
}
.joyride-content-wrapper {
/* Apply padding from parent .joyride-tip-guide to absolutely positioned children. */
position: relative;
padding-right: 1em;
}
/* Mobile */
@media only screen and (max-width: 767px) {
.joyride-tip-guide {
width: 85%;
left: 2.5%;
}
}
/* Add a little css triangle pip, older browser just miss out on the fanciness of it. */
.joyride-tip-guide .joyride-nub {
display: block;
position: absolute;
left: 22px;
width: 0;
height: 0;
}
.joyride-tip-guide .joyride-nub.top {
top: -28px;
bottom: auto;
}
.joyride-tip-guide .joyride-nub.bottom {
bottom: -28px;
}
.joyride-tip-guide .joyride-nub.right {
top: 22px;
bottom: auto;
left: auto;
right: -28px;
}
.joyride-tip-guide .joyride-nub.left {
top: 22px;
left: -28px;
right: auto;
bottom: auto;
}
.joyride-tip-guide p {
margin: 0 0 1.4em;
}
.joyride-timer-indicator-wrap {
width: 50px;
height: 3px;
position: absolute;
right: 17px;
bottom: 16px;
}
.joyride-timer-indicator {
display: block;
width: 0;
height: inherit;
}
.joyride-close-tip {
position: absolute;
right: 0; /* LTR */
top: 0;
}
[dir="rtl"] .joyride-close-tip {
left: 0;
}
.joyride-modal-bg {
position: fixed;
height: 100%;
width: 100%;
z-index: 100;
display: none;
top: 0;
left: 0;
cursor: pointer;
}
......@@ -102,7 +102,11 @@
var that = this;
if ($tour.find('li').length) {
$tour.joyride({
postRideCallback: function () { that.model.set('isActive', false); }
postRideCallback: function () { that.model.set('isActive', false); },
template : { // HTML segments for tip layout
link : '<a href=\"#close\" class=\"joyride-close-tip\">&times;</a>',
button : '<a href=\"#\" class=\"button button--primary joyride-next-tip\"></a>'
}
});
this.model.set({ isActive: true, activeTour: $tour });
}
......
......@@ -291,6 +291,7 @@ public function testRebuildThemeData() {
'style.css' => DRUPAL_ROOT . '/core/themes/seven/style.css',
'css/components/buttons.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/buttons.css',
'css/components/buttons.theme.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/buttons.theme.css',
'css/components/tour.theme.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/tour.theme.css',
),
), $info->info['stylesheets']);
$this->assertEquals(DRUPAL_ROOT . '/core/themes/seven/screenshot.png', $info->info['screenshot']);
......
/**
* @file
* Styles for Tour theme.
*/
/* Default styles for the container */
.joyride-tip-guide {
background: #000;
background: rgba(0,0,0, 0.8);
color: #fff;
border-radius: 5px;
}
/* Mobile */
@media only screen and (max-width: 767px) {
.joyride-tip-guide {
border-radius: 0;
}
}
/* Add a little css triangle pip, older browser just miss out on the fanciness of it. */
.joyride-tip-guide .joyride-nub {
border: solid 14px rgba(0,0,0, 0.8);
}
.joyride-tip-guide .joyride-nub.top {
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
.joyride-tip-guide .joyride-nub.bottom {
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
.joyride-tip-guide .joyride-nub.right {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
.joyride-tip-guide .joyride-nub.left {
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
}
/* Typography */
.joyride-tip-guide h2 {
color: #fff;
}
.joyride-tip-guide p {
line-height: 1.385em;
}
.joyride-tip-guide a {
color: #fff;
}
/* Button Style */
.joyride-tip-guide .joyride-next-tip {
margin: 0;
}
.joyride-timer-indicator-wrap {
border: solid 1px rgba(255,255,255, 0.1);
}
.joyride-timer-indicator {
background: rgba(255,255,255, 0.25);
}
.joyride-close-tip {
color: rgba(255,255,255, 0.4);
text-decoration: none;
font-size: 1.4em;
font-weight: bold;
}
.joyride-close-tip:hover {
color: rgba(255,255,255, 0.9);
text-decoration: none;
}
.joyride-modal-bg {
background: rgba(0,0,0, 0.5);
}
......@@ -10,6 +10,7 @@ stylesheets:
- style.css
- css/components/buttons.css
- css/components/buttons.theme.css
- css/components/tour.theme.css
stylesheets-override:
- vertical-tabs.css
- jquery.ui.theme.css
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment