Does webkit-scrollbar work with webkit-transition? - webkit

I want a custom webkit-scrollbar to animate a different background color for the hover state. The code below changes the color on hover but doesn't animate anything. It works on a div so I suspect webkit-scrollbar doesn't play nice with transitions.
::-webkit-scrollbar-thumb {
background-color: #a8a8a8;
-webkit-transition: background-color 1s linear;
}
::-webkit-scrollbar-thumb:hover {
background-color: #f6f6f6;
}

No, it is not implemented. We should file a bug on http://bugs.webkit.org/

You can still apply your transition by setting your -webkit-scrollbar-thumb background-color to inherit and apply transition to parent element - in this case the scrollbar container itself.
The only drawback is that, you have to create an inner container that would mask it's parent color and set scrollbar track background to the same masking color. Here it is an example:
Set container colors and transition
.container {
-webkit-transition: background-color 1s linear;
background-color: #fff;
}
.container:hover {
background-color: #cfcfcf;
}
.container .inner {
background-color: #FFFFFF;
}
Set scrolbar colors
::-webkit-scrollbar-thumb {
background-color: inherit;
}
::-webkit-scrollbar-track {
background: #fff;
}

It is fairly easy to achieve using xb1itz's background-color: inherit; technique in addition with -webkit-background-clip: text;.
Live demo; https://jsfiddle.net/s10f04du/
#media screen and (-webkit-min-device-pixel-ratio:0) {
.container {
overflow-y: scroll;
overflow-x: hidden;
background-color: rgba(0,0,0,0);
-webkit-background-clip: text;
transition: background-color .8s;
}
.container:hover {
background-color: rgba(0,0,0,0.18);
}
.container::-webkit-scrollbar-thumb {
background-color: inherit;
}
}

Related

Adding scroll down button to Shopify custom theme

