I recently was trying to use less as my style sheet to customise components of Ant Design. But each time I try to run and compile the project, a less file in the Ant Component library is showing errors. These errors are not supposed to be errors, as one error stated that a comment symbol in the Less file was unrecognised.
Am I missing something? Also how do I get React working with Less files? Thanks!
//App.css
#import '~antd/dist/antd.less';
.site-layout-content {
background: #fff;
padding: 24px;
min-height: 280px;
}
.logo {
width: 160px;
height: 31px;
background: rgba(255, 255, 255, 0.2);
margin: 16px 24px 16px 0;
float: left;
}
.caution-tape-logo {
background: url('drawable/ctrclogo.png');
width: 245px;
height: 63px;
float: left;
margin: 10px 24px 16px 0;
}
.header-space {
width: max-content;
height: 31px;
}
Here is the error: https://imgur.com/a/FX4m3J2
Related
I am using CSS module along with react. I want to change the border-radius dynamically from react. In the box.css , i set the border-radius as radiusValue. My goal is to modify the value of radiusValue from a react component. Is that possible? I couldn't find any solution related to updating the #value variable.
Thank you
inside box.css:
#value radiusValue:0px
.box{
height: 200px;
width: 300px;
border: 10px solid #595252;
border-radius: radiusValue;
padding: 100px;
margin: 50px;
}
You can not do that with CSS pre-processors, because they generate static files that can not be changed on the fly,
but you can do this with pure CSS - specifically with CSS Custom properties.
CSS file:
:root {
--radius-value: 0px;
}
.box {
height: 200px;
width: 300px;
border: 10px solid #595252;
border-radius: var(--radius-value);
padding: 100px;
margin: 50px;
}
JS file
element.addEventListener("click", () => {
root.style.setProperty("--radius-value", "20px")
})
I am fairly new to CSS and I can't seem to figure out why my editors are responding the way they are to float: left. I am trying to get the below editors next to each other horizontally:
With the following CSS:
.form-container {
margin: 0 auto;
max-width: 95%;
background: white;
border-radius: 10px;
display: flex;
height: 50hv;
flex-direction: column;
border: 1px solid #ddd;
}
.left-editor, .right-editor {
margin: 10px;
}
Once I add float: left to .left-editor, .right-editor the editor disappears and looks like this:
Any idea as to why?
Using npm I updated my antd dependency to 4.17.0-alpha.0. When I tried to run my react app after I updated it, it throws an error.
The error:
./src/App.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-8-3!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-8-4!./src/App.less)
Maximum call stack size exceeded
The App.less (I believe there's nothing wrong with this):
#import "~antd/lib/style/themes/default.less";
#import "~antd/dist/antd.less";
#import "~antd/dist/antd.compact.less"; // Introduce the official compact less style entry file
.login-form-container {
height: 80vh;
.login-form {
padding: 30px 0;
background-color: #fff;
.button {
width: 100%;
}
}
}
.footer {
background-color: #primary-color;
.text {
color: #fff;
}
}
.title {
padding: 0;
margin: 0;
}
#notif {
margin: 0;
padding: 0;
}
.header-icon {
font-size: 18px;
color: #black;
}
.page-header {
margin: 5px;
}
.content-container {
background-color: #fff;
padding: 15px;
min-height: 70vh;
margin: 10px 25px;
}
(P.S.) The reason why I want to update to the alpha version because of the Drawer component. The Drawer component has an extra prop which is available only in the latest alpha version. Here's the Drawer Documentation. Maybe I missed something.
I am new to Ant Design.
Install new alpha release to fix it.
npm install --save antd#4.17.0-alpha.2
Is it possible to define primary and hover images for an <input type="image"> element in CSS in JS? I'm trying to implement a different image on hover, but can't get the syntax correct.
margin: 40,
background: "url(/btn_google_signin_light_normal_web.png)",
"&:hover": {
background: "url(/btn_google_signin_light_focus_web.png)"
}
}
You can try
IN your CSS
.yourClass {
width: 200px;
height: 200px;
background: url("images/iamge1.jpg") no-repeat;
display: inline-block;
}
.yourClass:hover {
background: url("images/image2.jpg") no-repeat;
}
Is there a simple modular tree built with Twitter Bootstrap and Backbone.js that provides common tree control functionality?
Here's a Bootstrap tree widget (from "Trees in Twitter Bootstrap"):
Building on Vitaliy's CSS and Mehmet's jQuery, I changed the a tags to span tags and incorporated some Glyphicons and badging into my take on a Bootstrap tree widget.
Example:
For extra credit, I've created a GitHub project to host the jQuery and LESS code that goes into adding this tree component to Bootstrap. Please see the project documentation at http://jhfrench.github.io/bootstrap-tree/docs/example.html.
Alternately, here is the LESS source to generate that CSS (the JS can be picked up from the jsFiddle):
#import "../../../external/bootstrap/less/bootstrap.less"; /* substitute your path to the bootstrap.less file */
#import "../../../external/bootstrap/less/responsive.less"; /* optional; substitute your path to the responsive.less file */
/* collapsable tree */
.tree {
.border-radius(#baseBorderRadius);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
background-color: lighten(#grayLighter, 5%);
border: 1px solid #grayLight;
margin-bottom: 10px;
max-height: 300px;
min-height: 20px;
overflow-y: auto;
padding: 19px;
a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 90%;
}
li {
list-style-type: none;
margin: 0px 0;
padding: 4px 0px 0px 2px;
position: relative;
&::before, &::after {
content: '';
left: -20px;
position: absolute;
right: auto;
}
&::before {
border-left: 1px solid #grayLight;
bottom: 50px;
height: 100%;
top: 0;
width: 1px;
}
&::after {
border-top: 1px solid #grayLight;
height: 20px;
top: 13px;
width: 23px;
}
span {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #grayLight;
border-radius: 5px;
display: inline-block;
line-height: 14px;
padding: 2px 4px;
text-decoration: none;
}
&.parent_li > span {
cursor: pointer;
/*Time for some hover effects*/
&:hover, &:hover+ul li span {
background: #grayLighter;
border: 1px solid #gray;
color: #000;
}
}
/*Remove connectors after last child*/
&:last-child::before {
height: 30px;
}
}
/*Remove connectors before root*/
> ul > li::before, > ul > li::after {
border: 0;
}
}
I recently published my backbone.js tree widget.Check it out at https://bitbucket.org/dnation/bbtree/ and see if it meets your needs.