enter image description here
CSS code(below):
.navigation-list a:before , .navigation-list a:after {
position:inherit;
top:inherit ;
width:fit-content;
height: fit-content;
border: 4px solid #ABC9FF;
transform: translateX(-50%) translateY(-50%) scale(0.8);
border-radius: 45%;
background: transparent;
content: "";
opacity: 0;
transition: all 0.4s;
z-index: -1;
}
.navigation-list a:after {
border-width: 2px;
transition: all 0.5s;
}
.navigation-list a:hover:before {
opacity: 1;
transform:translateX(-50%) translateY(-50%) scale(1);
}
.navigation-list a:hover:after {
opacity: 1;
transform:translateX(-50%) translateY(-50%) scale(1.3);
}
Summarized, my animation consists of two circles to the sides, 2hich is not what I expected. Would anyone know what is missing or what can I change to have a Circle appearing in the back as the mouse hovers any anchor element in the navbar.
Related
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;
}
}
}
I am using the attached CSS and code and the height of my <li> are getting screwed up. It's too short when using bootstrap 4, but it works in 3.3.7. What is the issue when working with 4"?
Does Bootstrap 4 have a good way of doing this? What's the best way to accomplish this?
There is another questions here:
Custom bootstrap 4 breadcrumbs arrow effect
Without an answer.
I have found multiple examples in Bootstrap 3, not but 4. Any examples would be appreciated.
Example 1:
https://bootsnipp.com/snippets/44am
Example 2:
Version 3.3.7
https://jsfiddle.net/vjstg2zc/1/
Version 4
https://jsfiddle.net/cpLd4u5e/
HTML
<ul class="nav nav-pills nav-wizard">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
CSS
.nav-pills.nav-wizard > li {
position: relative;
overflow: visible;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
}
.nav-pills.nav-wizard > li + li {
margin-left: 0;
}
.nav-pills.nav-wizard > li:first-child {
border-left: 0;
}
.nav-pills.nav-wizard > li:first-child a {
border-radius: 5px 0 0 5px;
}
.nav-pills.nav-wizard > li:last-child {
border-right: 0;
}
.nav-pills.nav-wizard > li:last-child a {
border-radius: 0 5px 5px 0;
}
.nav-pills.nav-wizard > li a {
border-radius: 0;
background-color: #eee;
}
.nav-pills.nav-wizard > li:not(:last-child) a:after {
position: absolute;
content: "";
top: 0px;
right: -20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent transparent transparent #eee;
z-index: 150;
}
.nav-pills.nav-wizard > li:not(:first-child) a:before {
position: absolute;
content: "";
top: 0px;
left: -20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: #eee #eee #eee transparent;
z-index: 150;
}
.nav-pills.nav-wizard > li:hover:not(:last-child) a:after {
border-color: transparent transparent transparent #aaa;
}
.nav-pills.nav-wizard > li:hover:not(:first-child) a:before {
border-color: #aaa #aaa #aaa transparent;
}
.nav-pills.nav-wizard > li:hover a {
background-color: #aaa;
color: #fff;
}
.nav-pills.nav-wizard > li.active:not(:last-child) a:after {
border-color: transparent transparent transparent #428bca;
}
.nav-pills.nav-wizard > li.active:not(:first-child) a:before {
border-color: #428bca #428bca #428bca transparent;
}
.nav-pills.nav-wizard > li.active a {
background-color: #428bca;
}
From bootstrap3 to bootstrap4, beside its primary CSS unit has been changed from px to rem, the navs component has been completely rewritten using flexbox with simpler structure.
In bootstrap3, it has default style for the navs:
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
In fact, if you add position: relative; and display: block; in your bootstrap4 sample, it kind of worked too: https://jsfiddle.net/davidliang2008/ka83uLq6/4/:
.nav-pills.nav-wizard > li a {
display: block;
padding: 10px 15px;
position: relative;
...
}
In bootstrap4, nav-link class is added for similar purpose, and you don't have to build the navs using list. The reason why you saw in bootstrap4 that the height was not right simply because there is no nested structure like .nav > li > a anymore.
Since you've asked the best way to do it in bootstrap4, let me see if I can craft out what you have in bootstrap4.
https://jsfiddle.net/davidliang2008/5xod17mw/41/
If you're using SASS/SCSS, there is so much more you can clean up in your style as you can define variables for border color, etc, and define mixins as function to set the right border(s) to the right color.
Center it on the page
Since .nav is already displayed as flexbox. You can easily center its item by adding .justify-content-center on the .nav:
<div class="container">
<nav class="nav nav-pills nav-wizard justify-content-center">
...
</nav>
</div>
https://jsfiddle.net/davidliang2008/5xod17mw/51/
I am using a number of Pseudo elements throughout a website I am building. They all look great except in IE. I am testing it in IE 10 and 11 to start off with.
For some reason the positioning is always slightly off - in the example below, about 5 px for each element.
I have tried changing the display and positions, setting the origins, but nothing seems to work.
Any help would be appreciated.
.home .welcome-row h1 {
position: relative;
margin-bottom: 0;
}
.home .welcome-row h1:before {
background-image: url('/wp-content/uploads/2017/10/welcome-line-1.png');
-webkit-transform: translateY(-23px);
-moz-transform: translateY(-23px);
-o-transform: translateY(-23px);
transform: translateY(-23px);
background-size: 260px 13px;
background-repeat: no-repeat;
width: 260px;
height: 13px;
content:"";
position: absolute;
display: block;
}
.home .welcome-row h1:after {
background-image: url('wp-content/uploads/2017/10/welcome-line-2.png');
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
background-size: 260px 13px;
background-repeat: no-repeat;
width: 260px;
height: 13px;
content:"";
position: absolute;
display: block;
}
*EDIT - I have added any additional theme styles that are applied incase they have any relevance.
*:after,
*:before {
box-sizing:border-box
}
:-webkit-any(article,aside,nav,section) h1 {
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}
user agent stylesheet
h1 {
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
h1 {
margin: 0;
padding: 0;
}
Building a site using Bootstrap. Having an issue with the van. I want it to collapse at 991px. Searched online and found this code, however it has changed the function of the nav as the nav wont stay open. Any ideas? The code used to override default is in my custom.css
http://nurdit.com/styleengineered/
#media (max-width: 991px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
Try changing the CSS above to:
#media (max-width: 991px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-collapse.collapse.in { /* NEW */
display: block!important;
}
}
As far as I can tell, this does the trick on your site. Credit for this suggestion goes to Dave Forber , see Bootstrap 3 Navbar Collapse
I'm working with this ComponentView example:
Kitten ComponentView
In my variation, I'd like to highlight the selected row when the user taps on it, as would happen in an xtype: 'list'. How can I accomplish this?
You can achieve this by using an tpl property and then set the class of the css inside the <div> tag
Something like this,
....
xtype: 'list',
tpl: '<div class="clickedItem"> ...'
....
and then write your css code as,
.clickedItem{
background: // some color value;
text-shadow: // some color value;
}
After examining the Sencha Kiva example in their examples directory,
it looks like it's a combination of the .x-dataview-UI_NAME class with .x-list-item, where UI_NAME is defined is the dataview view config. In the Kiva example, it's the line 'ui: loans'.
So, the CSS section looks something like this:
.x-dataview-loans .x-list-item {
...
}
Defining the UI suffix in the view:
Ext.define('Kiva.view.LoansList', {
extend: 'Ext.DataView',
xtype : 'loanslist',
requires: [
'Kiva.view.LoansListItem'
],
config: {
ui : 'loans',
store: 'Loans',
useComponents: true,
defaultType: 'loanslistitem',
deselectOnContainerClick: false
},
onItemTap: function(container, target, index, e) {
var me = this;
me.callParent(arguments); // WARNING: without this call, the row will not become selected
}
The relevant code in application.css
.x-dataview-loans .x-img {
margin-right: 1em;
background-position: center center;
width: 60px;
height: 60px
}
.x-dataview-loans .x-list-item {
padding: 1em;
border-bottom: 1px solid #e1e1e1;
-webkit-transition: linear .2s background
}
.x-dataview-loans .x-list-item .name div {
font-weight: bold
}
.x-dataview-loans .x-item-selected {
background: #fff
}
.x-dataview-loans .completion {
display: -webkit-box;
display: box;
-webkit-box-align: center;
box-align: center
}
.x-dataview-loans .completion .x-innerhtml {
display: -webkit-box;
display: box;
-webkit-box-align: stretch;
box-align: stretch;
height: 1em;
width: 100%;
border: 1px solid #bbb;
-webkit-box-shadow: inset 0 0 1px #fff;
padding: 1px;
-webkit-border-radius: 1em;
border-radius: 1em;
background-color: #e2e2e2;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c9c9c9), color-stop(10%, #d5d5d5), color-stop(65%, #e2e2e2), color-stop(100%, #e3e3e3));
background-image: -webkit-linear-gradient(#c9c9c9, #d5d5d5 10%, #e2e2e2 65%, #e3e3e3);
background-image: linear-gradient(#c9c9c9, #d5d5d5 10%, #e2e2e2 65%, #e3e3e3)
}
.x-dataview-loans .completion .x-innerhtml .bar {
min-width: 1em;
border: 1px solid #4b9123;
-webkit-border-radius: 1em;
border-radius: 1em;
background-color: #74b446;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c6e1b2), color-stop(2%, #87c05e), color-stop(100%, #639a3c));
background-image: -webkit-linear-gradient(#c6e1b2, #87c05e 2%, #639a3c);
background-image: linear-gradient(#c6e1b2, #87c05e 2%, #639a3c)
}