How can I add the following styling to my JavaScript using styled-components?
* {
box-sizing: border-box;
}
.cf:before,
.cf:after {
content: ' ';
display: table;
}
.cf:after {
clear: both;
}
Related
My vue app is shared between web page and electron app on touch device. On this touch device I want to include extra style. So in my App.vue there is:
<script>
var is_electron = process.hasOwnProperty("versions") && process.versions.hasOwnProperty("electron")
var is_embedded = is_electron && require("electron").remote.process.argv.includes("-e")
</script>
<style>
* {
transition-property: none !important;
transform: none !important;
animation: none !important;
cursor: none !important;
}
</style>
How can I conditionally include this * style ?
If the platform-specific styling is minimal, I would suggest to use some helper classes. You can even style subcomponents by scoping the css within one of these selectors.
<template>
<main :class="classes">
<!-- Hello world -->
</main>
</template>
<script>
var isElectron = process.hasOwnProperty("versions") && process.versions.hasOwnProperty("electron")
var isEmbedded = isElectron && require("electron").remote.process.argv.includes("-e")
export defualt {
name: 'App',
computed: {
classes () {
return {
electron: isElectron,
embedded: isEmbedded
}
}
}
}
</script>
<style>
.electron:not(.embedded) * {
border: 1px solid blue;
}
.embedded:not(.electron) * {
/* What kind of sorcery is this? */
}
.electron.embedded * {
border: 1px dotted red;
}
main:not(.electron):not(.embedded) * {
border: 1px dashed green;
}
</style>
I'm using free-jqGrid 4.13.5 and selectize 0.12.4.
I'm trying to apply selectize on my dropdowns in inline edit. But only one value is displayed in the dropdown.
editoptions: {
value: "FE:FedEx;TN:TNT;IN:Intime",
defaultValue: "Intime",
dataInit: function(element) {
$(element).selectize();
}
It works if I'm using select2, instead of selectize.
Fiddle: https://jsfiddle.net/henrik79/90hj0wd9/
The main problem seems to be the parent of drop-down of selectize. To fix the problem I suggest you to use dropdownParent: "body" option:
dataInit: function(element) {
$(element).selectize({
dropdownParent: "body"
});
}
The fixed demo https://jsfiddle.net/OlegKi/90hj0wd9/2/ uses the changes. I added some other CSS properties to improve the look of the results:
.selectize-dropdown-content {
font-size: 11px;
font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif
}
.selectize-input {
min-height: 1.7em;
}
.selectize-input {
padding: .4em .3em;
}
.DataTD .selectize-control {
height: 24px;
}
.ui-jqgrid tr.jqgrow > td {
border-color: inherit;
}
Im using the gulp-svg-sprite plugin.
https://github.com/jkphl/gulp-svg-sprite
https://github.com/jkphl/svg-sprite
I already have my classes and styles which I would like to sprite:
.header {
background: grey;
&:after {
content: "";
display: block;
height: 30px;
width: 30px;
background: url(images/icon1.svg);
}
}
This is my gulp task:
spriteConfig = {
mode : {
css : {
bust : true,
render : {
scss : true
}
}
}
};
gulp.task('sprite', function() {
gulp.src('images/svg/*.svg')
.pipe(svgSprite(spriteConfig))
.pipe(gulp.dest('dest/'));
});
The task generates this type of SASS:
%svg-common {
background: url("svg/sprite.css-c3700f6a.svg") no-repeat;
}
.svg-icon1 {
#extend %svg-common;
background-position: 50% 0;
}
.svg-icon1-dims {
width: 1024px;
height: 348px;
}
This isnt ideal as I need to import these svg- classes which I wont use on there own, and I then need to use 2 extends:
.header {
background: grey;
&:after {
content: "";
display: block;
#extend .svg-icon1;
#extend .svg-icon1-dims;
}
}
Is there a way of generating mixins instead so I could jsut have something like:
.header {
background: grey;
&:after {
content: "";
display: block;
#include svg-icon1;
}
}
As per the docs:
It comes with a set of Mustache templates for creating stylesheets in
good ol' CSS or one of the major pre-processor formats (Sass, Less and
Stylus). Tweaking the templates or even adding your own custom output
format is really easy, just as switching on the generation of an HTML
example document along with your sprite.
Have a look and customize the following file:
https://github.com/jkphl/svg-sprite/blob/master/tmpl/css/sprite.scss
Danny H was correct. Here is my code. Notice that ive also used a prefix in my spriteConfig.
spriteConfig = {
mode : {
css : {
bust : true,
prefix : "#mixin sprite-%s",
render : {
scss: {
template: 'sprite.scss.handlebars'
}
}
}
}
};
In sprite.scss.handlebars:
{{#hasMixin}}#mixin {{mixinName}} {
background: url("{{{sprite}}}") no-repeat;
}
{{#hasCommon}}.{{commonName}} {
#include {{mixinName}};
}
{{/hasCommon}}{{/hasMixin}}{{^hasMixin}}{{#hasCommon}}.{{/hasCommon}}{{^hasCommon}}#mixin {{/hasCommon}}{{commonName}} {
background: url("{{{sprite}}}") no-repeat;
}
{{/hasMixin}}{{#shapes}}{{#selector.shape}}{{expression}}{{^last}},
{{/last}}{{/selector.shape}} {
{{^hasCommon}}{{#hasMixin}}#include {{mixinName}};{{/hasMixin}}{{^hasMixin}}#include {{commonName}};{{/hasMixin}}
{{/hasCommon}}background-position: {{position.relative.xy}};{{#dimensions.inline}}
width: {{width.outer}}px;
height: {{height.outer}}px;{{/dimensions.inline}}
width: {{width.outer}}px;
height: {{height.outer}}px;
}
{{/shapes}}
I've been searching for a way to do this effect: http://www.discovershadow.com/
Especially the iPhone reveal part at the bottom where the iPhone stays but the content inside changes at the same time as the background.
Can this be achieved with only css or is it something much more complicated?
This is the way that I found to do this... no one seemed interested in the question but I hope you like the answer:
<html>
<head>
<style>
html, body {
min-height: 100%;
margin: 0;
padding: 0;
}
#container {
height: 100%;
width: 100%;
overflow-y: scroll;
position: fixed;
}
.items {
width: 100%;
height: 102%;
background-attachment: fixed;
background-position: 50%;
background-repeat: no-repeat;
position: relative;
}
#box1 {
background-image: url(yourimage1.png);
background-color: #03F;
}
#box2 {
background-image: url(yourimage2.png);
background-color: #609;
}
#box3 {
background-image: url(yourimage3.png);
background-color: #3C0;
}
</style>
</head>
<body>
<div id="container">
<div class="items" id="box1"></div>
<div class="items" id="box2"></div>
<div class="items" id="box3"></div>
</div>
</body>
</html>
Yes can achieve that... You have not added any code or not even tried i think. Here is simple code for you to get you started.
.a
{
background-image : url('http://hdwallpaper2013.com/wp-content/uploads/2013/02/Beautiful-Nature-Images-HD-Wallpaper.jpg');
height: 200px;
width: 100%;
position: fixed;
}
p
{
color : #000;
font-size: 72px;
position: relative;
z-index: 999;
}
fiddle
This effect does require CSS + Javascript, there is no way to do it effectively without using these technologies. You could have the iPhone centred on screen and the rest of the screen move around it but it wouldn't create such as nice effect as seen on the website.
I would personally recommend looking at the source of the target website and investigate yourself how it was achieved, never hurts to have a sneek peek at source from other websites.
Looking at that sites script.js page they handle scrolling with
// handle scrolling
$window.scroll(function() {
handleScroll();
});
Which does this. You will need to look at the full code to work out exactly how its done.
// handle scroll
function handleScroll() {
scrolledWin = getPageScroll();
$body.addClass('scrolling');
// show logo
if((scrolledWin * 1.5) > winH) {
$body.addClass('content');
}
// show navigation
if(scrolledWin > 50) {
$body.addClass('scrolled');
}
// app img animation
if(topOff >= scrolledWin) {
$appImg.removeClass('sticky');
} else {
$appImg.addClass('sticky');
}
if(topOff2 >= scrolledWin) {
$appImg2.removeClass('sticky');
} else {
$appImg2.addClass('sticky');
}
// fix navigation issue on top scroll
if ((scrolledWin > -(winH - (winH * (f1 *0.8)))) && $('#hook2').hasClass('inViewport')) {
$nav.attr("class", "").addClass('a2');
} else if ($('#hook2').hasClass('inViewport')) {
$nav.attr("class", "").addClass('a1');
}
//fix navigation issue between how it works and next section
if ($s9.hasClass('inViewport')) {
if ($('#hook5').hasClass('inViewport')) {
$nav.attr("class", "").addClass('a5');
} else {
$nav.attr("class", "").addClass('a4');
}
}
//fix navigation issue between Experts and next section
if ($sExperts.hasClass('inViewport')) {
if ($('#hook6').hasClass('inViewport')) {
$nav.attr("class", "").addClass('a6');
} else {
$nav.attr("class", "").addClass('a5');
}
}
}
Ref: http://www.discovershadow.com/js/script.js?v=2.14
I'm looking for a solution to use a mixin for browser-specific CSS hacks.
I'm using JavaScript to add the browser tag in the HTML class. Like .ie .ie7 .ie8 .ie9
I would like to use the mixin like:
.box-test {
margin: 10px;
#include browser(ie7) {
margin: 20px;
}
}
DESIRED OUTPUT:
.box-test {
margin: 10px;
}
.ie7 .box-test {
margin: 20px;
}
the mixin i tried to make:
#mixin browser($browserVar) {
#if $browserVar == ie7 {
.ie7 { #content }
}
#else if $browserVar == ie8 {
.ie8 { #content; }
}
#else if $browserVar == ie9 {
.ie9 { #content; }
}
}
the problem is the output is:
.box-test {
margin: 10px; }
.box-test .ie7 {
margin: 20px; }
The absolute simplest mixin would be like so:
#mixin legacy-ie($ver: 7) {
.ie#{$ver} & {
#content;
}
}
Output:
.baz {
background: #CCC;
#include legacy-ie {
background: black;
}
}
If you wanted to emit styles that work for multiple IE versions at once without duplication, then this would be one way to do it:
$default-legacy-ie: 7 8 9 !default;
#mixin legacy-ie($versions: $default-legacy-ie) {
$sel: ();
#each $v in $versions {
$sel: append($sel, unquote('.ie#{$v} &'), comma);
}
#{$sel} {
#content;
}
}
.foo {
background: red;
#include legacy-ie {
background: green;
}
}
.bar {
background: yellow;
#include legacy-ie(7 8) {
background: orange;
}
}
Output:
.foo {
background: red;
}
.ie7 .foo, .ie8 .foo, .ie9 .foo {
background: green;
}
.bar {
background: yellow;
}
.ie7 .bar, .ie8 .bar {
background: orange;
}
If you want to be able to suppress all of the IE kludges all you need to add is one variable and an #if block:
$enable-legacy-ie: true !default;
#mixin legacy-ie($ver: 7) {
#if $enable-legacy-ie {
.ie#{$ver} & {
#content;
}
}
}
Set $enable-legacy-ie to false at the top of the file you don't want to have the IE specific styles, set it to true if you do want the styles included. You could easily write a reverse mixin to hide styles that old IE can't make use of so that the IE specific file stays nice and small.
You're overcomplicating things. :) It could be as simple as that:
.box-test {
margin: 10px;
.ie-7 & {
margin: 20px; } }
Result:
.box-test {
margin: 10px;
}
.ie-7 .box-test {
margin: 20px;
}
I have tried adding mixin for "#-moz-document url-prefix()" FF hack but it was not recognized by SASS and SASS was throwing error. so I think better solution is to create _hack.sass file and add css hacks which will not be compiled by SASS. I include this file whenever required.
#import "hack";
I am adding answer this as I feel it will be useful to someone who is struggling to get mozilla/safari hack works.