Inheriting a Stylus mixin's sub-rule - stylus

I would like to #extend a sub rule from a Stylus mixin that requires parameters, is this possible?
An example of this uses bootstrap-stylus:
// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.
form-control-validation(text-color = #555, border-color = #ccc, background-color = #f5f5f5) {
// Color the label and help text
.help-block,
.control-label {
color: text-color;
}
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: border-color;
box-shadow inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work
&:focus {
border-color: darken(border-color, 10%);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(border-color, 20%);
}
}
// Set validation states also for addons
.input-group-addon {
color: text-color;
border-color: border-color;
background-color: background-color;
}
}
Here I want to extend the sub rule .form-control in a manner like:
.ui-state-valid
#extend form-control-validation($state-success-text, $state-success-text, $state-success-bg) .form-control
however this does not seem to work.

No, there is no such native option and the chances are low there would be.
But if I understand you right: if you want to use only one specific rule from the mixin, using your selector for it, you could try to do something like this:
$form-control-placeholder
form-control-validation()
.ui-state-valid
#extend $form-control-placeholder .form-control
This would output only the following styles:
.ui-state-valid {
border-color: #ccc;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}
.ui-state-valid:focus {
border-color: #b8b8b8;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 6px #d6d6d6;
}
What happens there: you need to create a placeholder selector, then call a mixin with any arguments you need, then all the inserted rules would be prepended by the placeholder selector, so they too would become placeholders. Then you could just go and extend such complex placeholder selector.

Related

can't show caret icon for sorting beside the column name

I can't show caret icon for sorting beside the column name using react-bootstrap-table2 even i set the attribut sort to true in columns.
Thank you
Hopefully this link will solve your problem https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/215
If, by default, the caret is missing, you may add the following styles to your global stylesheet.
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid \9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

Add width between table headers in Custom Table Form

Using Example from SO Table Form
I successfully implemented the form in my component as per my need. The only thing bugging me is there is no gap between the headers and I can't seem to figure out on how to do that as it looks very odd.
As you can see in the highlighted it looks very weird with no gap between headers.
Working codebox
Please do let me know if anyone figures out on how to do that.
I tried:
formtable.css:
table {
border-collapse: separate;
border-spacing: 30px;
}
and it does provides space between header but it looks more ugly as header shifts to left and when clicking on add address inside form looks weird.
Well, you have not applied any styles. That says it all.
I have added some basic styling for your reference, you can style per your need.
Check the working example here
.App {
font-family: sans-serif;
text-align: center;
padding: 1rem;
}
table {
border-spacing: 0;
border: 1px solid black;
}
tr:last-child td {
border-bottom: 0;
}
th,
td {
margin: 0;
padding: 0.5rem;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
th:last-child {
border-right: 0;
}
td:last-child {
border-right: 0;
}

Remove outline on antd select component

I'm using antd NPM package's Select component. I want to remove the blue outline which appears when the component is focussed. How can I remove it ?
I have tried styling the component using styled components. The styling looks like follows:
const StyledSelect = styled(Select)`
& .ant-select-selection__rendered {
width: 200px;
margin-left: 0;
margin-right: 0;
&:focus {
outline: none;
border: none;
}
}
&.ant-select-focused {
border: none;
&:focus{
outline: 0;
}
}
`;
I expect the blue outline to be removed. But my styling doesn't seem to be working
If you observe the CSS in your browser you can see what you need to override.
.ant-select-focused .ant-select-selector,
.ant-select-selector:focus,
.ant-select-selector:active,
.ant-select-open .ant-select-selector {
border-color: #d9d9d9 !important;
box-shadow: none !important;
}
I left it for hover.
codesandbox: https://codesandbox.io/s/cool-moon-ohznt
A clean approach would be to set the bordered option to false as shown below. More options and reference are available at https://ant.design/components/select/#components-select-demo-bordered
<Select defaultValue="lucy" style={{ width: 120 }} bordered={false}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
I managed to fix it in a difficult dropdown input with:
.ant-select:hover .ant-select-selector {
border-color: #a2a2a2 !important;
box-shadow: none !important;
}
This worked fine for me:
.ant-select-selector {
border-color: rgba(204, 204, 204, 0.5) !important;
box-shadow: none !important;
}
The border-color will overwrite the border when it's focused and when it's not, if you want to change the border just when it's focused apply a style on .ant-select-open
.ant-select-focused .ant-select-selector,
.ant-select-selector:focus,
.ant-select-selector:active,
.ant-select-open .ant-select-selector {
border-color: #d9d9d9 !important;
box-shadow: none !important
}
this worked for me to get ride of the default blue boarder when input is selected

Why does link tooltip disappear the moment I take my mouse off of the link symbol in the toolbar?

To test links in my Quilljs editor, I'm highlighting text and then clicking the link symbol in the toolbar -- for a split second the link tooltip shows up, only to disappear right away unless I hold my click on the symbol.
It appears that there's a 'ql-hidden' class that's being applied wrongly, but I'm not sure if it's something to do with my configuration being incorrect.
Here's the JavaScript:
var primaryQuill = new Quill('#editor', {
modules: {
toolbar: '#toolbar',
'link-tooltip': true
},
theme: 'snow'
});
Here's the HTML (using the Jade templating language):
#toolbar
span.ql-format-group
button.ql-bold(type="button") Bold
button.ql-italic(type="button") Italic
span.ql-format-group
button.ql-link(type="button") Link
#editor
p Start writing here...
And here are the only styles I've written for this:
.ql-toolbar {
background: #fff !important;
box-shadow: 1px 1px 3px 1px rgba(0,0,0,.1) !important;
margin: 5px 0px !important;
border: none !important;
}
.ql-container {
margin: -5px 0px !important;
background: #fff !important;
border: none !important;
box-shadow: 1px 2px 3px 1px rgba(0,0,0,.2) !important;
min-height: 500px;
font-size: 1.2em !important;
font-family: inherit !important;
color:rgba(0,0,0,.8) !important;
}

how to insert image into popup in leaflet.css

I'm needing an image to show on all my Drupal 7 leaflet map popups, below the content that it is pulling in from the drupal nodes. I have added the image test.jpg to my libraries/leaflet/images folder, and the following code to leaflet.css, though its not working. How can I correct/ do this?
.leaflet-popup-tip {
background: black;
width: 725px;
background-image: url('../images/test.jpg');
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
Try with
.leaflet-popup-content-wrapper {
background: black;
width: 725px;
background-image: url('../images/test.jpg');
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}

Resources