Using Font-Awesome 5 and following the usage docs on their website I set up a little .scss test. The problem I am running into is that the icon (which should show a magnifying glass) show "fl" instead.
#import "./scss/fontawesome.scss";
#import "./scss/fa-solid.scss";
.test{
width: 200px;
height: 200px;
background: purple;
}
.test:before{
#include fa-icon;
#extend .fab;
content: fa-content($fa-var-search);
font-size: 24px;
color: #FFF;
}
Verified the _variables.scss is pointing to the proper web folder and that the resources are loading.
Any help would greatly be apppreciated.
Related
I am using Laravel mix and webpack.mix.js to compile css in wordpress. I've set up the source files and am able to compile without errors using npx mix watch etc in visual studios, creating the app.css and app.js files in the dist folder.
let mix = require('laravel-mix');
mix
.js('src/app.js', 'dist')
.sass('src/app.scss', 'dist');
However, when I tried to add an image in one of the pages via the respective scss file,
#hero {
height: 550px;
width: 100%;
background: url(/images/water.jpg) #f0f0f0;
}
the files compile and the css is the same in the compiled app.css file, but the image is not visible on the page or in the inspection bar.
I've tried every variation for the image path, including adding ../ or ./ in front, but most just give an error.
I've tried to override with option processCssUrls to the webpack.mix.js
let mix = require('laravel-mix');
mix.options({
processCssUrls: false
})
.js('src/app.js', 'dist')
.sass('src/app.scss', 'dist');
but this doesn't seem to do anything, although it's possible I added it wrong.
Strangely, the file also doesn't properly compile any of the custom colours that I make. I made a _colour.scss file in the source file with
$light: rgba(13, 59, 21, 0.6);
$dark: rgb(131, 56, 56);
and imported in the main scss file, but sometimes when I use it for links or backgrounds, it defaults to a different colour, even the !important tag doesn't help. The compiled css file also just shows different colours,
in the _header.scss file:
a {
display: block;
padding: .25rem 1rem;
color: $dark!important;
font-size: 1.1rem;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: $light!important;
}
and in the compiled app.css file:
header .top-menu li a {
display: block;
padding: 0.25rem 1rem;
color: #212529 !important;
font-size: 1.1rem;
text-decoration: none;
}
header .top-menu li a:hover {
text-decoration: underline;
color: #f8f9fa !important;
}
so perhaps something is going wrong in the compiling
Here is what we are doing:
we are creating a hook to modify the \html\css\common\_mixins.scss file.
The file when deployed is updated. So far so good.
The problem is the CSS files which are importing this mixin are not showing any changes, for example this file - \webapps\ROOT\html\css\taglib\navbar.css.
After some debugging I found that there is a .sass-cache folder in \webapps\ROOT\html\css\taglib\.sass-cache which also has the final generated file navbar.css which is used by the portal.
Now when I deploy the hook all the CSS files which import this mixin are not recompiled/regenerated in .sass-cache folder, which makes the hook useless.
Can somebody tell me if there is any way to make use of this mixin or is there anyother way to do this or may be I can manually recompile all the CSS files using this mixins if only I knew how to.
Also I see that deleting the .sass-cache is not an option since this folder is also used by liferay to patch CSS files if there is a hot-fix.
Environment
Liferay EE 6.2 SP9 bundled with Tomcat
Reason from the comments
The reason why we need to change this file is to have a way to disable responsive elements for the navigation-bar. Or better still disable responsiveness for the whole portal. Since the responsiveness is due to the media-query.
Thanks
It's not possible to alter _mixins.scss via hook, and it's not only due to the evil sass-cache.
_mixins.scss is written is SASS and it needs to be compile and store in sass-cache. Every theme includes compiled version of every sass file.
The only way is to build you own theme and change _mixins.scss or any other file in _diff folder.
Why do you need to alter that particular file?
So the changes were not reflected and I think CSS is not meant for hooking.
So after trying a lot of stuff, still we were not able to disable responsiveness, so we applied the following CSS in our custom.css in our theme. This worked for the navigation bar, for others we can again include those styles individually.
#media (max-width: 979px) {
.navbar .container {
position: initial;
}
.navbar .container .btn-navbar {
color: initial;
display: none;
margin-bottom: initial;
width: initial;
}
.navbar .container .btn-navbar > .icon-bar:first-child {
margin-top: initial;
}
.navbar .container .btn-navbar > .icon-bar:last-child {
margin-bottom: initial;
}
.navbar .container .nav-collapse {
display: initial;
}
.navbar .container .nav-collapse.open {
display: initial;
height: initial;
overflow: initial;
}
.navbar .container .nav-collapse .btn {
padding: initial;
}
.navbar .container .navbar-search {
margin: initial;
padding: initial;
}
.navbar .container .navbar-search .btn,
.navbar .container .navbar-search .btn-link {
clip: none;
position: initial;
}
.navbar .container .navbar-search .form-search {
margin: initial;
}
.navbar .container .navbar-search .form-search .input-append {
display: initial;
padding-right: initial;
}
.navbar .container .navbar-search .form-search .input-append .search-query {
width: initial;
}
}
This CSS code is taken from this Liferay forum post.
I've recently updated to SingularityGS 1.4.0 and have run into an issue with my .container class using an #include clearfix; which now includes an overflow:hidden property.
For a slideshow component, I use negative/positive margins to display arrows overlapping arrows outside of the .container:
.container { //Container for the grid system
background: $background-color;
max-width: $site-width;
margin: 0 auto;
position: relative;
#include clearfix;
#include breakpoint($large-break) {
border-left: 20px solid #fff;
border-right: 20px solid #fff;
width: $site-width;
}
.container {
border: 0px;
margin: 0px;
clear: both;
}
}
.left-arrow, .right-arrow {
position: absolute;
cursor: pointer;
margin-top: -20px;
font-size: 0.8em;
width: 41px;
height: 41px;
top: 50%;
}
.left-arrow {
left: -10px;
background: url(/images/icons.png) no-repeat -153px -146px;
}
.right-arrow {
right: -10px;
background: url(/images/icons.png) no-repeat -197px -146px;
}
Here's a screenshot of the problem:
https://www.dropbox.com/s/yl4ch4yowe61kz7/Screenshot%202014-09-03%2010.06.50.png?dl=0
Should I be using something other then the clearfix mixin in my container?
Edit: - Added Sassmeister issue as requested
This version of Singularity uses the Compass clearfix. You can write your own to work as you want it:
#mixin clearfix {
&:after {
content: '';
display: table;
}
}
see: http://sassmeister.com/gist/099ef72b56365fe8ce07
Singularity doesn't have its own clearfix mixin.
You're using the clearfix mixin from Compass which leverages the overflow: hidden technhique which in turn crops your container.
The solution is to use another mixin for clearfixing.
Compass bundles three different clearfix mixins, the most usable of which is the pie-clearfix. It's output is as follows:
.foo {
*zoom: 1;
}
.foo:after {
content: "";
display: table;
clear: both;
}
I recommend that you use the clearfix mixin bundled with the beautiful toolkit Sass extension by Team Sass.
It has the following benefits over the pie-clearfix:
Shorter output that works for all modern browsers:
.foo:after {
content: "";
display: table;
clear: both;
}
Two ways of applying: the traditional mixin way (default) and the extend way. The extend way makes your CSS footprint even smaller by deduplication. The downside of the extend way is not being able to apply it from media queries, though i've never faced a situation where you would need a clearfix only in a media query and need it not to be applied outside media query.
To configure Toolkit for using the extend way apply this in the beginning of your CSS:
#include toolkit-set('clearfix extend', false);
To override current setting once use this:
#include clearfix(true);
true means the extend methhod, false means the mixin method.
Note that if you're including both Compass and Toolkit, Toolkit should come after Compass to override the clearfix mixin.
If you feel that Toolkit is too bulky for your project, simply define your own clearfix mixin after importing Compass, just like Scott suggests. Just be sure to use proper clearfix method, Scott's code (as of 2014-09-04 12:00 UTC) doesn't actually clearfix.
Singularitygs Grid overlay Not Showing
This is driving me up the wall, i've finally got singularity working but can't seam to show the grid - if someone could help that would be great.
Not bothered about the fancy toggle solution just want to see the grid-overlay desperately!
My HTML
<body data-development-grid="show">
My SASS
#import "singularitygs"
// Singularity 1.2 Syntax
#include add-grid(12)
#include add-gutter(1/3)
.container
#include background-grid
max-width: 940px
margin: 0 auto
min-height: 100%
.one
background-color: black
width: 100px
height: 100px
top: 2px
left: 5px
If it helps i'm using codekit.
Thanks in advance
Finally got it working. The solution is to apply sgs-change ('debug', true).
Here's my Sass code if anyone needs it:
#import "breakpoint"
#import "singularitygs"
//////////////////////
// Set up the grid //
//////////////////////
+add-grid(12)
+add-gutter(1/3)
+add-gutter-style('split')
+sgs-change ('debug', true)
body
#include background-grid
Demo: http://sassmeister.com/gist/fa0ac03b02e604f6bdf6
I'm testing out Bourbon Neat, and I have two columns within an outer-container, and I want the columns to be equal height (so as tall as the tallest column). Using #include fill-parent on the short column doesn't work, it just makes it as wide as the outer-container. I could do it in javascript, but doesn't Neat handle this?
Here's my html:
<section class="blog">
<article>
<h1>How to set up Bourbon Neat</h1>
<h2>Installing and using Bourbon</h2>
<p>Install bourbon by going to your users directory in git bash, and typing: gem install bourbon</p>
<p>Then change directory to your style folder and type in git bash: bourbon install</p>
<p>Then, import the mixins at the top of your stylesheet(s): #import 'bourbon/bourbon'</p>
<h2>Installing and using Neat</h2>
<p>Install neat by going to your users directory in git bash, and typing: gem install neat</p>
<p>Then change directory to your style folder and type in git bash: install neat</p>
<p>Then, import the mixins at the top of your stylesheet(s): #import 'bourbon/bourbon'</p>
</article>
<aside>
<!--<img src="style/images/cupman.gif" alt="It's bidness time">-->
<p>It's bidness time</p>
</aside>
And here's my SASS: `
$visual_grid: true
$visual-grid-color: blue
$visual-grid-index: front
$visual-grid-opacity: 0.1
#import 'bourbon/bourbon'
#import 'neat/neat'
#import 'variables'
///////////////////////////
html
#include linear-gradient(black, gray)
height: 100%
body
background-color: $baseColor
font-family: $type
body *
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
//////////////////////////////
.blog
#include outer-container
aside
#include span-columns(4)
background: $thirdColor
//height: 100%
//#include fill-parent()
article
#include span-columns(8)
background-color: $fourthColor
padding: 5px
margin-top: 40px
background-color: $secondColor
`
Thanks for reading.
EDIT: For now, I'm just using jQuery to manually equalize column size, but let me know if there's a Neater way (haha) to go about this.
One solution to equal column height is making all parents to height:100%.
Using your example:
html, body
height: 100%
.blog
#include outer-container
height: 100%
aside
#include span-columns(4)
background: $thirdColor
height: 100%
article
#include span-columns(8)
background-color: $fourthColor
padding: 5px
height:100%
This should work
To control the height of a child you first need to set its parent's height. Then if you want to have both with the same height, just use the min-height property.
Like the following:
.blog {
height: 100%;
aside {
min-height: 100%;
}
}
and it should work.
fill-parent only makes it full width, not full height of its container. It is equivalent to this:
.element {
width: 100%;
// Also sets box-sizing if global $border-box-sizing is set to 'false'
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Source