I am using a program to convert a logbook into a PDF, however every time the PDF document is generated the left margin is greater. Does this have something to do with the .css file? Below is a copy of what is in that file:
#charset "UTF-8";
/*
Report Type: onePage
Report Category: China
Rows Per Page: 14
Data Type: Flight
*/
#media print
{
.content_left
{
height:1in;
}
}
tbody td,th
{
font-size:6.5pt;
}
thead td
{
font-size:6.5pt;
}
.p1us
{
color:grey;
}
.twoCell_top
{
border-bottom: solid 1px #000;
}
thead th.secondaryColumnHeading{
font-weight: 600;
font-size:6pt;
}
thead th.tertiaryColumnHeading
{
font-size:6pt;
}
#date
{
height:.25in;
width:.5in;
}
#journey {width:1in;}
.borderTopOnly
{
border:solid 1px white;
}
th.grandTotal
{
border-width: 0px;
/*text-align: right;*/
}
th.pageTotals
{
border-width: 0px;
/*text-align: right;*/
}
.text
{
width:1in;
white-space:normal;
height:.35in;
}
.text_small
{
width:.7in;
}
.text_medium
{
width:.6in;
white-space:normal;
height:100%;
}
Related
Is it possible to put certain css style in a component and reuse it in different locations? In the example below, I am repeating the same style for .navigation class:
.container-1 {
.navigation {
width: 100%;
}
}
#media (max-width:991px) {
.container-1 {
.navigation {
margin-top: 0px; // <-- repeated
background-color: #252525; // <-- repeated
width: 250px; // <-- repeated
}
}
}
.container-2 {
.navigation {
margin-top: 0px; // <-- repeated
background-color: #252525; // <-- repeated
width: 250px; // <-- repeated
}
}
In less you can use Mixins for this:
.navigation-styles {
margin: 0;
padding: 0;
list-style: none;
}
#media (max-width:991px) {
.container-1 {
.navigation {
.navigation-styles();
}
}
}
.container-2 {
.navigation {
.navigation-styles();
}
}
Please take a look at the doc here
This is the CSS for the antd style I'm using
style.css
.ant-table-tbody > tr > td, .ant-table-thead > tr > th
{
padding:4px;
}
tr:nth-child(odd){
background: #f1e6ff;
}
tr:nth-child(even){
background: white;
}
thead[class*="ant-table-thead"] th{
background-color:#000 !important;
color: white;
font-weight: bold;
border-color: #000;
text-align: center;
}
.table_btn
{
margin:0 !important;
}
.ant-btn
{
margin:0;
}
.ant-table-tbody > tr:hover > td {
color: #fff;
}
index.less
#import "callout";
#import 'e-commerce';
#import "pricing-tables";
#import "login";
#import "dashboard";
#import "error";
#import "editor";
#import "testimonials";
tr:nth-child(odd){
background:inherit !important;
}
.ant-modal-content {
.ant-modal-close{
color: #fff !important;
}
.ant-modal-header {
background-color: #000000;
.ant-modal-title {
color: #fff !important;
}
}
}
.table-wrapper {
.ant-btn {
padding: 0 10px;
height: 30px;
font-size: 13px;
> .anticon {
+ span {
margin-left: 5px;
}
}
&.ant-btn-success {
color: #3d8918;
border-color: #d9d9d9;
&:hover {
background-color:#3d8918;
color: #fff;
}
}
&.ant-btn-danger {
color: #c70d17;
background-color:#fff;
&:hover{
background-color:#c70d17;
color: #fff;
}
}
}
.actions {
text-align: right;
.ant-input {
border-radius: 2px;
padding:0 10px;
font-size: 13px;
height: 30px;
}
}
.table-layout {
.ant-table-small{
> .ant-table-content{
> .ant-table-body {
margin: 0 !important;
> table {
> .ant-table-tbody{
> tr{
> td{
padding: 2px 8px !important;
font-size: 13px !important;
text-align:center;
min-width: 80px;
.ant-btn {
width:100px;
}
}
}
}
}
}
}
index.js
<Table
className="table-layout"
columns={this.state.columns}
dataSource={filteredData}
rowClassName='data-row'
bordered={true}
size={"small"}
onRowDoubleClick={ (record, index, event) => this.handleEditModal(record) }
onRowClick={(record, index, event) => this.handleRowClick(record)}
loading={this.state.loading}
pagination={{ pageSize: 14 }}
/>
This is how Table is used in the index page. style.css and index.less are the pages for CSS.
Can anybody help me to write one CSS in this page for making one row green color ?
I want to make one row green based on condition.
I need the CSS
I need to call the CSS in the page where code is
I found two ways to do this as of now:
One way is to use rowClassName prop of Table:
.table-row-light {
background-color: #ffffff;
}
.table-row-dark {
background-color: #fbfbfb;
}
<Table
rowClassName={(record, index) => index % 2 === 0 ? 'table-row-light' : 'table-row-dark'}
columns={columns}
dataSource={dataSource}
loading={loading}
/>
Second way is to use plain CSS
.table-striped-rows tr:nth-child(2n) td {
background-color: #fbfbfb;
}
.table-striped-rows thead {
background-color: #f1f1f1;
}
<Table
className="table-striped-rows"
columns={columns}
dataSource={dataSource}
loading={loading}
/>
Note that rowClassName works only for rows, so for CSS on table headers we can only use plain CSS like above.
See if these Jsfiddle links helps you. They show 2 ways to change backgroung-color your rows.
https://jsfiddle.net/2b2376a4/
https://jsfiddle.net/2b2376a4/
data: [
{id:1, name: 'one', color: '#fff'},
{id:2, name: 'two', color: '#eee'},
{id:3, name: 'three', color: '#ddd'}
]
for first link
render(text, record) {
return {
props: {
style: { background: record.color },
},
children: <div>{text}</div>,
};
},
for second link
rowClassName={(record) => record.color.replace('#', '')}
if you want to use styled-components you can wrap it like this
const StyledTable: React.FC<TableProps<T>> = styled(Table)`
.ant-table-header th {
background-color: green;
}
`
export const Table = () => (
<StyledTable
columns={columns}
dataSource={data}
...
/>
I have to convert some SCSS files to LESS. For most part it is just case of changing $ with # but there are style that use the scss parent selector & that I don't know how to convert.
Here is example
// Sidebar
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol {
li {
a {
color: #blue;
&:before {
display: none;
}
}
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
How would I replace out those parent selectors to make it the same generated CSS?
The & parent selector is actually the same syntax in Less and SCSS!
From the Less Documentation on Parent Selectors:
The & operator
represents the parent selectors of a nested rule and is most commonly
used when applying a modifying class or pseudo-class to an existing
selector
In comparison, here's the SASS/ SCSS documentation on parent selectors for pseudo classes: http://sass-lang.com/documentation/Sass/Selector/Pseudo.html
So in the case of your code, it would be:
SCSS
$blue: blue;
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol li a {
color: $blue;
&:before {
display: none;
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
(try compiling/ validating here: https://www.sassmeister.com/)
LESS
#blue: blue;
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol li a {
color: #blue;
&:before {
display: none;
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
(try compiling/ validating here: http://winless.org/online-less-compiler)
As well as the official documentation, this article on CSS Tricks is helpful too: https://css-tricks.com/the-sass-ampersand
Hope that helps :)
I am trying to make some LESS from my css, for now i have made a lot, but i have problem with long selector of KENDO Grid, it wrappes element in strange places and then it is hard to find. This is what i have for now on
LESS
.k-grid {
.k-pager-wrap {
.color-background(#white);
border-top: 0 none;
}
.k-grid-header {
.color-background(#white);
thead tr[role="row"]:first-child {
display: none;
}
.k-grid-header-wrap {
table {
thead {
tr {
th.k-header {
font-size: #font-size-large;
}
}
}
}
}
}
.k-grid-content {
overflow: auto !important;
}
}
.k-pager-numbers {
li {
a.k-link {
.color-text(#grey) !important;
&:hover, &:active, &:focus, &:visited {
.color-background(#grey-background) !important;
.color-text(#brand) !important;
}
}
.k-state-selected {
.color-background(#grey-background) !important;
border: medium none;
.color-text(#brand);
}
}
}
the problem is that i have is with another CSS that i am trying to put inisde of this k-grid, here is
CSS
.k-grid-header-wrap table thead tr.k-filter-row th span.k-filtercell span.k-operator-hidden button.k-button.k-button-icon {
height: 26px;
}
.k-grid-header-wrap table thead tr.k-filter-row th span.k-filtercell span.k-operator-hidden button.k-button.k-button-icon span.k-icon.k-i-close {
margin-bottom:18px;
}
table thead tr.k-filter-row th span.k-filtercell span.k-operator-hidden span.k-widget.k-autocomplete.k-header.k-state-focused,
table thead tr.k-filter-row th span.k-filtercell span.k-operator-hidden span.k-widget.k-autocomplete.k-header.k-state-hover {
.lh-box-shadow(none) !important;
border-color: #grey-border !important;
}
.k-grid-header-wrap table thead tr.k-filter-row th {
padding-top:5px;
padding-bottom:5px;
}
div.k-grid-header div.k-grid-header-wrap {
border-right-width: 0;
width: 101%;
}
As you may see it is veery long selector, but all my CSS i need to convert to less I already have, just to append the LESS, can somebody help me. I have lost entire day for making this previous LESS now with this CSS i have no luck. Txanks
you can give variables for your selectors.
Your code can be like this:
#first-long-selector: ~"span.k-filtercell span.k-operator-hidden button.k-button.k-button-icon";
#second-long-selector: ~"span.k-filtercell span.k-operator-hidden span.k-widget.k-autocomplete.k-header";
#short-selector: k-grid-header;
#table-selector: ~"table thead tr.k-filter-row th";
.#{short-selector}{
&-wrap{
#{table-selector}{
#{first-long-selector} {
height: 26px;
.k-icon.k-i-close{
margin-bottom:18px;
}
}
}
}
}
#{table-selector}{
#{second-long-selector}{
&.k-state-focused,
&.k-state-hover{
.lh-box-shadow(none) !important;
border-color: #grey-border !important;
}
}
}
.#{short-selector}{
&-wrap{
#{table-selector}{
padding-top:5px;
padding-bottom:5px;
}
}
}
.#{short-selector}{
& &-wrap{
border-right-width: 0;
width: 101%;
}
}
Here is an example
LESS recognizes CSS. So you don't necessarily have to convert your CSS to LESS. Just copy it in as is if you just want to get it working.
I am trying to create a different panel from the twitter bootstrap LESS and hence I created a new LESS file and named it panel.less. However, twitter bootstrap already have their default LESS file for panels which is called panels.less.
How can I combine them so that it would process my less file too?(This might not be the correct word)
Panel.less
`
.panel-profile .panel-heading {
position: relative;
}
.panel-profile .panel-heading h4 {
margin: 10px 0 20px;
font-weight: normal;
}
.panel-profile .panel-heading img {
margin: 0 auto 10px;
display: block;
border: 1px solid #ddd;
background: #fff;
}
#media (min-width:400px) {
.panel-profile .panel-heading a {
font-size: .75em;
float: right;
}
.panael-profile .panel-heading {
margin-bottom: 30px;
}
.panel-profile .panel-heading img {
position: absolute;
margin: 0;
display: inline;
bottom: -25px;
}
}
`
Bootstrap.less. - This is my version not the default
`
// Core variables and mixins
#import "variables.less";
#import "mixins.less";
// Reset
#import "normalize.less";
#import "print.less";
// Core CSS
#import "scaffolding.less";
#import "type.less";
#import "grid.less";
#import "forms.less";
#import "buttons.less";
// Components
#import "component-animations.less";
#import "muicons.less";
#import "dropdowns.less";
#import "button-groups.less";
#import "navs.less";
#import "navbar.less";
#import "media.less";
#import "list-group.less";
#import "close.less";
#import "panel.less";
`
Panels.less
`
//
// Panels
// --------------------------------------------------
// Base class
.panel {
margin-bottom: #line-height-computed;
background-color: #panel-bg;
border: 1px solid transparent;
border-radius: #panel-border-radius;
.box-shadow(0 1px 1px rgba(0,0,0,.05));
}
// Panel contents
.panel-body {
padding: #panel-body-padding;
&:extend(.clearfix all);
}
// Optional heading
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
.border-top-radius((#panel-border-radius - 1));
> .dropdown .dropdown-toggle {
color: inherit;
}
}
// Within heading, strip any `h*` tag of its default margins for spacing.
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: ceil((#font-size-base * 1.125));
color: inherit;
> a {
color: inherit;
}
}
// Optional footer (stays gray in every modifier class)
.panel-footer {
padding: 10px 15px;
background-color: #panel-footer-bg;
border-top: 1px solid #panel-inner-border;
.border-bottom-radius((#panel-border-radius - 1));
}
// List groups in panels
//
// By default, space out list group content from panel headings to account for
// any kind of custom content between the two.
.panel {
> .list-group {
margin-bottom: 0;
.list-group-item {
border-width: 1px 0;
border-radius: 0;
}
// Add border top radius for first one
&:first-child {
.list-group-item:first-child {
border-top: 0;
.border-top-radius((#panel-border-radius - 1));
}
}
// Add border bottom radius for last one
&:last-child {
.list-group-item:last-child {
border-bottom: 0;
.border-bottom-radius((#panel-border-radius - 1));
}
}
}
}
// Collapse space between when there's no additional content.
.panel-heading + .list-group {
.list-group-item:first-child {
border-top-width: 0;
}
}
// Tables in panels
//
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
// watch it go full width.
.panel {
> .table,
> .table-responsive > .table {
margin-bottom: 0;
}
// Add border top radius for first one
> .table:first-child,
> .table-responsive:first-child > .table:first-child {
.border-top-radius((#panel-border-radius - 1));
> thead:first-child,
> tbody:first-child {
> tr:first-child {
td:first-child,
th:first-child {
border-top-left-radius: (#panel-border-radius - 1);
}
td:last-child,
th:last-child {
border-top-right-radius: (#panel-border-radius - 1);
}
}
}
}
// Add border bottom radius for last one
> .table:last-child,
> .table-responsive:last-child > .table:last-child {
.border-bottom-radius((#panel-border-radius - 1));
> tbody:last-child,
> tfoot:last-child {
> tr:last-child {
td:first-child,
th:first-child {
border-bottom-left-radius: (#panel-border-radius - 1);
}
td:last-child,
th:last-child {
border-bottom-right-radius: (#panel-border-radius - 1);
}
}
}
}
> .panel-body + .table,
> .panel-body + .table-responsive {
border-top: 1px solid #table-border-color;
}
> .table > tbody:first-child > tr:first-child th,
> .table > tbody:first-child > tr:first-child td {
border-top: 0;
}
> .table-bordered,
> .table-responsive > .table-bordered {
border: 0;
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
border-left: 0;
}
> th:last-child,
> td:last-child {
border-right: 0;
}
}
}
> thead,
> tbody {
> tr:first-child {
> td,
> th {
border-bottom: 0;
}
}
}
> tbody,
> tfoot {
> tr:last-child {
> td,
> th {
border-bottom: 0;
}
}
}
}
> .table-responsive {
border: 0;
margin-bottom: 0;
}
}
// Collapsable panels (aka, accordion)
//
// Wrap a series of panels in `.panel-group` to turn them into an accordion with
// the help of our collapse JavaScript plugin.
.panel-group {
margin-bottom: #line-height-computed;
// Tighten up margin so it's only between panels
.panel {
margin-bottom: 0;
border-radius: #panel-border-radius;
overflow: hidden; // crop contents when collapsed
+ .panel {
margin-top: 5px;
}
}
.panel-heading {
border-bottom: 0;
+ .panel-collapse .panel-body {
border-top: 1px solid #panel-inner-border;
}
}
.panel-footer {
border-top: 0;
+ .panel-collapse .panel-body {
border-bottom: 1px solid #panel-inner-border;
}
}
}
// Contextual variations
.panel-default {
.panel-variant(#panel-default-border; #panel-default-text; #panel-default-heading-bg; #panel-default-border);
}
.panel-primary {
.panel-variant(#panel-primary-border; #panel-primary-text; #panel-primary-heading-bg; #panel-primary-border);
}
.panel-success {
.panel-variant(#panel-success-border; #panel-success-text; #panel-success-heading-bg; #panel-success-border);
}
.panel-info {
.panel-variant(#panel-info-border; #panel-info-text; #panel-info-heading-bg; #panel-info-border);
}
.panel-warning {
.panel-variant(#panel-warning-border; #panel-warning-text; #panel-warning-heading-bg; #panel-warning-border);
}
.panel-danger {
.panel-variant(#panel-danger-border; #panel-danger-text; #panel-danger-heading-bg; #panel-danger-border);
}
`
WORKS: I not sure what went wrong but I went to combine my panel LESS file with the default panel LESS file together and managed to get the results. But I am sure that is the wrong way to compile it.
I usually create an app-specific version of the main bootstrap file, let's call it app-bootstrap.less. Just copy the contents of the default bootstrap.less into this file. Here's also your chance to comment out parts of bootstrap that you're not using (e.g. popovers, panels, forms etc). Alternatively you could just do #import "bootstrap.less"; if you're using all of it.
What you'd do next is to add in your own panels.less. The directory search order used is likely determined by your setup, but I guess it would not be an easy task having #import "panels.less"; in app-bootstrap.less mean one thing (i.e. "import panels.less from local directory") and another in panels.less (i.e. "import panels.less from bootstrap). Therefore, what you could do is put your panel additions in app-panels.lessinstead and make sure that file is imported in your app-bootstrap.less.
You can include the bootstrap.less file (#import "path";) in your less file and then compile it - that way you'll overwrite the class in the "CSS way". Or you can include all the files that are included in bootstrap.less, but replace panel.less with your file, and then compile that.