I am using a plugin in postcss which works perfectly called "postcss-preset-env"
My problem is that I don't get syntax highlight when I am nesting in an *.astro file
.link-card {
display: flex;
margin-top: 2rem;
padding: 0.15rem;
background-image: var(--link-gradient);
background-size: 400%;
border-radius: 0.5rem;
background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
background-color: greenyellow;
font-size: larger;
font-weight: 400;
&:is(:hover, :focus-within) {
background-position: 0;
& h2 {
color: yellow;
& span {
transform: translateX(2px);
color: pink;
}
}
}
After "&" there is no more autocompletion or syntax highlight
Settings.json
{
"postcss.validate": false,
"emmet.includeLanguages": {
"postcss": "css"
},
"files.associations": {
"*.css": "postcss"
}
}
On .css file everything works great
Related
My accordions are built with a wrapper to style the accordion. When the accordion is opened by clicking on the .accordion__outer, because the .accordion__inner (body copy) is also in the .accordion__wrapper, clicking anywhere in the body copy closes the accordion. Is there an easy fix, without redesigning how the accordion operates?
.accordion__wrapper {
width: 100%;
padding: 2.5%;
background: var(--white);
color: var(--primary-blue);
cursor: pointer;
z-index: 10;
position: relative;
}
.accordion__wrapper:nth-child(even) {
background: var(--gray);
}
.accordion__wrapper .accordion__outer {
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion__wrapper .accordion__inner {
display: none;
}
.accordion__wrapper.show .accordion__inner {
display: block;
color: var(--black);
border-top: 1px solid rgba(0, 0, 0, .25);
margin: 15px 0 0 0;
padding-top: 15px;
}
I have to change the background-color of the popper(which is calender) in my react-datepicker to black with white font color when I toggle the theme from default(white) to black.
I have tried using popperClassName, but unable to pass in the font color and background color, although my placeholder has accepted the given values and changed its background when theme is toggled. I have to achieve the styles inline (JSS - css in js/jsx) way only ! though I have tried the styling of placeholder externally.
<DatePicker
selected={startDate}
dateFormat={DATE_FORMAT}
showMonthDropdown
showYearDropdown
isClearable
todayButton="Today"
popperClassName={{ color: fontColor, background }}
placeholderText="Click to select date"
className={background === '#303030' ? 'placeholderTable' : ''}
onChange={(date) => {
date = moment(date).format(DATE_FORMAT)
if (date === 'Invalid date') {
// this means that the user deleted the date
// this.setState({ start_date: undefined })
this.handleChange({ start_date: undefined, temp_end_date: undefined })
} else {
// this.setState({ start_date: date })
this.handleChange({
start_date: date,
temp_end_date: moment(date, DATE_FORMAT).add(1, 'year').format(DATE_FORMAT)
})
}
}}
/>
I expect some way to modify the styling for the popper using popperClassName or any other way.
I needed the same thing and this is how I solve it - using css:
.react-datepicker__header {
text-align: center;
background-color: #3e82cf;
border-bottom: 0px;
border-top-left-radius: 0;
border-top-right-radius: 0;
padding-top: 8px;
position: relative;
}
.react-datepicker__today-button {
background: #3e82cf;
border-top: 0px;
cursor: pointer;
text-align: center;
font-weight: bold;
padding: 5px 0;
clear: left;
}
For the calendar area you can use:
.react-datepicker {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.8rem;
background-color: #a66;
color: #000;
border: 0px;
border-radius: 0;
display: inline-block;
position: relative;
}
Just create CSS file and import it. It should work. More styles you can find in react-datepicker.css in dist folder.
Is there a way (setting) - we can add notch between editior group (file tabs) in visual studio code like sublime
Nope. There is no setting.
UI developer, HTML5, CSS3, Web Graphic Design,
You can probably try to use this extension: Custom CSS and JS loader
And write some CSS that would emulate sublime tabs. Similar to:
.tabs-container > .tab {
-webkit-font-smoothing: subpixel-antialiased;
transform: translateZ(0) perspective(1px) skewX(30deg);
}
.tabs-container > .tab > * {
-webkit-font-smoothing: subpixel-antialiased;
transform: translateZ(0) perspective(1px) skewX(-30deg) !important;
}
#Alex - Thank you for your suggestion,
.tabs-container {
margin-top: 5px;
background: #252526;
}
.tabs-container > .tab {
background: transparent!important;
border-bottom-width: 40px!important;
border-bottom-style: solid!important;
border-bottom-color: #42433e;
border-left: 20px solid transparent!important;
border-right: 20px solid transparent!important;
position: relative;
}
.tabs-container > .tab:not(:first-child) {
margin-left: -10px;
}
.tabs-container > .tab.active {
border-bottom-color: #1e1e1e;
z-index: 9;
}
.tabs-container > .tab > * {
padding-bottom: 10px;
}
How could I hide border of dialog box in GWT completely or we can say that hide the dialog box's caption portion completely. I tried to use .gwt-DialogBox .Caption {} in css
but I couldn't find any option which could hide the border fully.
Thanks in advance!
Don't use gwt-DialogBox name for css to change dialog box. it will not apply. try to apply different style name with same style like:
.gwt-DialogBoxNew
{
border: 8px solid #7F7F7F;
border-radius: 6px 6px 6px 6px;
box-shadow: none;
line-height: 7px;
opacity: 1;
z-index: 1000;
background-color : #FFFFFF;
}
.gwt-DialogBoxNew .Caption {
background: none repeat scroll 0 0 #E4E4E4;
border: medium none #D4D4D4;
cursor: default;
font-family: Arial Unicode MS, Arial, sans-serif !important;
font-size: 18px;
font-weight: 400;
line-height: 27px;
padding:2px 0px 0px 0px;
}
.gwt-DialogBoxNew .dialogContent {
}
.gwt-DialogBoxNew .dialogMiddleCenter {
padding: 3px;
background: white;
}
.gwt-DialogBoxNew .dialogBottomCenter {
}
.gwt-DialogBoxNew .dialogMiddleLeft {
/* background: url(images/vborder.png) repeat-y -31px 0px; */
}
.gwt-DialogBoxNew .dialogMiddleRight {
/* background: url(images/vborder.png) repeat-y -32px 0px;
}
.gwt-DialogBoxNew .dialogTopLeftInner {
width: 10px;
height: 8px;
zoom: 1;
background: none repeat scroll 0 0 #E4E4E4;
}
.gwt-DialogBoxNew .dialogTopRightInner {
width: 12px;
zoom: 1;
background: none repeat scroll 0 0 #E4E4E4;
}
.gwt-DialogBoxNew .dialogBottomLeftInner {
width: 10px;
height: 12px;
zoom: 1;
}
.gwt-DialogBoxNew .dialogBottomRightInner {
width: 12px;
height: 12px;
zoom: 1;
}
.gwt-DialogBoxNew .dialogTopLeft {
/* background: url(images/circles.png) no-repeat -20px 0px;
-background: url(images/circles_ie6.png) no-repeat -20px 0px; */
background: none repeat scroll 0 0 #E4E4E4;
}
.gwt-DialogBoxNew .dialogTopRight {
/* background: url(images/circles.png) no-repeat -28px 0px;
-background: url(images/circles_ie6.png) no-repeat -28px 0px; */
background: none repeat scroll 0 0 #E4E4E4;
}
.gwt-DialogBoxNew .dialogBottomLeft {
/* background: url(images/circles.png) no-repeat 0px -36px;
-background: url(images/circles_ie6.png) no-repeat 0px -36px; */
}
.gwt-DialogBoxNew .dialogBottomRight {
/* background: url(images/circles.png) no-repeat -8px -36px;
-background: url(images/circles_ie6.png) no-repeat -8px -36px; */
}
Remove border style from it as you concern here.
A DialogBox is basically a DecoratedPopupPanel with a caption. You want neither the decoration nor the caption, so how about using a PopupPanel instead? (AFAICT, the only difference will be how you size the panel)
I have a GWT application with two TabPanels.
The TabPanel generates css-classes that has the prefix gwt-TabPanel.
Is there any way to change this prefix for one of the tables? I want to be able to style the two TabPanels independently.
To solve this I did:
Using setStylePrimaryName(String); This will change the prefix for the CSS class names that the TabPanel and TabBar uses.
tabPanel.getTabBar().setStylePrimaryName("myTabBar");
tabPanel.setStylePrimaryName("myTabPanel");
In your CSS file your add something like this:
.myTabBar {
}
.myTabBar .gwt-TabBarFirst {
width: 5px; /* first tab distance from the left */
}
.myTabBar .gwt-TabBarRest {
}
.myTabBar .gwt-TabBarItem {
margin-left: 6px;
padding: 3px 6px 3px 6px;
cursor: pointer;
cursor: hand;
color: black;
font-weight: bold;
text-align: center;
background: #3A3A3A;
}
.myTabBar .gwt-TabBarItem-selected {
cursor: default;
/* background: black; */
}
.myTabBar .gwt-TabBarItem-disabled {
cursor: default;
color: red;
}
.myTabPanel {
}
.myTapPanel .myTabPanelBottom {
border-width: 0px;
overflow: hidden;
padding: 6px;
}
For the second TabPanel you set a different with setStylePrimaryName() on both the TabPanel and the TabBar. Then you add a new section to the CSS file with the second primary name.
You can use the methods setStyleName() and addStyleName() to set or add css styles to GWT UI objects.