I'm currently creating an SPFX application that uses fluent UI for my forms. I find material UI a bit challenging to use and I wanted something straightforward like fluent UI but I'm trying to modify the CSS of the dropdown component to have the label float when focusing on the dropdown element. something like this codepen here:
so far its not working based from the tutorials I have followed probably because of the structure of the Dropdown component when rendered to the browser. Is it possible to do it in fluent UI?
this is how I targeted the specific element:
<Dropdown
placeholder='Select '
selectedKey={this.state.selectedRequestType}
options={this.requestTypesOption}
onChange={this.onDropdownChange}
label="Select Category*"
className={styles.floating}
/>
and in my SCSS file:
.floating {
margin-bottom: 2rem;
background-color: var(--field__background);
transition: background-color 0.2s ease;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.floating > div:first-of-type {
padding: 1.8rem 1rem 0.6rem;
font-size: 1rem;
border-bottom: 0.1rem solid var(--input__border);
transition: border-color 0.2s ease;
caret-color: var(--color__accent);
}
.floating label {
display: block;
position: relative;
max-height: 0;
font-weight: 500;
pointer-events: none;
}
.floating label::before {
display: inline-block;
filter: blur(0);
transform-origin: left top;
transition: transform 0.2s ease;
left: 1rem;
position: relative;
}
.floating label::after {
bottom:1rem;
content: "";
height: 0.1rem;
position:absolute;
transition: transform 180ms cubic-bezier(0.4,0,0.2,1),
opacity 180ms cubic-bezier(0.4,0,0.2,1),
background-color 0.3s ease;
opacity: 0;
left: 0;
top:100%;
margin-top: -0.1rem;
transform: scale3d(0,1,1);
width: 100%;
}
.floating > div:first-of-type:focus + .floating label::after {
transform: scale3d(1,1,1);
opacity:1;
}
.floating > div:first-of-type:placeholder-shown +
.floating label::before {
transform: translate3d(0,-2.2rem,0) scale3d(1,1,1);
}
.floating label::before,
.floating > div:first-of-type:focus + .floating label::before {
transform: translate3d(0,-3.12rem,0) scale3d(0.82,0.82,1);
}
the output looked like this.
Related
I am creating a side navigation panel and I can't seem to figure out how to change colour of the text in link when I hover over it. The background colour changes. It actually worked before I added the animation but I wouldn't want to pass out on the animation.
.sidenav-navigation {
list-style: none;
padding: 1rem;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
.sidenav-navigation-items {
width: 100%;
margin-bottom: 0.5rem;
border-radius: 2rem;
cursor: pointer;
.sidenav-navigation-link {
display: flex;
align-items: center;
height: 3rem;
color: white;
text-decoration: none;
.sidenav-navigation-link-icon {
font-size: 22px;
width: 2rem;
min-width: 2rem;
text-align: center;
}
.sidenav-navigation-link-text {
text-align: center;
margin-right: 0.5rem;
animation:fadeIn 0.7s;
}
}
}
}
.sidenav-navigation-items:hover{
.sidenav-navigation-link {
transition: all .1s ease;
border-radius: 0.25rem;
background-color: white;
color: black;
}
}
#keyframes fadeIn{
0%{opacity:0;}
50%{opacity:50%;}
100%{opacity:100%;}
}
Probably white color style has higher priority due to more specific rules. Try to use !important rule with lower prio style.
.sidenav-navigation-items:hover{
.sidenav-navigation-link {
transition: all .1s ease;
border-radius: 0.25rem;
background-color: white;
color: black !important;
}
}
Other option may be changing the way of rules nesting to below:
.sidenav-navigation {
.sidenav-navigation-items {
.sidenav-navigation-link {
color: white;
}
&:hover {
.sidenav-navigation-link {
color: black;
}
}
}
}
https://www.toriiteppanyaki.com/vertical-fixed-navigation/
this is the page i am testing. whenever i click on the dot navigation to scroll to particular section, it stuck for a second before it can move again. anyone face this before? I am using this code from codyhouse and applying it in my Divi WordPress theme.
< script src = "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" > < /script> <
script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" > < /script> <
script >
jQuery(document).ready(function($) {
var section_items = $('.sectionnav'),
navigation_items = $('#navigation a');
updateNavigation();
$(window).on('scroll', function() {
updateNavigation();
});
navigation_items.on('click', function(event) {
event.preventDefault();
smoothScroll($(this.hash));
});
$('.scroll_down').on('click', function(event) {
event.preventDefault();
smoothScroll($(this.hash));
});
function updateNavigation() {
section_items.each(function() {
$this = $(this);
var activeSection = $('#navigation a[href="#' + $this.attr('id') + '"]').data('number') - 1;
if ($this.offset().top - $(window).height() / 2 < $(window).scrollTop() && $this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop()) {
navigation_items.eq(activeSection).addClass('is-selected');
} else {
navigation_items.eq(activeSection).removeClass('is-selected');
}
});
}
function smoothScroll(target) {
$('body,html').animate({
'scrollTop': target.offset().top
},
600);
}
}); <
/script>
<style>ol,
ul {
list-style: none;
}
</style><style>#navigation {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
#navigation li {
text-align: right;
}
#navigation a {
display: inline-block;
}
#navigation a:after {
content="";
display: table;
clear: both;
}
#navigation a span {
float: right;
display: inline-block;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6);
}
#navigation a:hover span {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#navigation a:hover .label {
opacity: 1;
}
#navigation a.is-selected .dot {
background-color: white;
}
#navigation a.is-selected .label {
opacity: 1;
}
#navigation .dot {
position: relative;
/* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/
top: 8px;
height: 12px;
width: 12px;
border-radius: 50%;
background-color: #000000;
-webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
-moz-transition: -moz-transform 0.2s, background-color 0.5s;
transition: transform 0.2s, background-color 0.5s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#navigation .label {
position: relative;
margin-right: 10px;
padding: .1em .1em;
color: white;
font-size: 14px;
font-size: 0.875rem;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
opacity: 0;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.nav_trig {
display: none;
}
</style>
I would like to change the background colour of "After" to blue upon clicking, but no matter what it just doesn't show. I'm not sure what is wrong here in SCSS. Would really appreciate any advice!
Here's the JS Fiddle: https://jsfiddle.net/u1h9fe6v/
.grid-list {
--color: #f6f8ff;
--background: #2b3044;
--background-hover: green;
--background-active: blue;
padding: 6px 12px 6px 8px;
margin: 0;
display: flex;
outline: none;
position: relative;
border: none;
border-radius: 9px;
background: var(--b, var(--background));
cursor: pointer;
-webkit-appearence: none;
-webkit-tap-highlight-color: transparent;
transform: scale(var(--scale, 1)) translateZ(0);
}
.grid-list:active {
--scale: 0.95;
--background-active: blue;
}
.grid-list:hover {
--b: var(--background-hover);
}
It looks like you can set the background color in the
".grid-list.animation.active {" style. Like this ...
.grid-list.animation.active {
--span-name: text-active;
--dots-name: move;
--lines-name: scale;
--lines-duration: 0.15s;
--lines-delay: 0.3s;
background: blue;
}
I would like to achieve what i wrote in the title, simultaneously.
What i have is a div that is width:100% (container) and contains 4 images inside of a div, 25% each (grid), with a description layer inside (on) it - called desc, for the overall dimensions, and span, for the mere text.
Here is the CSS:
.grid-container {
width: 85%;
margin-left: auto;
margin-right: auto;
}
.grid {
width: 25%;
float: left;
position: relative;
}
.grid img {
border-radius: 50%;
transition: .4s -webkit-filter linear;
-webkit-transition: background .5s ease 50ms;
transition: background .5s ease 50ms;
}
.grid img:hover {
filter: url(filters.svg#grayscale);
/* Firefox 3.5+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(1);
/* Google Chrome & Safari 6+ */
background: rgba(168, 202, 217, .6)
}
.desc {
display: block;
position: absolute;
left: 26%;
width: 87%;
height: 100%;
top: 0%;
left: 0%;
border-radius: 50%;
}
.desc:hover {
background: rgba(168, 202, 217, .6)
}
.desc span {
width: 100%;
height: 100%;
text-align: center;
margin-top: 37%;
position: absolute;
left: 0;
top: 0;
font-size: 16px;
opacity: 0;
-webkit-transition: opacity .5s ease 50ms;
transition: opacity .5s ease 50ms;
color: #fff !important;
}
.desc span:hover {
opacity: 1;
}
So, what i want to achieve is to make the image go grayscale when hovered, while making the description visible. Description has a background color aswell (can i apply that to the image instead, along with the greyscale filter?)
The problem is that the description this way occupies the whole image, so the hover would be considered by the description only and not the image.
Any clues on how i can achieve what i want? Thanks for your attentio
Best regards
Simple, put both elements in the same container. For example,
.grid:hover img {
filter: url(filters.svg#grayscale);
}
.grid:hover .desc span {
opacity: 1;
}
If your description is an immediate following sibling of the image, you can use the immediate following-sibling selector:
.grid img:hover + .descr{display: block; background: whatever;}
(selects the element with the class="descr" once the mouse hovers over the image)
HTML structure for this to work:
<div>
<img>
<p class="descr">
</div>
how to do responsive hover?
This is good hover example and it's perfectly fits for my screen size and this is bad not responsive hover example
This is my code
HTML
<div class="product-img-list">
<%= link_to product_path(product), class: 'product_link' do %>
<%= image_tag(product.image_url, class: "img-responsive", size: "300x250") %>
<% end %>
<span class="product-img-text"><span>code</span></span>
</div>
CSS
span.product-img-text {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 80px;
left: 15px;
position: absolute;
top: 230px;
width: 291px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.product-img-list:hover span.product-img-text {
opacity: 1;
}
span.product-img-text span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.img-responsive {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.product-img-list.img-responsive {
display: inline-block;
margin: 0 1em 1em 0;
position: relative;
}
Thank you for help
I would say that you must make the .product-img-text be responsive (instead of using hardcoded dimensions)
something like the following
span.product-img-text {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
position: absolute;
height: 25%; /*assuming text is not that much*/
left: 1em; /*to account for margin*/
right:1em /*to account for margin*/
bottom: 0; /*add it to bottom of image*/
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
and you will have to make .product-img-list be realtive positioned if it is not.
.product-img-list{position:relative}