I am customizing shopify motion theme. I added a scroll down svg on bottom of the slider. But having problem with scrolling down to the next section
I have added the scroll down button with that code;
div.hero__image-wrapper:after {
content: url({{ "icon-scroll-down.svg" | asset_url }}) ;
position: absolute;
display: block;
z-index: 34560;
bottom: 20px;
left: 48%;
font-size: 2em;
border-radius: 1em;
font-weight: bold;
border: 3px solid gray;
padding: 0.1em 0.1em 0;
animation-name: color_change;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes color_change {
0% { color: gray; bottom:20px;}
10% { color: black; bottom:10px;}
20% { color: gray; bottom:20px;}
100%{ color: gray; bottom:20px;}
}
But currently it's only an icon. I need to make it scroll to down
I would do it with JS instead. Let's assume your button is an actual element instead of pseudo ::after:
<div class="scroll-down-button"></div>
.scroll-down-button {
// whatever style you prefer
}
Then the JS code would look like this:
(function() {
// Get the button element
var button = document.querySelector('.scroll-down-button');
// Get current section
var currentSection = button.closest('.shopify-section');
// Get next section (the very next element after current section container)
var nextSection = currentSection.nextSibling();
// Get the coordinates of the next section
var nextSectionCoordinates = nextSection.getBoundingClientRect();
// Get the top Y axis coordinates of next section
var nextSectionTop = nextSectionCoordinates.top;
// Scroll to the top of next section (0 means no scroll on X axis)
window.scrollTo(0, nextSectionTop);
})();
The above is not tested, so let me know if it doesn't work or you can console.log any values. You should get the idea though!

Bootstrap Vue Animate Dropdowns

I am using bootstrap vue and am trying to animate/transition the drop downs. This is proving to be fairly difficult as they do not use v-if or v-show so the transition will not work. Alternatively because the way the components work if you use v-if the drop down trigger will be hidden. I can't find anything online to bootstrap vue specifically on this but I feel this shouldn't be as tough as it has turned out to be. thanks for any help you can give
<div id="app">
<b-navbar type="dark" fixed>
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown text="Tools">
<b-dropdown-item to="/navItem1">Item 1</b-dropdown-item>
<b-dropdown-item to="/export"> Item 2</b-dropdown-item>
</b-nav-item-dropdown>
// This won't work as it hides the main dropdown trigger right form the start
<b-nav-item-dropdown text="Tools" v-if="toggleDropdown">
<b-dropdown-item to="/navItem1">Item 1</b-dropdown-item>
<b-dropdown-item to="/export"> Item 2</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-navbar>
</div>
<script>
export default {
name: 'nav',
data () {
return { toggleDropdown: false }
},
mounted: function () {
// I can listen for events here but I still can't trigger the transition
this.$root.$on('bv::dropdown::show', bvEvent => {
this.toggleDropdown = true
})
this.$root.$on('bv::dropdown::hide', bvEvent => {
this.toggleDropdown = false
})
}
}
</script>
<style lang="scss">
.navbar {
.dropdown-menu {
transform-origin: top;
transition: transform 10s ease-in-out;;
}
}
.dd-slide-enter,
.dd-slide-leave-to { transform: scaleY(0); }
</style>
It's pretty hard to achieve a clean slide-up/down animation because BootstrapVue uses display:none/block to hide/show the dropdown menu. What you can do it's manipulate the max-height of the element as explained here.
I added an 'animated' class to the parent element, for example your b-navbar to select which dropdown has to be animated. Then i removed display: none from the default status of the dropdown and hidden it setting its max-height and padding to 0 and its border to none. When you click the button the dropdown gets the class 'show'so you can give it a max-height different than 0, as explained in the answer i've linked to you, you have to set it higher than the actual height of the dropdown menu otherwise it gets cropped out.
.animated {
.dropdown-menu {
overflow: hidden;
display: block!important;
max-height: 0!important;
&:not(.show) {
padding: 0;
border: none;
}
&.show {
transition: max-height 300ms ease-in-out;
max-height: 500px!important; //this must have to be higher than the max height of the dropdown list
}
}
}
Just came across this same issue.
Ended up following with previous example, but this one works for both up/down transitions and doesn't mess with overflows in case you want to add triangles.
.dropdown-menu {
border: 1px solid #ebeef5;
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.25);
// Slide down transtion
display: block !important;
&:not(.show) {
padding: 0px;
border-width: 0px;
border-color: transparent;
box-shadow: none;
transition: padding 1.3s ease, border-width 1.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
> li {
max-height: 0px;
overflow: hidden;
transition: max-height 0.3s ease;
}
&.show {
> li {
max-height: 100px;
}
}
// Add chevron to top
&[x-placement^="bottom"] {
&::before {
content:"";
position: absolute;
right: 11px;
top: -5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #fff transparent;
z-index: 99999999;
}
}
// Add chevron to bottom
&[x-placement^="top"] {
&::after {
content:"";
position: absolute;
right: 11px;
bottom: -5px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #fff transparent transparent transparent;
z-index: 99999999;
}
}
}

Media query fails for only one property

I am unable to change padding for one element on mobile devices. The queries are working for several properties, but padding will not work (neither will line height if I try to use that). Basic styling in custom css is:
#topright {
font-size: 20px;
letter-spacing: 4px;
color: rgba(255,255,255,1.0);
padding-top: 8px !important;
padding-bottom: 8px !important;
font-weight: 200;
}
Media query for phone is
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
.header-2 .logo {
width: 250px;
}
.footer-widget ul li {
width: 100%;
}
.footer-widget ul {
padding-left: 0;
padding-right: 0;
}
div.vc_column-inner vc_custom_1476556729591 {
padding-left: 0;
padding-right: 0;
}
.footer-widget .textwidget p {
text-align: center;
}
#topright {
padding-top: 1px;
padding-bottom: 1px
}
}
The smaller padding number will not be applied. If I remove !important from main css, then the phone query gets applied to all devices. It's weird because all the other properties for the phone query are working fine.
From this helpful page on media queries, min-width: 320px means:
"If [device width] is greater than or equal to 320px, then do {...}"
In other words, the media query you think you created to target only iPhone will actually be firing for all devices which have a width of 320px or greater. Instead, I think you intended to use max-width
So use this CSS:
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
.header-2 .logo {
width: 250px;
}
...
#topright {
padding-top: 1px;
padding-bottom: 1px
}
}
And you should also remove the !important directives from your main.css file.

