I am using a number of Pseudo elements throughout a website I am building. They all look great except in IE. I am testing it in IE 10 and 11 to start off with.
For some reason the positioning is always slightly off - in the example below, about 5 px for each element.
I have tried changing the display and positions, setting the origins, but nothing seems to work.
Any help would be appreciated.
.home .welcome-row h1 {
position: relative;
margin-bottom: 0;
}
.home .welcome-row h1:before {
background-image: url('/wp-content/uploads/2017/10/welcome-line-1.png');
-webkit-transform: translateY(-23px);
-moz-transform: translateY(-23px);
-o-transform: translateY(-23px);
transform: translateY(-23px);
background-size: 260px 13px;
background-repeat: no-repeat;
width: 260px;
height: 13px;
content:"";
position: absolute;
display: block;
}
.home .welcome-row h1:after {
background-image: url('wp-content/uploads/2017/10/welcome-line-2.png');
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
background-size: 260px 13px;
background-repeat: no-repeat;
width: 260px;
height: 13px;
content:"";
position: absolute;
display: block;
}
*EDIT - I have added any additional theme styles that are applied incase they have any relevance.
*:after,
*:before {
box-sizing:border-box
}
:-webkit-any(article,aside,nav,section) h1 {
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}
user agent stylesheet
h1 {
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
h1 {
margin: 0;
padding: 0;
}
Related
I would like to customize this answer from a api. I tried with css grid but cant do it. I don't know if I am adding classes well
#import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
.image-grid{
--gap: 16px;
--num-cols: 5;
--row-height: 500px;
box-sizing: border-box;
padding: var(--gap);
display: grid;
grid-template-columns: repeat(var(--num-cols),1fr);
grid-auto-rows: var(--row-height);
gap: var(--gap);
}
.image-grid > img {
width: 100%;
height: 100%;
object-fit: cover;
}
#media screen and (max-width: 1024px) {
.image-grid {
--num-cols: 2;
--row-height: 150px;
}
}
tabs with remove icon(X) shows as white in desktop , when I opened the same view in phone /ipad icon(X) shows in red
Please advise
I change using FontAwesome icon.
:host /deep/ .nav-link .bs-remove-tab {
position: relative;
font-size: 0em;
}
:host /deep/ .nav-link .bs-remove-tab::after {
content: "\f00d";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
/*--adjust as necessary--*/
color: #F44336;
font-size: 13px;
// padding-right: 0.3em;
left: 0.3em;
position: relative;
top: 2px;
}
You can access the css component:
:host /deep/ .nav-link .bs-remove-tab {
background: blueviolet !important;
}
Today I have noticed a weird behavior of Safari (9.0) when I applied a transition to an element that was translating on the X axis while the width was also increasing.
I have reproduced the behavior in this JsFiddle. Here is an embed code for those who like it better. In Firefox and Chrome it looks pretty smooth but not in Safari, does anyone have a solution or a best way to achieve the same effect?
var button = document.getElementsByTagName('button')[0],
container = document.getElementsByTagName('div')[0];
button.addEventListener('click', function() { container.classList.toggle('open'); });
.container {
width: 100%;
overflow: hidden;
}
ul {
display: block;
width: 100%;
padding: 0;
margin: 0;
transition: width 1s, transform 1s;
}
.open ul {
width: 200%;
transform: translateX(-50%);
}
li {
/* Just some style first */
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
background-color: red;
padding: 1em 0;
display: inline-block;
width: calc(50% - 4px);
}
li:first-child {
background-color: green;
}
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
Re-posting as an answer.
Here is the jsFiddle result and snippet as below:
var button = document.getElementsByTagName('button')[0];
var container = document.getElementsByTagName('div')[0];
var timeline = new TimelineMax({ paused: true });
timeline.to('ul', 1, { width: '200%', xPercent: -50, ease: Power2.easeInOut });
button.addEventListener('click', function() {
timeline.progress() > 0 ? timeline.reverse() : timeline.play();
});
.container {
width: 100%;
overflow: hidden;
}
ul {
display: block;
width: 100%;
padding: 0;
margin: 0;
}
li {
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
background-color: red;
display: inline-block;
padding: 1em 0;
width: calc(50% - 4px);
}
li:first-child {
background-color: green;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
Hope this is helpful.
P.S. I have been using GSAP for quite a while now and I don't remember getting stuck on any browser-specific issues unless a browser would do something differently. A little research into GSAP and it would tell you that browser compatibility is one of their main selling points.
By animating margin-left instead of translateX the result is acceptable in Safari:
var button = document.getElementsByTagName('button')[0],
container = document.getElementsByTagName('div')[0];
button.addEventListener('click', function() {
container.classList.toggle('open');
});
.container {
width: 100%;
overflow: hidden;
}
ul {
display: block;
width: 100%;
padding: 0;
margin: 0;
transition: width 1s, margin-left 1s;
}
.open ul {
width: 200%;
margin-left:-100%;
}
li {
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
background-color: red;
display: inline-block;
padding: 1em 0;
width: calc(50% - 4px);
}
li:first-child {
background-color: green;
}
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
Using scaleX instead of animating width is smoother, but probably not what you want.
var button = document.getElementsByTagName('button')[0],
container = document.getElementsByTagName('div')[0];
button.addEventListener('click', function() {
container.classList.toggle('open');
});
.container {
width: 100%;
overflow: hidden;
}
ul {
display: block;
width: 100%;
padding: 0;
margin: 0;
transition: transform 1s;
}
.open ul {
transform: translateX(-50%) scaleX(2);
}
li {
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
background-color: red;
display: inline-block;
padding: 1em 0;
width: calc(50% - 4px);
}
li:first-child {
background-color: green;
}
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
So, I will try to sum up the two best solutions here : one with CSS transform and the other with Javascript animation (GSAP).
CSS TRANSFORM
In terms of performance, it is recommended to only animate transforms (translate, scale, rotate) and opacity. If you are interested in more optimisation details you can have a look at this article by Anna Migas.
So, as #Meiko suggested, the best solution is to only animate scale and translate properties. Here is a code sample (and the JSFiddle)
var button = document.getElementsByTagName('button')[0],
container = document.getElementsByTagName('div')[0];
button.addEventListener('click', function() {
container.classList.toggle('open');
})
.container,
ul {
width: 100%;
}
ul {
overflow: hidden;
/* reset default browser styles */
padding: 0;
margin: 0;
}
li {
display: inline-block;
width: calc(50% - 2px);
position: relative;
transition: transform 1s;
/* Just some style */
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
padding: 1em 0;
}
li::before {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: red;
z-index: -1;
transition: transform 1s;
}
li:first-child::before {
background-color: green;
}
.open li:first-child {
transform: translateX(-100%);
}
.open li:nth-of-type(2) {
transform: translateX(-50%);
}
.open li:nth-of-type(2)::before {
transform: scaleX(2);
}
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
PROS:
Only use a tiny bit of Javascript to toggle class,
The browser support is quite good (needs vendor-specific properties and some testing),
Really fast and light on GPU memory.
CONS:
Pretty limited in terms of usage (the actual width of the second cell stays the same),
Needs more lines of CSS.
JS ANIMATION (WITH GSAP)
This solution has been suggested by #Tahir Ahmed and use the GSAP library. As a side note, I really think that this is the best js library out there for this kind of animation. Here is a snippet of how it works (and the JSFiddle):
var button = document.getElementsByTagName('button')[0],
timeline = new TimelineMax({ paused: true });
timeline.to('ul', 1, { width: '200%', xPercent: -50 });
button.addEventListener('click', function() {
timeline.progress() > 0 ? timeline.reverse() : timeline.play();
})
.container {
width: 100%;
overflow: hidden;
}
ul {
width: 100%;
/* reset default browser styles */
padding: 0;
margin: 0;
}
li {
display: inline-block;
width: calc(50% - 2px);
background-color: red;
/* Just some style */
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
padding: 1em 0;
}
li:first-child {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
PROS:
Really flexible, sky is the limit!
You can animate properties such as display (you can't in CSS),
Compatible with every browser out there (down to IE6).
CONS:
Require a third party library (about 30kb),
Seems a bit harder for the GPU (although it needs more testing to be sure).
In the end it really depends on the animation you need but if it get's a little bit more complex than moving a container around then I will choose GSAP.
I'm working with this ComponentView example:
Kitten ComponentView
In my variation, I'd like to highlight the selected row when the user taps on it, as would happen in an xtype: 'list'. How can I accomplish this?
You can achieve this by using an tpl property and then set the class of the css inside the <div> tag
Something like this,
....
xtype: 'list',
tpl: '<div class="clickedItem"> ...'
....
and then write your css code as,
.clickedItem{
background: // some color value;
text-shadow: // some color value;
}
After examining the Sencha Kiva example in their examples directory,
it looks like it's a combination of the .x-dataview-UI_NAME class with .x-list-item, where UI_NAME is defined is the dataview view config. In the Kiva example, it's the line 'ui: loans'.
So, the CSS section looks something like this:
.x-dataview-loans .x-list-item {
...
}
Defining the UI suffix in the view:
Ext.define('Kiva.view.LoansList', {
extend: 'Ext.DataView',
xtype : 'loanslist',
requires: [
'Kiva.view.LoansListItem'
],
config: {
ui : 'loans',
store: 'Loans',
useComponents: true,
defaultType: 'loanslistitem',
deselectOnContainerClick: false
},
onItemTap: function(container, target, index, e) {
var me = this;
me.callParent(arguments); // WARNING: without this call, the row will not become selected
}
The relevant code in application.css
.x-dataview-loans .x-img {
margin-right: 1em;
background-position: center center;
width: 60px;
height: 60px
}
.x-dataview-loans .x-list-item {
padding: 1em;
border-bottom: 1px solid #e1e1e1;
-webkit-transition: linear .2s background
}
.x-dataview-loans .x-list-item .name div {
font-weight: bold
}
.x-dataview-loans .x-item-selected {
background: #fff
}
.x-dataview-loans .completion {
display: -webkit-box;
display: box;
-webkit-box-align: center;
box-align: center
}
.x-dataview-loans .completion .x-innerhtml {
display: -webkit-box;
display: box;
-webkit-box-align: stretch;
box-align: stretch;
height: 1em;
width: 100%;
border: 1px solid #bbb;
-webkit-box-shadow: inset 0 0 1px #fff;
padding: 1px;
-webkit-border-radius: 1em;
border-radius: 1em;
background-color: #e2e2e2;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c9c9c9), color-stop(10%, #d5d5d5), color-stop(65%, #e2e2e2), color-stop(100%, #e3e3e3));
background-image: -webkit-linear-gradient(#c9c9c9, #d5d5d5 10%, #e2e2e2 65%, #e3e3e3);
background-image: linear-gradient(#c9c9c9, #d5d5d5 10%, #e2e2e2 65%, #e3e3e3)
}
.x-dataview-loans .completion .x-innerhtml .bar {
min-width: 1em;
border: 1px solid #4b9123;
-webkit-border-radius: 1em;
border-radius: 1em;
background-color: #74b446;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c6e1b2), color-stop(2%, #87c05e), color-stop(100%, #639a3c));
background-image: -webkit-linear-gradient(#c6e1b2, #87c05e 2%, #639a3c);
background-image: linear-gradient(#c6e1b2, #87c05e 2%, #639a3c)
}
I have 2 inline divs inside a parent div:
.parent {
width: 200px;
height: 200px;
}
.div1 {
float: left;
width: 10px;
height: 10px;
background-color: blue;
}
.div2 {
position: relative;
height: 100%;
width: 100%;
right: 0px;
float: left;
background-color: red;
}
The problem is that div2 inherits the width of the parent div instead of the remaining width (i.e. 190px) and ultimately div2 ends up below div1.
Here is an example using jsfiddle: http://jsfiddle.net/jZBE6/
How can I make div2 have a width of 190px without setting a static width?
You could do it this way:
.parent{
width:200px;
height:200px;
}
.div1 {
float: left;
width:10px;
height:10px;
background-color:blue;
}
.div2{
height:100%;
width:90%;
float:left;
background-color:red;
}
You could also do it without floating the right div (this is the way I would prefer):
.parent{
width:200px;
height:200px;
}
.div1 {
float: left;
width:10px;
height:10px;
background-color:blue;
}
.div2{
height:100%;
width:100%;
margin-left:10px;
background-color:red;
}
in case you really want a dynamic width (not just 10px case), you can't use css. But you can use javascript to set width dynamically http://jsfiddle.net/jZBE6/19/