I am using scss.
On situation like this, how can I change target element's style on hover child element?
https://codesandbox.io/s/thirsty-haibt-60yph
.parent {
// some styles..
.child {
// some styles..
}
}
.target {
// some styles..
}
I tried using #at-root inside the child, but couldn't figure out. (code below)
.target {
height: 100px;
width: 100px;
background-color: blue;
}
.parent {
height: 200px;
width: 200px;
background-color: red;
.child {
height: 100px;
width: 100px;
background-color: yellow;
&:hover {
#at-root .target {
background-color: green;
}
}
}
}
Kindly help..
the message given is clear, #root cannot be used that way.
but you can trick css via pointer-events:
body {
.parent {
height: 200px;
width: 200px;
background-color: red;
pointer-events:none;
.child {
height: 100px;
width: 100px;
background-color: yellow;
pointer-events:auto;
}
&:hover {
background-color: green;
}
}
.target {
height: 100px;
width: 100px;
background-color: blue;
}
}
or did you mean
body {
.parent {
height: 200px;
width: 200px;
background-color: red;
pointer-events:none;
.child {
height: 100px;
width: 100px;
background-color: yellow;
pointer-events:auto;
}
&:hover ~ .target {
background-color: green;
}
}
.target {
height: 100px;
width: 100px;
background-color: blue;
}
}
I have some code below that i feel like should work just well but it appears to be breaking when i deploy.
All the code here: https://jsfiddle.net/82pmjqgn/
The search blob box just appearing over the content and not hidden. It should be hidden until it's clicked and then appear underneath. Here are some images for more reference. Any help would be greatly appreciated.
// Search
.block-search .amsearch-close,
.block-search .amsearch-loupe {
top: 43px;
}
#media (min-width: 768px) {
.block-search .form .search-autocomplete {
top: 43px;
}
.block-search .amsearch-close,
.block-search .amsearch-loupe {
top: 30%;
}
}
.form .search-autocomplete {
top: 88px;
margin-left: 0;
margin-right: 0;
}
.block-search {
.label {
display: inline-block;
float: none;
}
input {
border-radius: 50px;
height: 40px;
padding-left: 20px;
padding-right: 44px;
}
.control {
border-top: 0;
clear:none;
margin: 0;
padding: 0;
}
.action.search {
background: #5a5a5a;
border-radius: 50px;
height: 34px;
right: 4px;
top: 3px;
width: 34px;
}
.search-autocomplete ul:not(:empty) {
border-color: #c2c2c2;
border-top: 1px solid #c2c2c2;
}
.search-autocomplete ul {
li {
border-color: #c2c2c2;
&:hover {
background-color: #e5e5e5;
}
.amount {
color: #444;
}
}
.selected {
background-color: #e5e5e5;
}
}
}
This is how it currently looks.
How it should look.
I have an Ionic 2 app, that has an ion-searchbar.
<div id="search" class="search-input-keyword">
<ion-searchbar class="ion-searchtext" id="ion-searchtext" [(ngModel)]="searchQueryText" (ionFocus)="focusSearch($event)"
(change)="onChangeText($event)" (ionClear)="onCancelText($event)" (ionInput)="onInputText($event)" placeholder="{{jobType === 0 ? favourite ? 'Market Favourites' : 'Market' : favourite ? 'Postings Favourites' : 'Postings'}}"
debounce="1"></ion-searchbar>
</div>
I would like to change the input text color, and the magnifying glass icon color to #fff.
I have read here, that in order to do so, you need to change the sass variables.
I have tried the following in variables.scss:
$colors: (
primary: #009196,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
);
$searchbar-ios-input-text-color: #fff;
$searchbar-ios-input-search-icon-color: #fff;
But there is no effect.
However, the following line does have an effect:
$text-color: #000099;
So I guess that the $searchbar-ios-input-text-color: #fff; and $searchbar-ios-input-search-icon-color: #fff; are the issue.
Question
Can anyone please advise how to change the font and icon colours?
Thanks
UPDATE
Here is some more code samples:
css
.toolbar-background-md {
background: linear-gradient(to bottom right, #00a7ad, #004547);
}
.bar-button-default-md {
color: #fff;
}
.searchbar-md .searchbar-input {
background: linear-gradient(to bottom right, #009da3, #018287);
//background-color: #009196;
}
input::-webkit-input-placeholder {
color: red ;
}
input:-moz-placeholder {
color: red ;
}
input:-ms-input-placeholder { /* IE10+ */
color: red ;
}
.toolbar-title-md {
padding: 0 12px;
font-size: 2rem;
font-weight: 500;
color: #fff;
}
.close-filters {
color: #fff;
width: 52px;
font-size: 22px;
background-color: transparent;
box-shadow: none !important;
}
.slide-fade-hide {
transition: 1s all linear;
opacity: 0;
height: 0;
position: absolute;
top: 0;
z-index: -10;
}
.slide-fade-show {
transition: all 1.2s ease-in;
opacity: 1;
height: 2em;
z-index: 1;
}
.list-md {
margin: 0px 0px 0px 0;
}
.scroll-up {
margin-top: 20px;
}
.menu-title {
padding: 1px 95px 1px 10px;
}
.menu-toolbar {
padding: 35px;
}
.menu-content {
position: relative !important;
}
.item-search-wanted {
padding-left: 1px;
}
.item-search-offered {
padding-left: 1px;
}
.job-content-offered {
background-color: white !important;
}
.job-content-wanted {
background-color: white !important;
}
.search-button-star {
background-color: #009196;
}
.search-input-keyword {
width: 125%;
display: flex;
}
.search-input {
width: 125%;
}
.toolbar-content {
display: flex;
}
.extra-search-col {
padding: 0px;
}
ion-col {
padding: 2px;
}
ion-title {
z-index: 11;
}
ion-avatar img {
border-radius: 2.8rem;
max-height: 5.6rem;
max-width: 5.6rem;
}
.small-text-search {
font-size: 75% !important;
color: grey !important;
padding-top: 4px;
}
.small-text-search-desc {
font-size: 85%;
}
.small-text-search-rating {
padding-top: inherit;
padding-left: inherit;
}
.small-text-search-starrating {
padding-top: 2px;
font-size: 100% ! important;
}
.search-category {
float: right;
}
.job-tite {
width: 250px;
}
.job-timestamp {
white-space: nowrap;
}
.search-rating {
float: left;
}
.search-popover-button {
width: 75px;
height: 75px;
}
.button-icon-only ion-icon.search-popover-icon {
font-size: 2.8em;
}
.filter-image {
-webkit-filter : hue-rotate(-30deg) opacity(100%);
filter : hue-rotate(-30deg) opacity(100%);
}
.icon-text {
padding-left: 5px;
padding-bottom: 3px;
}
.icon-text-no {
padding-left: 5px;
}
I'm getting an error I can't correct when testing with Rspec and Capybara in my rails app.
Failure/Error: visit('/')
ActionView::Template::Error:
Invalid CSS after " text-indent:": expected expression (e.g. 1px, bold), was "}"
It says the error is occurring in app/assets/stylesheets/application.css. I have nothing in there as of yet and cannot locate the issue. I think the error(based on what I've read) may have something to do with my css or scss file extensions. I've tinkered with them a bit with no change so here I am asking for help.
My registration_spec.rb
require 'spec_helper'
describe "Signing Up" do
it "allows a user to sign up for the site and creates the object in the database" do
expect(User.count).to eq(0)
visit('/')
expect(page).to have_content("Sign Up")
click_link "Sign Up"
fill_in "First Name", with: "John"
fill_in "Last Name", with: "Smith"
fill_in "Password", with: "password123"
fill_in "Password Confirmation", with: "password123"
click_button "Sign Up"
expect(User.count).to eq(1)
end
end
Here's my style.css
#about {
background: #efeddf;
padding: 20px;
border: 2px solid #57645d;
}
#about-content {
text-align: left;
}
#article-image {
float: left;
}
#article-links {
list-style-type: none;
}
#article-links a {
font-weight: bold;
color: #3f4944;
text-decoration: none;
}
#article-links img {
margin-right: 20px;
}
#article-show {
background: #efeddf;
padding: 20px;
border: 2px solid #57645d;
}
.bit-5 {
background: white;
padding: 20px;
text-align: center;
border: 2px solid #57645d;
color: #606e67;
float: right;
display: block;
}
.bit-75 {
background: white;
padding: 20px;
text-align: left;
border: 5px solid #57645d;
color: #606e67;
text-indent:
}
.clearfooter {
height: 330px;
clear: both;
}
#contact {
background: #efeddf;
padding: 20px;
border: 2px solid #57645d;
}
#contact-content {
text-align: left;
}
footer {
position: relative;
width: 100%;
height: 330px;
background: #3f4944;
}
html,body {
background: #efeddf;
height: 100%;
}
#title a {
color: #555;
text-decoration: none !important;
}
#main-header {
height: 180px;
background: #57645d;
position: fixed;
top: 0px;
margin: auto;
z-index: 100000;
width: 100%;
}
#main-nav ul {
text-align: center;
margin-top: 120px;
}
#main-nav ul li {
padding-left: 10px;
display: inline-block;
margin-right: 20px;
}
#main-nav ul li a {
text-decoration: none;
color: #efeddf;
font-size: x-large;
}
#new-article-path a {
font-weight: bold;
color: #3f4944;
}
#recent-article li {
list-style: none;
}
#recent-article li a {
color: #57645d;
text-decoration: none;
}
My grid(lemonade.css)
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
/* Set the width of the grid */
.frame {
margin: auto;
width: 1100px;
margin-top: 200px;
min-height: 100%;
margin-bottom: -330px;
position: relative;
}
/* Attribute selector */
[class*='bit-'] {
float: left;
padding: 0.3em;
}
/* Floats last ".bit-" to the right */
[class*='bit-']:last-of-type {
float: right
}
/* Clearfix */
.frame:after {
content: "";
display: table;
clear: both
}
/* Main Widths */
.bit-1 { width: 100% }
.bit-2 { width: 50% }
.bit-3 { width: 33.33% }
.bit-4 { width: 25% }
.bit-5 { width: 20% }
.bit-6 { width: 16.6666666667% }
.bit-7 { width: 14.2857142857% }
.bit-8 { width: 12.5% }
.bit-9 { width: 11.1111111111% }
.bit-10 { width: 10% }
.bit-11 { width: 9.09090909091% }
.bit-12 { width: 8.33% }
.bit-75 { width:75%}
.bit-25 { width:25%}
/* Landscape mobile & down */
#media (max-width: 30em) {
.bit-1,
.bit-2,
.bit-3,
.bit-4,
.bit-5,
.bit-6,
.bit-7,
.bit-8,
.bit-9,
.bit-10,
.bit-11,
.bit-12 {
width: 100%;
}
}
/* Portrait tablet to landscape */
#media (min-width: 30em) and (max-width: 50em) {
.bit-4,
.bit-6,
.bit-8,
.bit-10,
.bit-12 {
width: 50%
}
.bit-1,
.bit-2,
.bit-3,
.bit-5,
.bit-7,
.bit-9,
.bit-11 {
width: 100%
}
}
/* Landscape to small desktop */
#media (min-width: 50em) and (max-width: 68.750em) {
.bit-2,
.bit-7 {
width: 100%
}
.bit-4,
.bit-8,
.bit-10,
.bit-12 {
width: 50%
}
}
Im still pretty new at all this so any help/and or criticisms would be appreciated. Thanks.
Your style.css is invalid which is causing following error:
Failure/Error: visit('/') ActionView::Template::Error: Invalid CSS
after " text-indent:": expected expression (e.g. 1px, bold), was "}"
In your style.css, for class .bit-75, you forgot to set value of text-indent property
.bit-75 {
background: white;
padding: 20px;
text-align: left;
border: 5px solid #57645d;
color: #606e67;
text-indent: // <-- set a value here for eg : 10px;
}
So I've got this css here:
.outerDot {
width: 50px;
height: 50px;
background: white;
border: 4px solid blue;
border-radius: 50px;
}
.outerDot:after {
background: blue;
width: 20px;
height: 20px;
}
And I want the .outerDot:after to show up inside the .outerDot. Am I barking up the wrong tree? JsFiddle
The html is just <div class="outerDot"></div>.
You have to add a content attribute, and make it display block:
.outerDot:after {
content: '';
display: block;
background: blue;
width: 20px;
height: 20px;
}
Here's your fiddle: http://jsfiddle.net/hV93X/2/