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.
Related
I have this scss:
.nav {
&__item {
color: black;
}
}
This compiles to:
.nav__item
Is it possible to modify the above sccs so that it compiles with a tag in front of it, like the following?
a.nav__item
OR
li.nav_item
Here is one way using #at-root. This way avoids having to declare &__item twice.
.nav {
&__item {
color: black;
#at-root {
ul#{&} {
display: block;
}
}
}
}
Complies to
.nav__item {
color: black;
}
ul.nav__item {
display: block;
}
Try this:
.nav {
a#{&}__item {
color: black;
}
}
Output
.nav a.nav__item {
color: black;
}
Even though this is possible using
.nav {
a#{&}__item {
color: black;
}
}
I would highly encourage you to write it like this
a,
li {
&.nav {
&__item {
color: black;
}
}
}
Scheduler Fullcalendar timeline view doesn't REALLY support printing at all but unfortunately my client needs it. The issue is that the latter half of the calendar is getting cut off in print.
The potential solutions: Using zoom: 0.8 works amazing in Chrome and all the days of the week appear. However that doesn't do anything for Firefox. transform: scale(0.8) doesn't seem to have the same effect as part of calendar is still cut off, though it's all scaled down. If I emulate css in Chrome it shows up even with the transform scale toggled on, however does not show up in actual print.
Please excuse the potato styling of the calendar when it prints. I'm more concerned with friday the latter half of the calendar being cut off. In chrome toggle my comment for zoom and switch to scale to see the difference.
Here is codepen link https://codepen.io/bedelman851/pen/wXeZEO
I've been away from this project for a while and I don't think I solved this satisfactorily but I did solve it to be "good enough" for my situation. I looked into lots of options and spent way too much time on it.
The css I ended up going with is below. I can't vouch for how it looks or what you need, but if it's helpful then I am glad!
//CALENDAR CSS
.calendar-functions,
.calendar-functions div:last-child,
.calendar-functions a,
.calendar-view h1,
.fc-right,
.fc-right button,
.fc-license-message,
.print-button,
.print-button-week {
display: none;
}
.month-view .calendar-functions div,
.week-view .calendar-functions div {
display: none;
}
.fc-event:after {
content: attr(data-coll) !important;
}
.fc-body {
height: 400px !important;
}
.calendar-widget-week,
.fc-timeline {
width: 100%;
}
body {
width: 100%;
}
.fc-view-container {
// transform: scale(0.8);
zoom: 0.8;
}
.fc-timeline {
th {
height: 30px;
}
.fc-scroller-canvas {
min-width: 100% !important;
width: 100% !important;
}
}
.calendar-day tr td:first-child {
a[href]:after {
display: none;
}
}
.fc {
max-width: 100% !important;
th {
height: 30px;
}
}
.fc-event {
background: transparent !important;
color: #000 !important;
page-break-inside: avoid;
}
.fc-event .fc-resizer {
display: none;
}
.fc th,
.fc td,
.fc hr,
.fc thead,
.fc tbody,
.fc-row {
border-color: #ccc !important;
}
.fc-bgevent-skeleton,
.fc-highlight-skeleton,
.fc-helper-skeleton,
.fc-business-container,
.fc-highlight-container,
.fc-helper-container {
display: none;
}
.fc-ltr .fc-timeline-event {
margin-right: 5px;
}
.calendar-widget-week .fc-timeline-event {
padding-bottom: 97px;
}
/* don't force a min-height on rows (for DayGrid) */
.fc tbody .fc-row {
height: auto !important;
/* undo height that JS set in distributeHeight */
min-height: 0 !important;
/* undo the min-height from each view's specific stylesheet */ }
.fc tbody .fc-row .fc-content-skeleton {
position: static;
/* undo .fc-rigid */
padding-bottom: 0 !important;
/* use a more border-friendly method for this... */ }
.fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td {
/* only works in newer browsers */
padding-bottom: 1em;
/* ...gives space within the skeleton. also ensures min height in a way */ }
.fc tbody .fc-row .fc-content-skeleton table {
/* provides a min-height for the row, but only effective for IE, which exaggerates this value,
making it look more like 3em. for other browers, it will already be this tall */
height: 1em; }
//List views
.pagination-right,
.pagination-left *,
.pagination-right *,
.pagination-left {
display: none;
}
.fc-day-grid-event,
.fc-timeline-event {
&:before {
content: attr(data-id);
}
&:after {
content: "";
}
&:before,
&:after {
display: inline-block !important;
}
}
.fc-scroller {
overflow: visible !important;
.fc-scroller-canvas {
min-width: none !important;
}
}
#page :left {
margin-left: 0;
}
#page :right {
margin-left: 0;
}
/* for vertical events */
.fc-event-bg {
display: none !important;
}
.fc-event .ui-resizable-handle {
display: none !important;
}
.print-window__exit {
display: none;
}
#calendar-week {
display: none;
}
.dt-print-view {
#calendar-week {
display: block;
}
}
.print-table,
.print-title {
display: block !important;
}
This worked from me on Chrome and Edge (Firefox is still working too)
#media print {
body {
zoom: 0.8;
}
}
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 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%;
}
sorry but it's confusing to me, somebody knows how it's possible or it's not possible..
#divp {
background-color: lightgrey;
.odiv {
background-color: yellow;
.pp { background-color: black; }
a { color:red; }
}
.pp { background-color: lightgreen; }
a { color:blue; }
}
#divw {
background-color: lightblue;
.odiv {
background-color: blue;
.pp { background-color: white; }
a { color:yellow; }
}
.pp { background-color: green; }
a { color:lightblue; }
}
i want create divs with internal css rules and i dont want to write all the time the same..... like
#diw .odiv .pp { background-color: white }
#diw .odiv .a { color: white }
#diw .odiv .other { color: blue }
is it possible?
Nesting selectors is not possible, but you might want to checkout CSS preprocessors, which will let you do this. http://lesscss.org/ for example.
It is not possible in standard CSS. But it is possible in Sass (and other CSS Preprocessors): http://sass-lang.com/guide#3
It works exactly as you posted in your question:
.div1{
background-color: red;
p{ font-size: 18px; }
}
Will output this:
.div1{ background-color: red }
.div1 p{ font-size: 18px; }
Check out http://sassmeister.com/ for a way to play around with Sass.