I have this styles code which allows me to use media queries in react-native-web:
landscapePackshotHolder: {
boxSizing: 'border-box',
width: 'calc(20% - (8% - 10px)/5)',
padding: '0 10px',
[`#media (max-width: ${Breakpoint.SM}px)`]: {
width: 'calc(50% - (40px - 6px)/2)',
paddingHorizontal: 6,
},
[`#media (min-width: ${Breakpoint.SM + 1}px) and (max-width: ${Breakpoint.MD}px)`]: {
width: 'calc(33.3333333333% - (40px - 6px)/3)',
paddingHorizontal: 6,
},
[`#media (min-width: ${Breakpoint.MD + 1}px) and (max-width: ${Breakpoint.XL}px)`]: {
width: 'calc(25% - (96px - 8px)/4)',
paddingHorizontal: 8,
},
},
This leads me to assume I can also use pseudoclasses like hover because of the ability to add regular CSS to the typescript react native stylesheet, but this code using &:hover does not work:
landscapePackshotHolder: {
boxSizing: 'border-box',
width: 'calc(20% - (8% - 10px)/5)',
[`&:hover`]: {
width: 'calc(2% - (8% - 10px)/10)',
},
padding: '0 10px',
[`#media (max-width: ${Breakpoint.SM}px)`]: {
width: 'calc(50% - (40px - 6px)/2)',
paddingHorizontal: 6,
},
[`#media (min-width: ${Breakpoint.SM + 1}px) and (max-width: ${Breakpoint.MD}px)`]: {
width: 'calc(33.3333333333% - (40px - 6px)/3)',
paddingHorizontal: 6,
},
[`#media (min-width: ${Breakpoint.MD + 1}px) and (max-width: ${Breakpoint.XL}px)`]: {
width: 'calc(25% - (96px - 8px)/4)',
paddingHorizontal: 8,
},
},
I want to avoid using onMouseEnter... because the use of state seems unnecessary, I have seen the node.setNativeProps() method mentioned but after trying it does not appear to work either.
How can I use the hover css pseudoclass in react-native-web?
Related
I want to create my own bootsrap with flexbox.It is something like this:
.df {
display: flex;
}
.aic {
align-items: center;
}
.jcc {
justify-content: center;
}
.jcsb {
justify-content: space-between;
}
.fdc {
flex-direction: column;
}
.fx1 {
flex: 1;
}
But there is also one thing I would like to realize,that's dynamic classes for margins and paddings and etc.Something like:
.mr-40 {
margin-right: 40;
}
So i want to this value (40) to be dynamic (1,5,100 and so on).Is there a way to realize this in SCSS/SASS?
This is just a quick implementation:
#use "sass:map";
$utils: (
"padding": (
"className": p,
"property": padding,
"values": 0 10 20 30 40 50 60 70 90 100,
),
"margin": (
"className": m,
"property": padding,
"values": 0 10 20 30 40 50 60 70 90 100,
),
);
#each $key, $values in $utils {
#each $cValue in map.get($values, "values") {
.#{map.get($values, "className")}-#{$cValue} {
#{map.get($values, "property")}: $cValue + "px";
}
}
}
.p-0 {
padding: "0px";
}
.p-10 {
padding: "10px";
}
.p-20 {
padding: "20px";
}
// ...
.m-0 {
padding: "0px";
}
// ...
I want to create a round Button for profile pic in React Native, but it did not work. The button should be round and clickable, and should have a pmg image inside it. What am I doing wrong here?
I used a blue background image, then on top op it TouchableOpacity wrapper for holding the image as button.
const Main = () => {
return (
// Container
<View style={styles.container} >
<ImageBackground
source={require('../images/background.png')}
style={styles.backgroundImage}>
<View>
<TouchableOpacity style={styles.profileButton}>
<Image source={require('../images/profilePicture/boy.png')} />
</TouchableOpacity>
</View>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
// paddingTop: '6%',
flex: 1,
},
backgroundImage: {
flex: 1,
resizeMode: "cover",
width: '100%',
height: '100%',
},
topBar: {
height: '40%',
// color : 'red',
// flex: 1,
// alignItems: 'stretch'
},
profileButton: {
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.2)',
alignItems: 'center',
justifyContent: 'center',
width: '13%',
height: 50,
// backgroundColor: '#fff',
borderRadius: 50,
},
});
export default Main;
Be sure to add image dimensions. Lol. I completely forgot that:
profileButton: {
borderWidth: 1,
// borderColor: 'rgba(0,0,0,0.2)',
width: '13%',
height: 50,
backgroundColor: '#fff',
borderRadius: 50,
padding: '1%',
margin: '1%',
},
profileImage: {
height: undefined,
width: undefined,
flex: 1
},
My sass file looks like this when I use my mixin:
$viewports: 25 50 75 100;
#each $viewport in $viewports {
.vh-#{$viewport} {
height: #{$viewport}vh;
}
}
.vh-25 {
height: 25vh;
}
...
But I want that class and the class with the #sm, #md, …
Can I do that with sass?
#media (min-width: 576px) and (max-width: 767px) {
.vh-25#sm {
height: 25vh;
}
}
# is not allowed in class name, but if you want to replace it with -:
$viewports: (
xs: 25,
sm: 50,
md: 75,
xl: 100,
);
#each $viewport, $height in $viewports {
.vh-#{$height}-#{$viewport} {
height: #{$height}vh;
}
}
I'm trying to position qTips under a div, as shown above. The tips are the same width as the container that holds the targets (A, B, C). I'm trying to get the tip to position itself directly below the container, but I want the corner to position itself relative to the target.
How do I configure qTip2 to get this alignment?
Target B is straightforward...
position: {
my: 'top center',
at: 'bottom center'
},
style: {
width: 350,
tip: {
height: 10,
width: 12
}
},
but Targets A and C are giving me trouble
If I add some style.tip configs for Target A:
position: {
my: 'top center',
at: 'bottom center'
},
style: {
width: 350,
tip: {
height: 10,
width: 12,
corner: 'top left',
mimic: 'center'
}
},
the corner is not positioned under the center of the target... it's off to the left side
If I add a tip.offset, then the corner appears to be offset correctly, but the entire tip is shifted by an equal amount, no longer aligned with the container.
position: {
my: 'top center',
at: 'bottom center'
},
style: {
width: 350,
tip: {
height: 10,
width: 12,
corner: 'top left',
mimic: 'center',
offset: 60 // about half the width of Target A
}
},
How do I configure qTip2 to get this tip aligned with the container, and the corner aligned with the target?
Here's how I solved it:
for Target A
position: {
my: 'top center',
at: 'bottom center'
},
style: {
width: 350,
tip: {
height: 10,
width: 12,
offset: -120 // offset from the center
}
},
for Target B
position: {
my: 'top center',
at: 'bottom center'
},
style: {
width: 350,
tip: {
height: 10,
width: 12,
offset: 120 // offset from the center
}
},
I've got an existing NodeJS express / AngularJS application that I need to make play nicely with Zurb foundation and in particular I am having problems with SASS.
The application was initially created with the yeoman angular generator.
I have installed zurb foundation via bower and the css side of things works fine. I can't however get the sass to compile properly. I seem to end up with missing parts of the css so there's virtually no styling present. The stylesheet is injected etc. and there's no errors as such when I build it.
My gruntfile looks like this (consolidated).
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
yeoman: {
client: require('./bower.json').appPath || 'client',
dist: 'dist'
},
express: {
...
},
watch: {
injectJS: {
files: [
'<%= yeoman.client %>/{app,components}/**/*.js',
'!<%= yeoman.client %>/{app,components}/**/*.spec.js',
'!<%= yeoman.client %>/{app,components}/**/*.mock.js',
'!<%= yeoman.client %>/app/app.js'],
tasks: ['injector:scripts']
},
injectCss: {
files: [
'<%= yeoman.client %>/{app,components}/**/*.css'],
tasks: ['injector:css']
},
injectSass: {
files: [
'<%= yeoman.client %>/{app,components}/**/*.{scss,sass}'],
tasks: ['injector:sass']
},
sass: {
files: [
'<%= yeoman.client %>/{app,components}/**/*.{scss,sass}'],
tasks: ['sass', 'autoprefixer']
},
gruntfile: {
files: ['Gruntfile.js']
},
},
sass: {
server: {
options: {
loadPath: [
'<%= yeoman.client %>/bower_components/foundation/scss',
'<%= yeoman.client %>/bower_components',
'<%= yeoman.client %>/app',
'<%= yeoman.client %>/components'
],
compass: false
},
files: {
'.tmp/app/app.css' : '<%= yeoman.client %>/app/app.scss'
}
}
},
injector: {
scripts: {
...
},
sass: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/app/', '');
filePath = filePath.replace('/client/components/', '');
return '#import \'' + filePath + '\';';
},
starttag: '// injector',
endtag: '// endinjector'
},
files: {
'<%= yeoman.client %>/app/app.scss': [
'<%= yeoman.client %>/{app,components}/**/*.{scss,sass}',
'!<%= yeoman.client %>/app/app.{scss,sass}'
]
}
},
// Inject component css into index.html
css: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/', '');
filePath = filePath.replace('/.tmp/', '');
return '<link rel="stylesheet" href="' + filePath + '">';
},
starttag: '<!-- injector:css -->',
endtag: '<!-- endinjector -->'
},
files: {
'<%= yeoman.client %>/index.html': [
'<%= yeoman.client %>/{app,components}/**/*.css'
]
}
}
}
...
In my app.scss I just have this:
#import 'settings';
#import 'foundation';
And the _settings file is from the stock Zurb git repo and works without the rest of my application.
When it compiles, I get some css starting with this:
/* Accessibility - hides the forward slash */
[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
content: "/"; }
.icon-bar.two-up .item {
width: 50%; }
.icon-bar.two-up.vertical .item, .icon-bar.two-up.small-vertical .item {
width: auto; }
#media only screen and (min-width: 40.063em) {
.icon-bar.two-up.medium-vertical .item {
width: auto; } }
#media only screen and (min-width: 64.063em) {
.icon-bar.two-up.large-vertical .item {
width: auto; } }
.icon-bar.three-up .item {
width: 33.3333%; }
.icon-bar.three-up.vertical .item, .icon-bar.three-up.small-vertical .item {
width: auto; }
#media only screen and (min-width: 40.063em) {
.icon-bar.three-up.medium-vertical .item {
width: auto; } }
#media only screen and (min-width: 64.063em) {
.icon-bar.three-up.large-vertical .item {
width: auto; } }
.icon-bar.four-up .item {
width: 25%; }
.icon-bar.four-up.vertical .item, .icon-bar.four-up.small-vertical .item {
width: auto; }
#media only screen and (min-width: 40.063em) {
.icon-bar.four-up.medium-vertical .item {
width: auto; } }
#media only screen and (min-width: 64.063em) {
.icon-bar.four-up.large-vertical .item {
width: auto; } }
.icon-bar.five-up .item {
width: 20%; }
.icon-bar.five-up.vertical .item, .icon-bar.five-up.small-vertical .item {
width: auto; }
I'm just learning sass and could do with some pointers. Could someone please help get this working