I searched for my problem and found this
However, the accepted solution does not work for me BUT I can't comment, since I have only 6 Reputation yet -.-
So Situation is, I want to use the paper-item from the Polymer framework inside the paper-listbox
That works, but when you select an item by clicking on it, the background changes to grey...
Docs and the answer to the question I linked abvoe suggest to overwrite --paper-item-selected / --paper-item-focus mixin, but this does not work for me
My code:
<link rel="import" href="../../../external/Polymer/bower_components/polymer/polymer.html">
<dom-module id="cit-literal-item">
<template>
<!-- scoped CSS for this element -->
<style is="custom-style">
.spacer {
#apply(--layout-flex);
}
paper-item {
--paper-item-selected: {
background-color: #FFFFFF;
};
--paper-item-focused: {
background-color: #FFFFFF;
};
}
</style>
<paper-item>Test</paper-item>
</template>
</dom-module>
Main Document Code:
...
<!-- Polymer custom elements -->
<link rel="import" href="lib/internal/dom-modules/literals/cit-literal-item.html">
...
<body>
<paper-listbox>
<cit-literal-item></cit-literal-item>
<cit-literal-item></cit-literal-item>
</paper-listbox>
</body>
I found the "solution"!
The property I had to overwrite is called --paper-item-focused-before
I looked at the source code of the <paper-item> and found this in the shared-styles.html
shared-styles.html
:host(.iron-selected) {
font-weight: var(--paper-item-selected-weight, bold);
#apply(--paper-item-selected);
}
:host([disabled]) {
color: var(--paper-item-disabled-color, --disabled-text-color);
#apply(--paper-item-disabled);
}
:host(:focus) {
position: relative;
outline: 0;
#apply(--paper-item-focused);
}
:host(:focus):before {
#apply(--layout-fit);
background: currentColor;
content: '';
opacity: var(--dark-divider-opacity);
pointer-events: none;
#apply(--paper-item-focused-before);
}
One can see, that the only mixin applying a color by default is --paper-item-focused-before, which applies a style to the :before pseudoelement of the <paper-item>.
--paper-item-focused-before: { background: transparent; };
Related
I tried to change the background-color in b-modal -> in .modal-header using bootstrap-vue. But the vue doesn't see my styles and I don know why :/
here is the code. I follow by answer in link
HTML:
b-modal(id="card-1" title="CARTÃO DE CRÉDITO" :modal-class="myclass" header-text-variant="light")
VUE
export default {
data: {
myclass: ['myclass']
},
}
CSS
.myclass > .modal-dialog > .modal-content > .modal-header {
background-color: #da2228 !important;
color: white;
}
But I still doesn't see the results. Modal header is white. Any ideas why?
You're probably using a scoped style tag in your .vue file.
If you are, then you need to use a deep-selector to properly target the subcomponent.
The selectors are /deep/, >>> or ::v-deep.
In the below example i use /deep/, but the others should work for you as well.
You can also use the header-class prop on b-modal to directly add the class to the header if you wish.
<template>
<b-modal header-class="my-class">
<template #modal-header>Header</template>
Hello
</b-modal>
<b-modal modal-class="my-second-class">
<template #modal-header>Header</template>
Hello
</b-modal>
</template>
<style scoped>
/deep/ .my-class {
background: black;
color: white;
}
/deep/ .my-second-class > .modal-dialog > .modal-content > .modal-header {
background: black;
color: white;
}
</style>
You can use content-class="your-class" in the vue bootstrap modal.
<b-modal id="myModal" content-class="your-class" title="BootstrapVue">
Body Content
</b-modal>
Or else it is difficult to style the modal cuz the normal class="" does not apply to the code.
Let's say that I have a custom web element called <my-course> with its own style defined in the <style> tag inside the definition and I do not want to alter this element's file at all as it's an external dependency of my project.
This <my-course> element has a <div> child defined in the <template> tag.
Example:
<dom-module id="my-course">
<template>
<style>
::host {
padding: 5px;
background: rgba(0,0,0,.2);
}
div#progress {
height: 20px;
width: 100%;
background: red;
}
</style>
<h1>This is my custom course element</h1>
<div id="progress"></div>
</template>
<script>
class MyCourse extends Polymer.Element {
static get is() {
return 'my-course';
}
}
window.customElements.define(MyCourse.is, MyCourse);
</script>
</dom-module>
I want to make the div#progress green with "background: green;" (it's red by default) via an external stylesheet that is loaded in the same page as the custom element is attached/used.
I tried to do:
my-course div#progress {
background: green;
}
But it does not work, the progress div keeps being red. There seems there is no way to style the shadow dom from outside the element itself, I've tried my-course::content div#progress, and has no result (/deep/ and ::shadow are deprecated) I previously achieved this using ::shadow.
Anyone can help? Thanks
You should use CSS variables, such as:
::host {
--progress-background: red;
padding: 5px;
background: rgba(0,0,0,.2);
}
div#progress {
height: 20px;
width: 100%;
background: var(--progress-background);
}
And to overrride it:
my-course {
--progress-background: green;
}
More info here: https://www.polymer-project.org/2.0/start/first-element/step-5
I'm using Bootstrap CDN. From the 3 rules, the last 2 ones don't work. Neither the image is resized nor the heading change its font color.
HTML
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Custom styles -->
<link rel="stylesheet" type="text/css" href="./stylesheets/portada.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="section1">
<h2 class="text-center">Heading</h2>
<img class="img-responsive" src="./images/8.jpg">
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
CSS
.section1 { // Working
background-color: #363b48;
color: blue;
height: 100px;
}
.section1 .text-center{ // Not working
color: #985475;
margin-top: 20px;
background-color: red;
}
.section1 img{ //Not working
width:20px;
}
Try this, although what you have should work also
.section1 h2{
color: #985475;
margin-top: 20px;
background-color: red;
}
I noticed 2 issues in your code.
First the CDN should not be loaded over http, but https. For
cross domain issues when loading it it's better to use just the //
without the http or https. That way it will load without giving crossdomain issues.
For instance: <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Second is that you are using comments which should be /* */
instead of // single slashes because they are on the same line with
some CSS code.
Look after fixing these how it looks:
.section1 { /* Working*/
background-color: #363b48;
color: blue;
height: 100px;
}
.section1 .text-center{ /* Working*/
color: #985475;
margin-top: 20px;
background-color: red;
}
.section1 img{ /* Working*/
width:20px;
}
DEMO
http://jsfiddle.net/a_incarnati/undmcszz/9/
I can't tell for sure, but I would bet the problem lies in portada.css as it is (presumably) available on your local env, but not on the online code editors.
Css rules have weight depending on specificity. Even when you supply new rules on top of older ones, the weightiest rule will be applied. See this site to help calculate specificity: http://specificity.keegan.st/
Your HTML should has the next code at the first lines:
<!DOCTYPE html>
<html>
<head>
I'm trying to apply a theme to my dart-polymer material-design application, everywhere I look at videos and tutorials, it is suggested that with a few lines of CSS you can change the look of the whole application.
I've even generated a theme just now using: http://www.materialpalette.com/grey/red and it gave me the following CSS:
/* Palette generated by Material Palette - materialpalette.com/grey/red */
.dark-primary-color { background: #616161; }
.default-primary-color { background: #9E9E9E; }
.light-primary-color { background: #F5F5F5; }
.text-primary-color { color: #212121; }
.accent-color { background: #FF5252; }
.primary-text-color { color: #212121; }
.secondary-text-color { color: #727272; }
.divider-color { border-color: #B6B6B6; }
... which I've included in my default stylesheet, but with no colour changes.
So if this is my custom polymer element:
<polymer-element name="main-app" class="default">
<template>
<style type="text/css">
:host {
display: block;
}
</style>
<core-toolbar class="default">
<paper-icon-button icon="menu"></paper-icon-button>
<span flex class="default">
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
</span>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
</core-toolbar>
</template>
<script type="application/dart" src="main-app.dart"></script>
</polymer-element>
And this is my index.html using that custom main-app component:
<!DOCTYPE html>
<head>
...
<link rel="import" href="packages/falm/main-app.html">
<link rel="stylesheet" href="styles.css">
</head>
<body unresolved>
<main-app class="default"></main-app>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
... what is the proper way to use the generated theme?
Am I suppose to add those css classes in manually everywhere?
Yes, you need to add the classes somewhere.
You can use the core-style element to reuse styles or you can add the styles to the main page (index.html) and prefix them with * /deep/ (like `* /deep/ .dark-primary-color) but still need to apply the classes to the elements.
Some resources about styling polymer elements
https://www.polymer-project.org/articles/styling-elements.html
https://www.polymer-project.org/docs/polymer/styling.html
https://www.polymer-project.org/docs/polymer/layout-attrs.html
I have made a textbox with an autocomplete in ASP.NET MVC 4, Javascript and JSON.
I want to give the autocomplete a nice layout, but it won't work.
There is a css-file jquery.ui-autocomplete.css automatically in the project.
This is the place where I fill the list
<li data-role="list-divider">Gemeente</li>
<li data-role="fieldcontain">
<div class="ui-widget">
<input type="text" name="Gemeente" class="ui-autocomplete"/>
</div>
</li>
This is the script I use:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('.ui-autocomplete').autocomplete({
source: '#Url.Action("AutocompleteGemeenten")'
});
</script>
This is the JSON-code I use:
public ActionResult AutocompleteGemeenten(string term)
{
List<string> items = new List<string>();
items = _zoekClient.GetGemeenten();
List<string> filteredItems = new List<string>();
filteredItems = items.Where(test => test != null && test.ToLower().Contains(term.ToLower())).ToList();
return Json(filteredItems, JsonRequestBehavior.AllowGet);
}
this is the css-file
.ui-autocomplete { position: absolute; cursor: default; }
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
list-style:none;
padding: 2px;
margin: 0;
display:block;
float: left;
}
.ui-menu .ui-menu {
margin-top: -3px;
}
.ui-menu .ui-menu-item {
margin:0;
padding: 0;
zoom: 1;
float: left;
clear: left;
width: 100%;
}
.ui-menu .ui-menu-item a {
text-decoration:none;
display:block;
padding:.2em .4em;
line-height:1.5;
zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
}
Can anyone help me changing the layout of the autocomplete?
thanks in advance
If you want to change the default styling of jQuery UI you have a few options.
1. Override the default css
CSS is evaluated in order of last declaration, which means the last defined rule wins. You add rules that override the styles defined in the jQuery UI style sheet. Add your rules in another CSS file and place a link to that file after the link to the jQuery UI CSS file
<link href="~/Content/jquery.css" rel="stylesheet" type="text/css" />
<link href="~/Content/overrides.css" rel="stylesheet" type="text/css" />
2. Add classes to your generated jQuery widget
jQuery has a method called addClass. You can define a CSS class with your style rules and then add that class to to jQuery widget
Define:
.myClass {
display:block;
float: left;
}
Add:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('.ui-autocomplete').addClass('myClass');
$('.ui-autocomplete').autocomplete({
source: '#Url.Action("AutocompleteGemeenten")'
});
});