I'm trying to add an image after the smart slider thumbnail active scrowller with CSS code as a pseudo element but isn't working
div#n2-ss-2 .nextend-thumbnail-default .nextend-thumbnail-scroller > div.n2-active {
cursor: default;
border: 3px solid #b3b3b3;
}
div#n2-ss-2 .nextend-thumbnail-default .nextend-thumbnail-scroller > div.n2-active::after {
cursor: default;
position: absolute;
bottom: -13px;
left: calc(50% - 20px);
height: 0;
width: 0;
border-color: #b3b3b3 transparent transparent;
border-style: solid;
border-width: 16px 18px 0;
content: url('https://.../wp-content/uploads/2018/09/drop-down-arrow_icon-icons.com_72774.svg');
display: inline-block;
z-index: 0;
}
Related
Here is my sample code.
Please find my working sample code here
I need to set triangle on right top corner in mat-dialog box - Angular.
I am getting top right corner triangle dialog box using static css on last row.
But here not able to get on each row on change request button click.
The below code is for the Dialog box Component
openDialog(Id, Currency, Amount, Reason, StatusDescription, payment, event) {
let targetAttr = event.target.getBoundingClientRect();
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.data = {
Id: Id,
Reason: Reason,
StatusDescription: StatusDescription
};
dialogConfig.position = {
top: targetAttr.y + targetAttr.height + 10 + "px",
left: targetAttr.x - targetAttr.width - 20 + "px"
};
dialogConfig.panelClass = ['my-panel','arrow-top'];
const dialogRef = this.dialog.open(EditingDialogComponent, dialogConfig);
dialogRef.afterClosed().subscribe(
data => {
console.log("Dialog output:", data)
}
);
}
The Below code is from style.scss
/* Add application styles & imports to this file! */
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
.my-panel {
overflow: hidden !important;
border-radius: 5px !important;
padding: 0px !important;
color: #fff;
}
.my-panel.arrow-top {
margin-top: 40px;
}
.my-panel.arrow-top:after {
content: " ";
position: absolute;
right: 100px;
top: 365px;
border-top: none;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid gray;
}
I am getting like this.
But I want dialog box with upper arrow on each row under change request button click event
I have two custom elements
<desktop-canvas id="desktop">
#shadow-root (open)
<desktop-window>
</desktop-window>
<desktop-canvas>
I'm trying to style <desktop-window> like so:
#desktop::shadow desktop-window {
background-color: red;
padding: 25px;
margin: 25px;
display: block;
}
But desktop-window dosen't receive the style. What am I doing wrong? The same syntax seems to be working in this codepen (not by me): https://codepen.io/matt-west/pen/FtmBL
As announced here...
Starting in Chrome 63, you cannot use the shadow-piercing selectors ::shadow and /deep/ to style content inside of a shadow root.
According to that page you are only affected if you use Shadow DOM v0 components. You either use the shady DOM polyfill, switch to Shadow DOM v1 components or place the styles inside the component and use :host:
var XProductProto = Object.create(HTMLElement.prototype);
XProductProto.createdCallback = function() {
var shadow = this.createShadowRoot();
var img = document.createElement('img');
img.alt = this.getAttribute('data-name');
img.src = this.getAttribute('data-img');
img.width = '150';
img.height = '150';
img.className = 'product-img';
shadow.appendChild(img);
img.addEventListener('click', function(e) {
window.location = this.getAttribute('data-url');
});
var link = document.createElement('a');
link.innerText = this.getAttribute('data-name');
link.href = this.getAttribute('data-url');
link.className = 'product-name';
shadow.appendChild(link);
var styleEl = document.createElement('style');
styleEl.innerHTML = `
:host .product-img {
cursor: pointer;
background: #FFF;
margin: 0.5em;
}
:host .product-name {
display: block;
text-align: center;
text-decoration: none;
color: #08C;
border-top: 1px solid #EEE;
font-weight: bold;
padding: 0.75em 0;
}`;
shadow.appendChild(styleEl);
};
var XProduct = document.registerElement('x-product', {
prototype: XProductProto
});
body {
background: #F7F7F7;
}
x-product {
display: inline-block;
float: left;
margin: 0.5em;
border-radius: 3px;
background: #FFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
font-family: Helvetica, arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
<x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></x-product>
<x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product>
<x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"></x-product>
CSS Scoping Module Level 1 provides an answer to: Why is the shadow host so weird?:
The shadow host lives outside the shadow tree, and its markup is in control of the page author, not the component author.
It would not be very good if a component used a particular class name internally in a shadow tree stylesheet, and the page author using the component accidentally also used the the same class name and put it on the shadow host. Such a situation would result in accidental styling that is impossible for the component author to predict, and confusing for the page author to debug.
When a user 'tabs over' to an input, I want the focus effect to be normally displayed, but on click, I don't want it to be visible.
User hits tab, now focussed on toggle button, I would like the toggle button to have slight glowing outline, which I'm currently able to do.
Now,
User clicks on the toggle button or it's associated label, toggle changes as usual,
BUT, I want the glow to never appear in the first place, or to disappear as quickly as possible.
I know about .blur(), and right now I'm having to use a setTimeout for a lazy fix, but I'd like to know if there's a better way to accomplish this, or if there's possibly a CSS only solution
I think a lot of front-end developers struggle to find a balance between aesthetics and the best-practices for accessibility. This seems like a great compromise.
Here's how I do it. The idea is to toggle outlining on when the user uses the tab key and turn it back off when they click.
JS
document.addEventListener('keydown', function(e) {
if (e.keyCode === 9) {
$('body').addClass('show-focus-outlines');
}
});
document.addEventListener('click', function(e) {
$('body').removeClass('show-focus-outlines');
});
Styles
body:not(.show-focus-outlines) button:focus,
body:not(.show-focus-outlines) [tabindex]:focus {
outline: none;
}
I'm currently doing something similar for my company. Unfortunately you must use JavaScript since CSS doesn't support this use case.
Here's what I've done.
var btns = document.querySelectorAll('button');
var onMouseDown = function (evt) {
evt.target.dataset.pressed = 'true';
};
var onMouseUp = function (evt) {
evt.target.dataset.pressed = 'false';
};
var onFocus = function (evt) {
var element = evt.target;
if (element.dataset.pressed !== 'true') {
element.classList.add('focus');
}
};
var onBlur = function (evt) {
evt.target.classList.remove('focus');
};
for(var i = 0, l = btns.length; i < l; i++) {
btns[i].addEventListener('mousedown', onMouseDown);
btns[i].addEventListener('mouseup', onMouseUp);
btns[i].addEventListener('focus', onFocus);
btns[i].addEventListener('blur', onBlur);
}
* { box-sizing: border-box; }
body { background-color: white; }
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-width: 100px;
margin: 0 1px;
padding: 12px 10px;
font-size: 15px;
color: white;
background-color: #646e7c;
border: none;
border-radius: 5px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
button:focus { outline: none; }
button:active {
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
transform: translateY(1px);
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
}
button.focus {
font-weight: bold;
}
button.primary { background-color: #2093d0; }
button.success { background-color: #71a842; }
button.danger { background-color: #ef4448; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button>Default</button>
<button class="primary">Primary</button>
<button class="success">Success</button>
<button class="danger">Danger</button>
</body>
</html>
Basically instead of relying on browser's native focus I add/remove a focus class on my button depending on the situation.
If you use the what-input.js plugin you can apply styles specifically for keyboard users. You can use the following code to highlight a button that has been tabbed to. I've found what-input to be a reliable plugin (comes bundled with Zurb Foundation) and is currently regularly maintained.
// scss
body[data-whatinput="keyboard"] {
button {
&:focus {
// other highlight code here
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
}
}
or
/* vanilla css */
body[data-whatinput="keyboard"] button:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
i am working in extjs4. i have view with ganttChart. I want to change color of splitter line which is between treecolumn and gantt. i am creating gantt as=
var gantt = Ext.create("Gnt.panel.Gantt", {
itemId :'project-list-gantt-chart',
cls : 'projectlistganttchart',
enableTaskDragDrop: false,
columnLines :true,
lockedGridConfig :{
split: false
},
viewPreset : 'customPreset',
columns : [{
xtype : 'treecolumn',
sortable: true,
dataIndex: 'Name',
}],
And i am including this gantt in my following form panel=
Ext.define('GanttChart' ,{
extend: 'Ext.form.Panel',
border: false,
})
By using panel's add method i am including it as-
afterrender : function(){
var me = this;
me.add(gantt);
}
So for changing color, i change css as-
.x-panel-default{
border-color: red;
padding: 0;
}
But its changing color of all panels within my project. So how to override this css so that it will change color of only gantt.
Use the ui cfg param for that:
// add this config line to your panel that host the gantt
ui: 'gantt'
and add this css
.x-panel-gantt{
border-color: red;
padding: 0;
}
Note that the ui is meant for exactly such things.
You might want to refer to this fiddle. Note that it may miss some css classes but I guess it should show you the trick. And please note that you will need to set the border in a correct way because based on the theme the border might be 0px. That is also done in the example. In addition here is the demo code:
Javascript
Ext.create('Ext.panel.Panel', {
title: 'test',
height: 200,
width: 200,
ui: 'custom',
renderTo: Ext.getBody()
})
CSS (just copied from developer tools)
.x-panel-body-custom {
color: black;
font-size: 13px;
font-size: normal;
}
.x-panel-custom{
border: 1px solid red;
padding: 0;
}
.x-panel-body-custom {
background: white;
border-color: #157fcc;
color: black;
font-size: 13px;
font-size: normal;
border-width: 1px;
border-style: solid;
}
.x-panel-header-custom {
background-image: none;
background-color: #157fcc;
}
.x-panel-header-custom-horizontal-noborder {
padding: 10px 10px 10px 10px;
}
.x-panel-header-custom-horizontal {
padding: 9px 9px 10px 9px;
}
You can use id of the component(panel) itself or any top level id of the component in which the panel is rendered like
#toplevelid .x-panel-default{
border-color: red;
padding: 0;
}
You should be able to get your gantt item and change the css class of it using something like:
var ganttItem = Ext.getCmp('your item id');
ganttItem.addCls('your css class for specifc color');
I haven't tested this but you can get the idea.
If you want to reset the css class for the item use .setCls() to set it up from scratch.
I am using Zurb Foundation 5 with Sass mixins and I want to change the style of the dropdown arrow. I am pretty confident that it lies somewhere inside of here but I'm not sure what it is:
// Dropdown Buttons
// $include-html-button-classes: $include-html-classes;
// We use these to set the color of the pip in dropdown buttons
// $dropdown-button-pip-color: #fff;
// $dropdown-button-pip-color-alt: #333;
// $button-pip-tny: rem-calc(6);
// $button-pip-sml: rem-calc(7);
// $button-pip-med: rem-calc(9);
// $button-pip-lrg: rem-calc(11);
// We use these to style tiny dropdown buttons
// $dropdown-button-padding-tny: $button-pip-tny * 7;
// $dropdown-button-pip-size-tny: $button-pip-tny;
// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3;
// $dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1);
// We use these to style small dropdown buttons
// $dropdown-button-padding-sml: $button-pip-sml * 7;
// $dropdown-button-pip-size-sml: $button-pip-sml;
// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3;
// $dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1);
// We use these to style medium dropdown buttons
// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3);
// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3);
// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5;
// $dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2);
// We use these to style large dropdown buttons
// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3);
// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5;
// $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3);
Here is what I have:
And I want the dropdown arrow to look more like this:
How can I achieve this? Thanks in advance!
===== EDIT =====
With this scss:
.dropdown.button:before{
width: 15px;
height: 15px;
border: none;
background: url("../images/dropdown.png") no-repeat;
}
And this html:
fake#emailaddress.com<br>
<ul id="drop" data-dropdown-content class="f-dropdown">
The button looks like this:
How do I move the arrow now?
Updated jsfiddle:http://jsfiddle.net/Y4jDW/
There is no default arrow фы in your example, but you can overwrite Foundation's styles. Simply add these styles:
.dropdown.button:before{
width: 10px; //width of your arrow
height: 10px; //height of your arrow
border: none;
background: url(...) no-repeat; //url for image
}
You can find the class in css/foundation.css line:1261
This is the original code :
.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: rgba(168, 168, 168, 1) transparent transparent transparent;
border-top-style: solid;
margin-top: -2.5px;
top: 22.5px; }
You can try this :
.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 10px;
height: 10px;
border: none;
background-image: url(img/arrow.png) no-repeat;
margin-top: -2.5px;
top: 22.5px; }
Good luck !