Is it possible to adjust the height of the Navbar in Materialize?
64px is a bit too much for my site. I was going for 30px before I decided to materialize it.
You have to override some CSS properties:
nav {
height: 30px;
line-height: 30px;
}
nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
height: 30px;
line-height: 30px;
}
nav .button-collapse i {
height: 30px;
line-height: 30px;
}
nav .brand-logo {
font-size: 1.6rem;
}
#media only screen and (min-width: 601px){
nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
height: 30px;
line-height: 30px;
}
}
You can add class on nav tag like that :
nav {
height: 30px;
line-height: 30px;
}
You have to override some CSS properties(FOR NEW VERSION):
nav {
height: 30px;
line-height: 30px;
}
nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
height: 30px;
line-height: 30px;
}
nav .button-collapse i {
height: 30px;
line-height: 30px;
}
nav .brand-logo {
font-size: 1.6rem;
}
#media only screen and (min-width: 601px){
nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i{
height: 30px;
line-height: 30px;
}
}
Related
I use v-tooltip to show tooltip on every cell of table
<td v-tooltip="{content: 'some content', trigger: 'click'}"></td>
But I want when user click another cell, current tooltip will disapear, I have tried "autoHide" property, but it not working.
Thanks
v-tooltip repository:
https://github.com/Akryum/v-tooltip
It's a late answer but maybe it can help someone else:
you can add the tooltip component as a ref and call the hide method:
this.$refs.popover.hide()
I think you will have to use the more customizable v-popover component. The v-tooltip directive doesn't seem to handle manual triggering, and you need manual triggering.
console.clear();
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
selectedCell: null
}
})
body {
font-family: sans-serif;
margin: 42px;
}
.tooltip {
display: block !important;
z-index: 10000;
}
.tooltip .tooltip-inner {
background: black;
color: white;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
}
.tooltip[x-placement^="top"] {
margin-bottom: 5px;
}
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="bottom"] {
margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="right"] {
margin-left: 5px;
}
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[x-placement^="left"] {
margin-right: 5px;
}
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
.tooltip[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
<script src="//unpkg.com/popper.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/v-tooltip"></script>
<div id="app">
<table border="1">
<tr v-for="i in 3">
<td #click="selectedCell = i">
<p><span>This is cell {{ i }}</span></p>
<v-popover trigger="manual" :open="selectedCell === i">
<template slot="popover">
<p>
{{ message }}
</p>
</template>
</v-popover>
</td>
</tr>
</table>
</div>
I am trying to make an application that is responsive to a full screen computer size and portrait and landscape sizing on a phone. I can get the full screen and portrait sizing to work, but when I switch to landscape, the landscape css media query does not work. Any ideas on what is going on? Here is my css:
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait)and (-webkit-min-device-pixel-ratio: 2) {
.landing-header {
margin-top: 18%;
}
.landing-h {
font-size: 145px;
}
.auth-box {
position: absolute;
top: 58%;
left: 35%;
margin-left: -15rem;
margin-top: -26.5rem;
width: 60rem;
height: 80rem;
overflow: hidden;
}
.user-auth {
padding-top: 35%;
}
.greeting {
margin-top: 6%;
margin-left: 7%;
font-size: 35px;
text-align: center;
}
.login-form, .register-form {
font-size: 40px;
}
.login-form input, .register-form input {
margin: 3%;
}
.landing-button {
margin: 2%;
width: 50%;
font-size: 60px;
}
}
#media only screen and (min-device-width: 667px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
.landing-header {
margin-top: 9%;
}
.auth-box {
position: absolute;
top: 98%;
left: 35%;
margin-left: -22rem;
margin-top: -26.5rem;
width: 72rem;
height: 20rem;
overflow: hidden;
}
.greeting {
margin-left: 34%;
margin-top: 2%;
margin-bottom: 1%;
font-size: 16px;
text-align: center;
}
}
.user-auth {
padding-top: 9%;
}
.landing-button {
margin: 0%;
width: 12%;
font-size: 16px;
}
.login-form, .register-form {
font-size: 18px;
}
.login-form input, .register-form input {
margin: 2%;
}
#media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
.auth-box {
width: 61rem;
height: 18rem;
top: 95%;
left: 40%;
height: 23rem;
}
.landing-button {
font-size: 20px;
width: 18%;
margin: 1%;
}
.greeting {
margin-left: 30%;
margin-top: 2%;
}
.login-form input, .register-form input {
margin-top: 6%;
margin-bottom: 1%;
}
}
OK, I think I see what's biting you. In addition to the max and min being the same as I'd pointed out in the comments, somewhat counter-intuitively you need to use the same width & height values for both portrait and landscape modes. So, a device like the iPhone is always going to have a smaller value for its device width than its device height as its "native" orientation is portrait. If you make your width media query for the landscape mode match what you've got for portrait, it'll likely do what you want.
stack!
I have an animation that is assigned to the class .slide
I have on hover on a div, when I hover over the div I want the animation class be assigned to another div. Using CSS animations.
I'd appreciate the help and thanks!
Code:
http://codepen.io/iheartkode/pen/wWMQmG?editors=0110
share-container {
position: relative;
width: 150px;
height: 75px;
background: #FF5722;
border-radius: 10px;
cursor: pointer;
&:hover {
// assign animation class to the share-icons class
}
p {
text-align: center;
color: white;
}
}
.share-icons {
position: absolute;
z-index: -2;
top: 15px;
left: 4px;
margin: 0 auto;
width: 120px;
height: auto;
padding: 10px;
background: coral;
text-align: center;
color: white;
font-size: 2em;
cursor: pointer;
}
.slide {
animation: slide 2s linear;
#keyframes slide {
from {
transform: translateY(0px);
}
to {
transform: translateY(100px);
}
}
}
Edited after your clarification:
Change this in your HTML:
<div class="share-icons slide">
And this in your SCSS:
&:hover .slide {
// assign animation class to the share-icons class
animation: slide 2s linear;
#keyframes slide {
from {
transform: translateY(0px);
}
to {
transform: translateY(100px);
}
}
}
And then adjust the animation as needed.
And here's a fork in action:
http://codepen.io/denmch/pen/WxrLQZ
heres the code. it seems to be working on this editor on stackoverflow...but when rendered on ie10 it take the palceholder image and stretches it (almost as if it were 200% in height and 100% in width
<style>
section`enter code here` {
padding: 1em;
text-align: center;
}
.content {
margin: 0 auto;
max-width: 1000px;
}
.content > h2 {
clear: both;
margin: 0;
padding: 4em 1% 0;
color: #484B54;
font-weight: 800;
font-size: 1.5em;
}
.content > h2:first-child {
padding-top: 0em;
}
.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1100px;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 310px;
max-width: 310px;
max-height: 310px;
width: 48%;
background: #d30c55;
text-align: center;
}
.grid figure img {
position: relative;
display: block;
height: 100%;
width:auto;
max-height: 100%;
max-width: 100%;
opacity: 1;
}
.grid figure figcaption {
padding: 0em 2em 2em 2em;
color: #ffffff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
word-spacing: -0.15em;
font-weight: 200;
}
.grid figure h2 span {
font-weight: 400;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/*---------------*/
/***** transition *****/
/*---------------*/
figure.effect-transition {
background-color: #a39d99;
}
figure.effect-transition img {
/* opacity: 0.7; */
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-transition:hover img {
opacity: 0.1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-transition h2 {
margin-top: 80%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-transition p {
margin: 1em 0 0;
padding: 0.6em;
border: 1px solid #fff;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0) scale(1.1);
transform: translate3d(0,20px,0) scale(1.1);
}
figure.effect-transition:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,-170px,0);
}
figure.effect-transition:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,-30px,0) scale(1);
}
#media screen and (max-width: 50em) {
.content {
padding: 0 10px;
text-align: center;
}
.grid figure {
display: inline-block;
float: none;
margin: 10px auto;
width: 100%;
}
}
</style>
<div class="container">
<div class="content">
<div class="grid">
<figure class="effect-transition" style="background-color: #d40e8c;"><img alt="blabla" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=310%C3%97310&w=310&h=310" /> <figcaption>
<h2>Go back <span>home</span></h2>
<p>Some random text here</p>
View more</figcaption></figure>
</div>
</div>
</div>
(I do not have the code on me at this exact moment to show).
I've built something with HTML5 and CSS3. Everything works wonderfully except on some peoples computers (everyone has IE10), the image files are being stretched vertically ?
This is being built for my company (internal)...Is there a reason why this would happen on only some peoples version of IE10?
Thank you,
Nick
Please Check with the css as shown below,
img.someClass{
max-width:100%;
width:auto
}
What did the trick for me was setting a max-width at something like
max-width: 110px;
and afterwards a width:100%;
images were nog not stretched anymore
UPDATE: nvm, this caused the img to have a width of 0 on Firefox
I have recently decided to use LESS.
So I am doing the migration from css to less.
There is definitively something I do not understand about mixins.
I read the doc, of course, and read some stuffs about mixins. I have done some research on StackOverflow, and I did not find any anwser.
I have this less code:
navbar{
position: relative;
display: block;
height: 100%;
margin-bottom: 2px;
.mixin-subtitle{
display: block;
background: #white;
position: absolute;
width: 100%;
left: 1px;
padding-left: 10%;
line-height: 24px;
}
.mixin-type{
font-family: 'icon-mvp';
height: 100%;
width: 9.5%;
position: absolute;
background: rgba(156,178,189,0.65);
left: 1px;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0px 0px 10px #blue;
}
.artist{
subtitle{
.mixin-subtitle();
}
.type{
.mixin-type();
&:before{
content: "\e607";
}
}
}
.album{
subtitle{
.mixin-subtitle();
}
.type{
.mixin-type();
&:before{
content: "\e608";
}
}
}
.song{
subtitle{
.mixin-subtitle();
}
.type{
.mixin-type();
&:before{
content: "\e614";
}
}
}
}
And the mixins do not work. I have tried to put the mixins in the beginning of my file. I have tried to put () after my mixins declarations.
And it still does not work...
For now I am compiling less on live with less.js, I have tried to compile it by myself with lessc, it still does not work.
I can not understand why.
Can someone help me ?
Edit:
there is something I do not understand.
If I put subtitle or .type as brother's of my mixins, it works.
But if I put it under artist, or song, or album, it does not...
So in this code, mixins are called :
navbar {
...
.mixin-type{
font-family: 'icon-mvp';
height: 100%;
width: 9.5%;
position: absolute;
background: rgba(156,178,189,0.65);
left: 1px;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0px 0px 10px #blue;
}
.type{
.mixin-type();
&:before{
content: "\e607";
}
}
}
There is definitively something I do not understand with mixins ...
EDIT2
expected css :
.artist subtitle, .album subtitle, .song subtitle{
display: block;
background: #fff;
position: absolute;
width: 100%;
left: 1px;
padding-left: 10%;
line-height: 24px;
}
.artist .type, .album .type, .song .type{
font-family: 'icon-mvp';
height: 100%;
width: 9.5%;
position: absolute;
background: rgba(156,178,189,0.65);
left: 1px;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0px 0px 10px 0000ff;
}
.artist .type:before{
content: "\e607";
}
.album .type:before{
content: "\e608";
}
.song .type:before{
content: "\e614";
}
The Fix (I think)
Based on your edit of what you are expecting, it appears that you don't want to be doing mixins, but rather extends. In your output css you do not have noted the fact that your original code nests everything inside a navbar "element". Assuming that nesting is still the case, then what you really want is probably something like this:
LESS
navbar{
position: relative;
display: block;
height: 100%;
margin-bottom: 2px;
.mixin-subtitle {
display: block;
background: #fff;
position: absolute;
width: 100%;
left: 1px;
padding-left: 10%;
line-height: 24px;
}
.mixin-type {
font-family: 'icon-mvp';
height: 100%;
width: 9.5%;
position: absolute;
background: rgba(156,178,189,0.65);
left: 1px;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0px 0px 10px #00f;
}
.artist{
subtitle {
&:extend(navbar .mixin-subtitle);
}
.type{
&:extend(navbar .mixin-type);
&:before{
content: "\e607";
}
}
}
.album{
subtitle {
&:extend(navbar .mixin-subtitle);
}
.type{
&:extend(navbar .mixin-type);
&:before{
content: "\e608";
}
}
}
.song{
subtitle {
&:extend(navbar .mixin-subtitle);
}
.type{
&:extend(navbar .mixin-type);
&:before{
content: "\e614";
}
}
}
}
CSS OUTPUT
navbar {
position: relative;
display: block;
height: 100%;
margin-bottom: 2px;
}
navbar .mixin-subtitle,
navbar .artist subtitle,
navbar .album subtitle,
navbar .song subtitle {
display: block;
background: #fff;
position: absolute;
width: 100%;
left: 1px;
padding-left: 10%;
line-height: 24px;
}
navbar .mixin-type,
navbar .artist .type,
navbar .album .type,
navbar .song .type {
font-family: 'icon-mvp';
height: 100%;
width: 9.5%;
position: absolute;
background: rgba(156, 178, 189, 0.65);
left: 1px;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0px 0px 10px #00f;
}
navbar .artist .type:before {
content: "\e607";
}
navbar .album .type:before {
content: "\e608";
}
navbar .song .type:before {
content: "\e614";
}
If you in fact do not want navbar in the selector string, then you need to remove all that code from being nested inside navbar.
Understanding Mixins
Mixins just "copy" code to the location you specify (no grouping occurs). Your original code was doing just that when I ran it, all the properties were copying into the navbar .artist subtitle, navbar .album subtitle, etc. under their own selector blocks. The above code uses the :extend() to not copy code, but group the code together.
Improving the Above Code
You can actually eliminate the extra .mixin-subtitle and .mixin-type classes and do your extends this way (defining it all under one of the groups, here I did .artist):
LESS
navbar{
position: relative;
display: block;
height: 100%;
margin-bottom: 2px;
.artist {
subtitle {
display: block;
background: #fff;
position: absolute;
width: 100%;
left: 1px;
padding-left: 10%;
line-height: 24px;
}
.type {
font-family: 'icon-mvp';
height: 100%;
width: 9.5%;
position: absolute;
background: rgba(156,178,189,0.65);
left: 1px;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0px 0px 10px #00f;
&:before{
content: "\e607";
}
}
}
.album{
subtitle {
&:extend(navbar .artist subtitle);
}
.type{
&:extend(navbar .artist .type);
&:before{
content: "\e608";
}
}
}
.song{
subtitle {
&:extend(navbar .artist subtitle);
}
.type{
&:extend(navbar .artist .type);
&:before{
content: "\e614";
}
}
}
}
Output CSS (Cleaner)
navbar {
position: relative;
display: block;
height: 100%;
margin-bottom: 2px;
}
navbar .artist subtitle,
navbar .album subtitle,
navbar .song subtitle {
display: block;
background: #fff;
position: absolute;
width: 100%;
left: 1px;
padding-left: 10%;
line-height: 24px;
}
navbar .artist .type,
navbar .album .type,
navbar .song .type {
font-family: 'icon-mvp';
height: 100%;
width: 9.5%;
position: absolute;
background: rgba(156, 178, 189, 0.65);
left: 1px;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0px 0px 10px #00f;
}
navbar .artist .type:before {
content: "\e607";
}
navbar .album .type:before {
content: "\e608";
}
navbar .song .type:before {
content: "\e614";
}
You can see that the above code does not output then output the (I am assuming) unused .mixin-subtitle and .mixin-type classes, but just simply the classes you are using.