I am new in Polymer,
I have added paper-toggle-button in my project.I found css classes on official website to change color and transition animation. However I want to reduce it in size especially by some pixels.
I have search through web. But did not successes.
Please help
you can change the size by applying mixins, add the following code to your css styles
paper-toggle-button {
--paper-toggle-button-unchecked-button: {
width: 30px;
height: 30px;
}
--paper-toggle-button-unchecked-bar: {
width: 30px;
height: 30px;
}
}
Related
I am having a problem with some new CSS due to an update of our plugin. The page in question is here: https://www.renophil.com/event/ghostbusters-in-concert/
Basically from the title below the image down to the share icons should be a left column. Then the description that starts with "Kick off your Halloween weekend..." should be a larger right column.
We are using Wordpress and Visual Composer. The left column uses the class of vc_col-sm-4 and the right uses vc_col-sm-8. These are set to have the correct widths and work on mobile devices.
.vc_col-sm-4 {
width: 33.33333333%;
}
.vc_col-sm-8 {
width: 66.66666667%;
}
The problem is that the plugin we use for the events (The Events Calendar) has this CSS rule:
.tribe-events-single>.tribe_events>:not(.primary,.secondary,.tribe-events-related-events-title,.tribe-related-events) {
order: 1;
width: 100%;
}
which is overriding the width of my columns mentioned above. I thought I could fix it with width:auto but it didn't work. Is there a way to cancel it or do I have to add !important to the .vc-col-sm-4 and .vc-col-sm-8 code?
Try adding specificity to the classes controlling the widths when that overriding events class is present. This should help get you in the right direction.
#media (min-width: 768px) {
.tribe-events-single > .tribe_events .vc_col-sm-4 {
width: 33.33333333%;
}
.tribe-events-single > .tribe_events .vc_col-sm-8 {
width: 66.66666667%;
}
}
The CSS rule:
.tribe-events-single>.tribe_events>:not(.primary,.secondary,.tribe-events-related-events-title,.tribe-related-events) {
order: 1;
width: 100%;
}
has a greater DOM precision and has priority. You can use !important as you said:
.vc_col-sm-4 {
width: 33.33333333% !important;
}
.vc_col-sm-8 {
width: 66.66666666% !important;
}
or add Additional CSS from the theme preview mode and target the id element #tribe-events-content
div#tribe-events-content div.vc_col-sm-4 {
width: 33.33333333%%;
}
div#tribe-events-content div.vc_col-sm-8 {
width: 66.66666666%;
}
I am using polymer 3 and lit-element(2.2.1). The version of mwc-textfield is 0.13.0. I have read the documentations related to this version.In this documentation, I have found that we can add mixin for height. I had tried several ways but did not succeed. May be the syntax I am using is wrong. I want to decrease the height of my text field. This is my text field
<mwc-textfield id="textBox" .type="text" .value=${this.title} .placeholder='' minLength="10" maxLength="256"></mwc-textfield>
and my css
#textBox{
text-transform: none;
--mdc-theme-primary: transparent;
--mdc-text-field-fill-color: #fff;
--mdc-text-field-hover-line-color: #f5f5f5;
--mwc-text-width: 100%;
width:100%;
}
The default css applied is
:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--outlined) {
background-color: transparent;
}
.mdc-text-field:not(.mdc-text-field--disabled) {
background-color: rgb(245, 245, 245);
}
.mdc-text-field {
display: flex;
width: 100%;
}
.mdc-text-field {
height: 56px;
display: inline-flex;
position: relative;
box-sizing: border-box;
will-change: opacity, transform, color;
border-radius: 4px 4px 0px 0px;
overflow: hidden;
}
.mdc-text-field {
--mdc-ripple-fg-size: 0;
--mdc-ripple-left: 0;
--mdc-ripple-top: 0;
--mdc-ripple-fg-scale: 1;
--mdc-ripple-fg-translate-end: 0;
--mdc-ripple-fg-translate-start: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
user agent stylesheet
label {
cursor: default;
}
<style>
#textfield {
width: var(--text-field-width,80%);
height: 100%;
position: absolute;
left: 0;
top: -12px;
text-transform: capitalize;
--mwc-text-width: 100%;
}
<style>
mwc-textfield {
--mdc-theme-primary: transparent;
--mdc-text-field-ink-color: black;
--mdc-text-field-fill-color: transparent;
--mdc-text-field-disabled-fill-color: transparent;
}
The default height applied to the text field is 56px. What I have tried is
#textbox.mdc-text-field--height{
height:45px;
}
and
#textbox.mdc-text-field--height('45px');
and also added mixin in the node modules file as height:var(--mdc-text-field-height,56px);
and used in css as
#textBox{
--mdc-text-field-height:45px;
}
Any help would be greatly appreciated! Thanks in advance.
Material design components vs Material web components
I have read the documentations related to this version. In this documentation, I have found that we can add mixin for height.
The first thing to note here is that there are two different libraries of material components: the one you are referring to is MDC (Material Design Components, distributed on npm as #material/<component>) which is a SASS+JS implementation of Material components. The other one is MWC (Material Web Components, distributed as #material/mwc-<component>), a collection of actual WebComponents based on the former library. So keep in mind that the documentation refers to the MDC counterpart of the MWC component you're actually using (<mwc-textfield>).
Styling from the outside
What you're trying to do here
#textbox.mdc-text-field--height {
height: 45px;
}
doesn't work mainly because selecting inside a custom element's shadow root is not possible (at least, not anymore); also, the element responsible for the height is the <label>, whose class is .mdc-text-field.
The querySelector way
The quickest way to change the height that comes to my mind is this:
import { LitElement, html, property, customElement, css, query } from 'lit-element';
import '#material/mwc-textfield';
#customElement('my-component')
export class MyComponent extends LitElement {
// Select the text field
#query('mwc-textfield') textField;
async firstUpdated() {
// Wait for its dom to be ready
await this.textField.updateComplete;
// Programmatically select the label
// and change the height
this.textField
.shadowRoot
.querySelector('.mdc-text-field')
.style
.height = '45px';
}
render() {
return html`<mwc-textfield></mwc-textfield>`;
}
}
however I would really not recommend it: performance and elegance aside, it'll probably break some of mwc-textfield features such as the floating label.
The extension way
You can also enforce the height by extending TextField and overriding the styles:
import {LitElement, html, customElement, css} from 'lit-element';
import {TextField} from '#material/mwc-textfield/mwc-textfield';
#customElement('my-textfield')
export class MyTextfield extends TextField {
static styles = [TextField.styles, css`
.mdc-text-field {
height: 45px;
}
`];
}
// Then use <my-textfield> instead of <mwc-textfield>
but again, like the above, use at your own risk...
Using the mixin
I guess for now the only way of using the height mixin is building a customised version of TextField which more or less goes like this:
clone the mwc repo (yeah, it's a monorepo so you get all the other components as well, but I'm pretty sure you can delete all the ones not imported by mwc-textfield)
npm install
in packages/mwc-textfield/src/mwc-textfield.scss use the mixin:
#include mixins.height(45px);
probably around here
npm run build
copy the mwc-textfield folder and paste it in your project (delete the source files, npm pack may be handy for this), then change the imports from #material/mwc-textfield to ./path/to/custom-textfield
Certainly too much work for changing a height... The good news is MWC is still in development and it cannot be excluded that they'll add a CSS custom property or some other way to customise the height. Also, the new density concepts are being implemented in MWC (sadly not yet in TextField), which could be just what you need.
There is also an open issue about this, let's see what they say
I've made a mediaquery and, strangely, some of the new css properties work and other don't...
working : .ctas and .footer-content
When I use the chrome inspector, I doesn't even detects the mediaquery for the classes not working...
You can see the page I'm working on here : http://sopureinthecity.fr/test/
#media screen and (max-width:570px) {
.ctas {
width: 270px;
}
.footer-content {
padding-top: 20px;
}
.img-reponsive {
margin-top: 40px;
}
.main-title {
top: 30%;
width: 100%;
font-size: 18px;
}
.modal-btn {
top: 48%;
}
}
What did I do wrong ?
Thanks in advance !
EDIT, so everything works in the browser, but my .large-header is all bugged when I visit the website on my phone !
The responsive of the .large-header only works on the desktop (with a phone screen size)
You have typos in your css selectors when compared to the site you have linked:
.img-reponsive vs .img-responsive
.modal-btn vs .modalbtn
Nothing is wrong with the media query. The issue is a typo:
.modal-btn {
should be
.modalbtn {
As the CSS class used in your page is modalbtn.
I am using Font Awesome on a website.
I have a few custom icons and I would like to keep my code consistent, so I would like to use my new icons in the same way as Font-Awesome.
When I look at a font-awesome icon, it would seem that its content is set with the following CSS:
.icon-dashboard:before
{
content: "\f0e5";
}
And then the icon is created as follows:
<i class="icon-dashboard></i>
However, if I have a .png image and try to use it in the same way, it doesn't seem to work:
.icon-network:before
{
content: url("images/network-icon.png");
}
This just shows a blank image. What am I missing here?
Using an image in a pseudo element won't work without further stylng - it won't be given any space (hence you won't see it).
Something like this should work:
.icon-dashboard {
height: 1em; /* Fixed dimensions - scale with line height */
width: 1em;
position: relative; /* Required for inner 'absolute' positioning */
}
.icon-dashboard:before {
content: '';
height: 100%; /* Fill parent */
width: 100%;
position: absolute;
left: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("images/network-icon.png");
}
Things to be aware of when using raster images rather than fonts or SVGs:
Scaling/aliasing issues
Fixed colour
An alternative is to create your own font, which includes Font Awesome ones as well as your own - e.g. https://icomoon.io or https://fontastic.me
If it shows a blank image, that means your pathing is off. The path is relative to your CSS file. Check the properties in your browser of where the image is trying to pull from and that will help you diagnose the issue.
I have made a simple menu in HTML. It works (almost) perfectly. The menu items are, as you can see, links with background images set in CSS. At mouse-over another background image is shown.
My problem is, that I cannot find a working solution for setting a menu item constantly "chosen" - or said in another way, I wan't to show the actual page in the menu.
First, I will show the HTML and CSS. Afterwards I will show what I have tried to do.
<div id="menu">
</div>
CSS looks like this:
#menu_produkter
{
display: block;
position: absolute;
background: url(images/menu_produkter.png) no-repeat;
width: 108px;
height: 26px;
margin-left: 376px;
margin-top: 52px;
}
#menu_produkter:hover {
background: url(images/menu_produkter_hover.png) no-repeat;
cursor: pointer;
}
#menu_galleri {
display: block;
position: absolute;
background: url(images/menu_galleri.png) no-repeat;
width: 64px;
height: 26px;
margin-left: 496px;
margin-top: 52px;
}
#menu_galleri:hover {
background: url(images/menu_galleri_hover.png) no-repeat;
cursor: pointer;
}
#menu_kontakt {
display: block;
position: absolute;
background: url(images/menu_kontakt.png) no-repeat;
width: 85px;
height: 26px;
margin-left: 572px;
margin-top: 52px;
}
#menu_kontakt:hover {
background: url(images/menu_kontakt_hover.png) no-repeat;
cursor: pointer;
}
I have tried to add CSS id's for each item called #menu_xxxx_on with the same background images as the ":hover" id's.
Then I set ViewBag.CurrentPage = "xxxx" in the top of my views. Finally I use Razor to check which page is the current:
$*
I hoped it would work - but instead the menu item totally disappears. I have tried to 'Inspect element' with Google Chrome to find out whats wrong. It seems like it resets all CSS-properties.
Is there any easy solution to this - or do I have to do it another way? I have seen other solutions with custom html-helpers - but I think it's a bit overkill if I can do it this way.
Thank you in advance.
If you want solve it with classes then use jQuery functions for example :
$(function(){
var id = $('hiddenId').val();
$('#'+id).addClass("someClass");
});
In someClass define your chosen menu tab style.
Id of chosen menu you can send using ViewBag and render it in hiddenField with id : hiddenId
#Html.Hidden("hiddenId",(object)ViewBag.CurrentPage)
But I suggest manipulate with innerHtml, then jQuery function should look like this :
$(function(){
var id = $('hiddenId').val();
var header = $('#'+id).html();
$('#'+id).html(header+'-on');
});