How to make owl-carousel with rotating cursor work in bootstrap?

I have been trying to make this owl-carousel by John Higgins (http://jonhiggins.co.uk/words/animated-rotating-cursor-over-carousel/) work with bootstrap.
This theme makes the cursor act like 'prev' and 'next' buttons when hovering the carousel image. But it seem that when I put html into a responsive container of bootstrap it somehow messes with the cursor.
When the browser width is expanded you will notice that the arrow doesn't switch from right to left. Please have a look at the fiddle.
https://jsfiddle.net/ftpptf/c6nw8yzt/
/* BEGIN Cursor*/
.cursor {
display: none;
top: 0;
left: 0;
position: fixed;
z-index: 1000;
width:33px;
height:54px;
margin-top: 60px;
margin-left: 33px;
pointer-events: none;
&.isVisible {
display: block;
}
}
.js--visible {
display: block;
}
.cursor__icon {
width:32px;
height:32px;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw MC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBpZD0ic3ZnIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsa W1pdD0iMTAiIGQ9Ik0yNC4xIDMwTDcuOSAxNiAyNC4xIDIiPjwvcGF0aD48L3N2Zz4=');
background-repeat:no-repeat;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
-o-transition: -o-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
.carousel.offScreen .cursor {
display: none;
}
.carousel.right .cursor__icon {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* END Cursor*/
I have set .cursor .cursor__icon position = absolute which seemed to help but it still acts weird.
I have tried loads of different settings but without any good results!
Any help will be highly appreciated - thanks in advance!
Glad the Codepen example is of use to you.
It looks like the issue is that your carousel's left edge isn't at 0px (far left of the window), it's halfway across the screen. My example didn't account for this scenario as the carousel filled the viewport horizontally.
Hopefully this fiddle resolves that: https://jsfiddle.net/jonjhiggins/z915kbe3/
Changes made were:
CSS: making the carousel and images 100% width instead of 800px (so that it will responsively fill the width of whatever you set it's parent to)
.carousel {
width: 100%;
cursor: none;
}
.carousel img {
width:100%;
}
JS: changing initLayout to account for when the carousel isn't on far left of screen
var _initLayout = function () {
left = $element.offset().left;
right = left + ($element.width() / 2);
};
JS: add resize event to re-calculate the left/right positions when the window is resized or device is rotated
var _initEvents = function () {
$element.on('mousemove', _mousemove)
.on('click', _click);
$(window).on('resize', _initLayout);
};

Image as Back Button in Navigationview

I am trying to override the CSS of a back button in a Sencha Touch 2 Navigation View. Using this CSS
#ext-container-1 .x-button {
background: url(../images/button_zurueck.png) no-repeat;
width: 55px;
height: 55px;
margin-top: 120px;
margin-right: 26px;
border: none;
}
I was able to show the image but the width attribute is overidden by the style attribute set on the button so only a small part of the button is shown. This ist the content of the style attribute left after the button animation:
element.style {
left: 0px !important;
-webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg) scaleX(1) scaleY(1) scaleZ(1) !important;
opacity: 1 !important;
width: 16px !important;
}
How can I override the width of the button?
This is a bug in 2.0.0 and has already been fixed by Sencha for the next release.
More information: http://www.sencha.com/forum/showthread.php?188982
I was able to show the full button by adding right padding. Its dirty but its work. Looking forward for the next release of Sencha Touch.
At the end I got rid of that button totally and inserted my own button which simulates the "back" functionality.
On the card:
config: {
defaultBackButtonText: '',
navigationBar: {
backButton: {
iconCls: 'back',
ui: 'plain'
}
}
}
On the CSS:
//Back
.x-button-icon.back {
background-image: url(../../resources/images/bt_seta.png);
background-repeat: no-repeat;
}