I'm working in a project were i have to use less, personally I always use stylus, but I can't with this project, so I have the next question. how can i do this, that i'm doing with stylus, with less ? The problem is the number of arguments.
in stylus :
box-shadow()
-webkit-box-shadow arguments
-moz-box-shadow arguments
box-shadow arguments
.div {
box-shadow 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2)
}
.div2 {
box-shadow 0 2px 8px rgba(0, 0, 0, 0.3)
}
output :
.div {
-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.2), inset 0 -15px 30px rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.2), inset 0 -15px 30px rgba(0,0,0,0.2);
box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.2), inset 0 -15px 30px rgba(0,0,0,0.2);
}
.div2 {
-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 8px rgba(0,0,0,0.3);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
LESS now
Current versions of LESS allow you to use commas as separators of lists, and then put a single semicolon at the end of the parameter to pass the whole thing as a comma separated list. So this now works (note the extra semicolon at the end right before the closing parenthesis.
.box-shadow(0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2););
^here
Original (pre LESS 1.3.3) Answer
Here's how LESS needs to be done to get the same output:
.box-shadow(#shadows) {
-webkit-box-shadow: #shadows;
-moz-box-shadow: #shadows;
box-shadow: #shadows;
}
.div {
.box-shadow(~"0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2)");
}
.div2 {
.box-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}
NOTE: To do multiple shadows as your .div, you need to pass them as a single argument using an escaped string, which is why the first use has ~" " surrounding the whole argument string. If you are just passing one shadow, that is not necessary. LESS needs that to get the commas between the shadow groups.
Related
I am either overthinking this or missing the core concepts of how CSS and html work within React Native.
I have this CSS code that I provided below that creates an inverted border radius tab like the tabs on google chrome.
I understand that you can use stylesheets in react native to implement CSS but I know these are formatted differently.
How can I implement this CSS code in a react native app? Snack io is a great tool to be able to quickly implement this if you would like to link your demo to me.
CSS
body {
background: #1c1c1c;
padding: 50px;
}
.tab {
float: left;
width: 90px;
padding: 10px 15px;
height: 30px;
position: relative;
background: #fff;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.tab:before,
.tab:after {
content: "";
position: absolute;
height: 10px;
width: 20px;
bottom: 0;
}
.tab:after {
right: -20px;
border-radius: 0 0 0 10px;
-moz-border-radius: 0 0 0 10px;
-webkit-border-radius: 0 0 0 10px;
-webkit-box-shadow: -10px 0 0 0 #fff;
box-shadow: -10px 0 0 0 #fff;
}
.tab:before {
left: -20px;
border-radius: 0 0 10px 0;
-moz-border-radius: 0 0 10px 0;
-webkit-border-radius: 0 0 10px 0;
-webkit-box-shadow: 10px 0 0 0 #fff;
box-shadow: 10px 0 0 0 #fff;
}
You can make a file with js extension, example styles.js and then import the file with import MyStyles from 'YOUR_RUTE_FILE'
The other way is in the same file
import { StyleSheet } from 'react-native
And write your styles
const stylesRNP = StyleSheet.create({
body: {
//Styles...
}
});
I would like to have all the comboboxes of my application similar to the PyCharm ones. I was able to change the box itself but not the drop-down list.
Here's what I would like to have:
Here's what I have:
I would like to increase the height of the items, the space between them and to remove the dotted border when the mouse hovers the item. All of this using the stylesheet, since I want all QComboBox to be like this.
Here's my stylesheet:
QComboBox{
font-family: "Segoe UI";
font-size: 8pt;
border-radius: 3px;
border: 1px solid;
border-color: rgb(175, 175, 175);
padding: 3px;
padding-right: 8px;
padding-left: 8px;
background-color: white;
margin: 1px;
}
QComboBox:focus, QComboBox:on{
border-radius: 4px;
border: 3px solid rgb(151, 195, 243);
margin:0px;
}
QComboBox::drop-down{
border:none;
}
QComboBox::down-arrow{
right: 4px;
image: url(:/custom/custom_icons/down-arrow.png);
}
QComboBox QAbstractItemView{
border: 1px solid rgb(175, 175, 175);
}
QComboBox QAbstractItemView::item {
height: 50px; /*not working*/
}
when I perform npm run serve everything work as intended.
when I perform npm run build there is "no error".
when I loot at the website the images can't be seen, then I inspect element I see the image opacity in my gallery section changes to 1%.
this is my template code:
<div class="gallery container">
<div
class="images"
v-for="(image, index) in images"
:key="index"
>
<img :src="image.small" #click="selectImage(index)" />
</div>
</div>
My scss code:
<style lang="scss" scoped>
.gallery-wrapper {
padding: 3rem 0;
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: center;
.images {
display: flex;
justify-content: center;
align-items: center;
img {
height: auto;
cursor: pointer;
width: 100%;
opacity: 85%;
border: 5px solid aliceblue;
&:hover {
opacity: 100%;
transition: 0.5s;
border: none;
margin: 5px 0;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.62);
width: 90%;
}
}
}
}
}
</style>
other images are working fine. only the gallery images changes opacity when performing npm run build.
I look at the dist folder it generated a class with 1% opacity.
build result dist/css/app.ae40bac8.css:
.gallery-wrapper .gallery .images img[data-v-c5a51ec0] {
height: auto;
cursor: pointer;
width: 100%;
opacity: 1%;
border: 5px solid #f0f8ff;
}
.gallery-wrapper .gallery .images img[data-v-c5a51ec0]:hover {
opacity: 1%;
-webkit-transition: 0.5s;
transition: 0.5s;
border: none;
margin: 5px 0;
-webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.62);
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.62);
width: 90%;
}
it seems the webpack generated the wrong opacity.
Something that worked for me is using 0.85 instead of 85%
Why reverses a background property of a lower element the border-radius set on a higher element?
I have this HTML code:
<div class="wrapper">
<div class="content">
<div class="header">Title</div>
<div class="form"></div>
</div>
</div>
And this CSS code:
.wrapper {
background: none repeat scroll 0 0 #F8F8F8;
border-radius: 5px 5px 5px 5px;
height: 250px;
left: 100px;
overflow: visible;
position: absolute;
top: 10%;
width: 400px;
z-index: 10000
.header {
background: none repeat scroll 0 0 #222222;
border-top-left-radius: 5px;
box-shadow: 0 0 5px #444444;
position: relative;
z-index: 1;
}
}
The result is that there is no border-radius at the top, just at the bottom. If I remove the background property of the .headerclass the border-radius works on all four sides. What is the problem here?
You are nesting a selector inside other, which is wrong.
Try this.
.wrapper {
background: none repeat scroll 0 0 #F8F8F8;
border-radius: 5px 5px 5px 5px;
height: 250px;
left: 100px;
overflow: visible;
position: absolute;
top: 10%;
width: 400px;
z-index: 10000
}
.header {
background: none repeat scroll 0 0 #222222;
border-top-left-radius: 5px;
box-shadow: 0 0 5px #444444;
position: relative;
z-index: 1;
}
this must work,
and if you apply any background color on any of the child div then you have to explicitly set its corner radius..
Check this
http://jsfiddle.net/arunberti/LtRUu/
.wrapper {
background: none repeat scroll 0 0 red;
border-radius: 5px 5px 5px 5px;
height: 250px;
left: 100px;
overflow: visible;
position: absolute;
top: 10%;
width: 400px;
z-index: 10000;
color:red;
}
.header {
background: none repeat scroll 0 0 #222222;
border-top-left-radius: 5px;
box-shadow: 0 0 5px #444444;
position: relative;
z-index: 1;
}
Here is my scss code:
#import "compass";
#import "compass/css3/pie";
#import "compass/css3";
#import "compass/utilities";
#import "compass/utilities/general/hacks";
$pie-behavior: url("./PIE.htc");
.align-center {
text-align: center;
margin-bottom: 0 !important;
}
.btn {
#include pie;
#include border-radius(25px);
text-align: center;
#include box-shadow(rgba(black, .39) 0 2px 3px);
font-size: 10px;
#include text-shadow(rgba(black, .5) 0 1px 0);
#include filter-gradient(#e6478b, #bf3b74);
background: #bf3b74;
#include background-image(linear-gradient(#e6478b, #bf3b74));
vertical-align: middle;
text-transform: uppercase;
color: white;
border: none;
cursor: pointer;
display: block;
font-weight: bold;
margin: 0 auto;
letter-spacing: 1px;
padding: 7px 20px;
line-height: 18px;
position: relative;
&.grey {
#include filter-gradient(#cfcfcf, #888888);
background: #cfcfcf;
#include background-image(linear-gradient(#cfcfcf, #888888));
}
}
for some reason rounded corners are not being picked up in IE. The corners are square. I have looked at a ton of Google examples and how I have it is how everyone else has it. Any reason why this wouldn't work?
rendered CSS:
.btn {
behavior: url("/stylesheets/PIE.htc");
position: relative;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
text-align: center;
-webkit-box-shadow: rgba(0, 0, 0, 0.39) 0 2px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.39) 0 2px 3px;
box-shadow: rgba(0, 0, 0, 0.39) 0 2px 3px;
font-size: 10px;
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 0;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE6478B', endColorstr='#FFBF3B74');
background: #bf3b74;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6478b), color-stop(100%, #bf3b74));
background-image: -webkit-linear-gradient(#e6478b, #bf3b74);
background-image: -moz-linear-gradient(#e6478b, #bf3b74);
background-image: -o-linear-gradient(#e6478b, #bf3b74);
background-image: -ms-linear-gradient(#e6478b, #bf3b74);
background-image: linear-gradient(#e6478b, #bf3b74);
vertical-align: middle;
text-transform: uppercase;
color: white;
border: none;
cursor: pointer;
display: block;
font-weight: bold;
margin: 0 auto;
letter-spacing: 1px;
padding: 7px 20px;
line-height: 18px;
position: relative;
}
Check out http://compass-style.org/reference/compass/css3/pie/
This will install an example stylesheet and a PIE.htc behavior file that must be loaded into your pages for IE. This file must be delivered with the following mime-type:
Content-Type: text/x-component