How can i make Netflix like Collapsable QNA sectionImage 1 click here
image 2
You don't need JS for this task
body {
margin: 0;
background-color: #000;
font-family: sans-serif;
}
.faq_block {
margin: 30px 0 85px
}
.faq_item {
border-radius: 20px;
padding: 0;
margin-bottom: 10px
}
.faq_item:focus .faq_question,
.faq_item:hover .faq_question {
color: #d5f867
}
.faq_item:focus .faq_question:after,
.faq_item:focus .faq_question:before,
.faq_item:hover .faq_question:after,
.faq_item:hover .faq_question:before {
background: #d5f867
}
.faq_item:before {
display: none
}
.faq_question {
font-weight: 700;
position: relative;
display: block;
font-size: 16px;
color: #fff;
border-radius: 20px;
cursor: pointer
}
.faq_question:after,
.faq_question:before {
content: "";
position: absolute;
background-color: #fff;
z-index: 2
}
.faq_question:after {
right: 17px;
top: 24px;
width: 14px;
height: 2px
}
.faq_question:before {
height: 14px;
width: 2px;
right: 23px;
top: 18px
}
.faq_item[open] .faq_question {
background: #d5f867;
color: #000
}
.bl_ceo .faq_answer ul li:before,
.faq_item[open] .faq_question:after {
background-color: #000
}
.faq_item[open] .faq_question:before {
opacity: 0
}
.faq_item[open] {
background-color: #fff
}
.faq_answer,
.faq_question {
padding: 16px 24px
}
.faq_item[open] .faq_answer,
.faq_item[open] .faq_answer li,
.faq_item[open] .faq_answer p {
color: #000
}
<div class="faq_block">
<details class="faq_item" open="">
<summary class="faq_question">Ask something smart!</summary>
<div class="faq_answer">Answer</div>
</details>
<details class="faq_item">
<summary class="faq_question">Ask something smart!</summary>
<div class="faq_answer">Answer</div>
</details>
</div>
Related
Building a mock website for a family member (placeholder photos). When I open the navigation menu, it pushes the screen down instead of simply opening to the right. Seems to translate the view vertically. How can I get it to just open smoothly to the right without pushing the screen view down?
1a) Screen before opening https://i.stack.imgur.com/UfuZi.png
1b) screen when I click nav menu https://i.stack.imgur.com/yfzS3.png
1c) screen when I scroll up after opening the nav menu https://i.stack.imgur.com/9cI5i.png
Here is the css for the navbar:
NAV HEADER CSS
#media only screen and (max-width: 768px) {
body .site-nav__thumb-menu {
position: absolute;
top: 20px;
bottom: unset;
left: unset;
right: unset;
padding-top: 6px;
}
.site-nav__thumb-menu span.icon-menu-label {
display: none;
}
.site-nav__thumb-menu button svg {
color: #000;
box-shadow: none !important;
}
.site-nav__thumb-menu--inactive {
transform: unset;
}
.slide-nav__wrapper {
transform: translateX(-100%) !important ;
background-color: #fff;
}
.slide-nav__dropdown .slide-nav__sublist-header {
text-decoration: none;
}
.slide-nav__overflow--thumb {
width: 100%;
background-color: #000;
height: 100%;
}
.js-menu--is-open .slide-nav__wrapper {
transform: translateX(0) !important ;
}
.site-nav__thumb-menu button {
background-color: unset !important;
padding: 0;
text-align: left;
width: auto;
min-width: auto;
box-shadow: none !important;
}
nav.slide-nav__wrapper .slide-nav {
padding-bottom: 15px;
}
.slide-nav__overflow--thumb {
left: 0;
right: 0;
bottom: unset;
top: 100px;
position: absolute;
max-height: unset;
}
.header-item.mobile-ac.header-item--icons {
flex: unset;
position: absolute;
right: 10px;
top: 8px;
}
header.site-header.small--hide {
display: block !important;
}
.header-wrapper.header-wrapper--overlay {
transition: .5s ease;
}
.header-wrapper.header-wrapper--overlay.sticky {
position: fixed;
width: 100%;
background-color: #fff;
z-index: 99;
}
.header-wrapper.header-wrapper--overlay.sticky .announcement {
display: none;
}
body .header-wrapper--overlay.sticky + .site-nav__thumb-menu {
position: fixed;
top: -18px;
z-index: 9999;
}
.slide-nav a, .slide-nav button {
color: #000;
text-align: left;
z-index: 9999 !important;
}
.slide-nav .search-modal__wrapper {
border: unset;
}
.slide-nav .search-modal__wrapper {
border: unset;
background: #f1f1f1;
padding: 5px 15px;
}
.search-mobc {
padding: 8px 16px;
display: none;
}
nav.slide-nav__wrapper .slide-nav form button {
float: right;
}
nav.slide-nav__wrapper .slide-nav form button svg {
width: 25px;
height: 40px;
}
.slide-nav__overflow {
transition: .5s ease;
}
.slide-nav__overflow--thumb.sticky {
top: 70px;
position: fixed;
z-index: 9999;
}
.slide-nav__link, .slide-nav__sublist-link {
padding: 16px 20px;
}
.slide-nav__overflow--thumb nav.slide-nav__wrapper {
width: 303px;
height: 100%;
overflow-y: auto;
}
.slide-nav a, .slide-nav button {
color: #000 !important;
}
.slide-nav__overflow--thumb .slide-nav__dropdown {
background-color: #fff;
}
.slide-nav__overflow--thumb.js-menu--is-open {
background-color: #000;
height: 100% !important;
}
.slide-nav__wrapper .slide-nav__item {
border-bottom: 1px solid #ccc;
padding: 7px 0;
}
.site-nav__thumb-menu .site-nav__thumb-cart {
display: none;
}
.account-links-m a.slide-nav__link {
border: 2px solid #000;
width: 140px;;
margin: 0 auto;
font-size: 16px;
font-family: Titling !important;
text-transform: uppercase;
display: none;
}
'Slide out menu css'
.slide-nav__overflow--thumb nav.slide-nav__wrapper {
width: 303px;
height: 100%;
overflow-y: auto;
}
.slide-nav a, .slide-nav button {
color: #000 !important;
}
.slide-nav__overflow--thumb .slide-nav__dropdown {
background-color: #fff;
}
.slide-nav__overflow--thumb.js-menu--is-open {
background-color: #000;
height: 100% !important;
}
.slide-nav__wrapper .slide-nav__item {
border-bottom: 1px solid #ccc;
padding: 7px 0;
}
There are several methods to achieve such a thing. I would recommend to remove. the top attribute which would resolve your problem.
What you are doing is :
and what you want is :
Ensuring both your top menu and your floating menu are top:0; should do the work.
I have the following code:
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#300;400;700;900&display=swap" rel="stylesheet');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
}
/* typography
================== */
h1 {
font-weight: 300;
font-size: 1.7rem;
margin-top: 0;
}
p {
margin-top: 0;
line-height: 1.5;
}
p:last-of-type {
margin-bottom: 0;
}
.title {
font-size: 2.5em;
margin-top: 1em;
margin-bottom: 1.5em;
font-weight: 900;
}
.title span {
font-weight: 300;
display: block;
font-size: .9em;
}
#media(min-width:60rem) {
p {
font-size: 1.2rem;
line-height: 1.6;
}
.title {
font-size: 3.7em;
margin-bottom: 1em;
margin-top: 0;
font-weight: 900;
}
}
/* buttons */
.button {
display: inline-block;
font-size: 1.15em;
text-decoration: none;
text-transform: uppercase;
border-width: 2px;
border-style: solid;
padding: .5em 1.75em;
color: #00ff6c;
border-color: #00ff6c;
}
#media (min-width: 60rem) {
.button {
font-size: 1.5rem;
}
.button-small {
font-size: .7rem;
font-weight: 700;
}
.button-accent {
color: #00ff6c;
border-color: #00ff6c;
}
.button-accent:hover,
.button-accent:focus {
background: #00ff6c;
color: #232323;
}
}
/* header
================== */
header {
position: absolute;
margin-top: 1em;
left: 0;
right: 0;
margin: 1em;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
padding: .5em;
text-transform: uppercase;
color: #FFF;
font-size: .8rem;
}
nav a: hover,
nav a: focus {
color: #DDD;
}
#media(min-width:60rem) {
.logo {
float: left;
}
nav {
float: right;
}
}
/* home-hero
================== */
.home-hero {
background-image: url(https://i.postimg.cc/XY54RwQY/hero-bg.jpg);
background-size: cover;
background-position: center;
padding: 10em 0;
color: #FFF;
}
#media (min-width: 60rem) {
.home-hero {
height: 100vh;
padding-top: 35vh;
}
}
/* hero-home
======================== */
.home-about-textbox {
background-color: #232323;
padding: 4em;
margin: 0 -2.5vw;
outline: 2px solid #00ff6c;
outline-offset: -2.5em;
color: #FFF;
position: relative;
}
.home-about-textbox h1 {
color: #00ff6c;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: .75em;
background: #232323;
padding: 0 .145em;
white-space: nowrap;
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
background-color: mediumvioletred;
color: magenta;
}
#media (min-width: 25rem) {
h1 {
font-size: 2 rem;
}
.home-about-textbox h1 {
top: .6em;
padding: 0 .325em;
}
}
#media (min-width: 60rem) {
h1 {
font-size: 2.5rem;
}
.home-about {
background-image: url();
background-repeat: no-repeat;
padding-bottom: 10em;
}
.home-about-textbox {
width: 50%;
padding: 7em;
outline-offset: -3.75em;
margin-left: -2.5%;
top: -5em;
text-align: left;
box-shadow: 0 0 4em 0 rgba(0, 0, 0, .3);
}
.home-about-textbox h1 {
top: .75em;
left: 6rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: .75em;
background: #232323;
padding: 0 .145em;
}
}
.container {
width: 95%;
max-width: 70em;
margin: 0 auto;
background-color: coral;
font-weight: 100;
color: blue;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creative Inc.</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<header>
<img src="https://i.postimg.cc/NFtwcdYg/logo.png" alt="Creative inc. logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="home-hero">
<div class="container">
<h1 class="title">Making things looks great
<span>for companies who make great stuff</span>
</h1>
See Our Work
</div>
</section>
<div class="container">
<section class="home-about">
<div class="home-about-textbox">
<h1>Who we are</h1>
<p>Sit by the fire drink water out of the faucet hide head under banket so no one can see cat is love, cat is life.Knock dish off table eating always hungry so favor packaging over toy.</p>
<p>
<srong>Rub face on owner.</srong>Peer out window, chatter at birds, lure then to mouth. Chase ball of string eat a plant, kill a hand, i am the best have secret plans.
</p>
</div>
</section>
</div>
</body>
</html>
There is a code snippet: https://codepen.io/danamaria5/pen/gOPZRPa .
Here the "container" class selector in css should select both sections "home-hero" & "home-about". As you can see in the snippet the colors apply just to the home-hero although the background of the home-about becomes coral in the pc media query. I can't figure out why is still black in the mobile format.
And the font-weight is applied just to the home-about. In home-hero, font weight property should be applied just to the bolder top part of the title as the lower one is selected with the .title span which is more specific than the .container. However, this is not the case because the "Making things looks great" text is still bold instead of font-weight: 100; from the container which is selected at the end of the style sheet so nothing else overrides it. Could someone, please explain?
How can I get <label> and #slider to be on the same line?
header {
background: #2f2f2f;
width: 600px;
height: 28px;
margin: 0 auto;
padding: 0 10px;
color: #FFF;
font-size: 12px;
}
header a {
color: #FFF;
}
header a:hover,
header a:focus {
color: #DDD;
}
header #title {
padding: 7px 0;
float: left;
}
header #onoff {
padding: 6px 0;
float: right;
height: 16px;
}
header #onoff label#switch input {
display: none;
}
header #onoff label#switch input+#slider {
background: #CCC;
display: inline-block;
width: 27px;
height: 16px;
position: relative;
cursor: pointer;
transition: .4s;
border-radius: 34px;
}
header #onoff label#switch input+#slider:before {
content: "";
background: #FFF;
width: 16px;
height: 16px;
position: absolute;
transition: .4s;
border-radius: 50%;
}
header #onoff label#switch input:checked+#slider {
background: #4CD964;
}
header #onoff label#switch input:checked+#slider:before {
transform: translateX(11px);
}
<header>
<a id="title" href=".">Site title</a>
<span id="onoff"><label id="switch">NIGHT MODE<input id="toggle" type="checkbox"><span id="slider"></span></label>
</span>
</header>
I strongly discourage you to use floats for this. Use a flexbox instead:
header {
background: #2f2f2f;
width: 600px;
height: 28px;
margin: 0 auto;
padding: 0 10px;
color: #FFF;
font-size: 12px;
display: flex;
justify-content: space-between;
}
header a {
color: #FFF;
}
header a:hover,
header a:focus {
color: #DDD;
}
header #title {
padding: 7px 0;
}
header #onoff {
padding: 6px 0;
height: 16px;
}
header #onoff label#switch input {
display: none;
}
header #onoff label#switch input+#slider {
background: #CCC;
display: inline-block;
width: 27px;
height: 16px;
position: relative;
cursor: pointer;
transition: .4s;
border-radius: 34px;
}
header #onoff label#switch input+#slider:before {
content: "";
background: #FFF;
width: 16px;
height: 16px;
position: absolute;
transition: .4s;
border-radius: 50%;
}
header #onoff label#switch input:checked+#slider {
background: #4CD964;
}
header #onoff label#switch input:checked+#slider:before {
transform: translateX(11px);
}
#switch {
display: flex;
align-items: center;
}
<header>
<a id="title" href=".">Site title</a>
<span id="onoff"><label id="switch">NIGHT MODE<input id="toggle" type="checkbox"><span id="slider"></span></label>
</span>
</header>
I think that's what you want.
header {
background: #2f2f2f;
width: 600px;
height: 28px;
margin: 0 auto;
padding: 0 10px;
color: #FFF;
font-size: 12px;
}
header a {
color: #FFF;
}
header a:hover,
header a:focus {
color: #DDD;
}
header #title {
padding: 7px 0;
float: left;
}
header #onoff {
padding: 6px 0;
float: right;
height: 16px;
}
header #onoff label#switch input {
display: none;
}
header #onoff label#switch input+#slider {
background: #CCC;
/* display: inline-block; */
width: 27px;
height: 16px;
position: relative;
cursor: pointer;
transition: .4s;
border-radius: 34px;
}
header #onoff label#switch input+#slider:before {
content: "";
background: #FFF;
width: 16px;
height: 16px;
position: absolute;
transition: .4s;
border-radius: 50%;
}
header #onoff label#switch input:checked+#slider {
background: #4CD964;
}
header #onoff label#switch input:checked+#slider:before {
transform: translateX(11px);
}
#switch {
display: flex;
width: 120px;
flex-direction: row;
justify-content: space-around;
line-height: 16px;
}
<header>
<a id="title" href=".">Site title</a>
<span id="onoff">
<label id="switch">NIGHT MODE<input id="toggle" type="checkbox">
<span id="slider"></span>
</label>
</span>
</header>
My jekyll sight had been running fine for a while until I add a blog post, which works perfectly locally, but then I get an error via email from GitHub saying
SCSS file Desktop/my-blog/css/style.scss has an error on line 1: File to import not found or unreadable: ../_sass/bootstrap. Load path: /hoosegow/.bundle/ruby/2.4.0/gems/jekyll-theme-primer-0.4.0/_sass.
I went to report this as an issue on the theme I was using, but I noticed that others were having similar build issues with Jekyll. Here's the link to that thread
Also, here is my style.css file, which seems to be causing the error.
---
---
#import '../_sass/bootstrap';
#import '../_sass/syntax-highlighting';
%oswald { font-family: 'Oswald', sans-serif; }
%roboto { font-family: 'Roboto Condensed', sans-serif; }
body {
#extend %roboto;
font-size: 18px;
line-height: 30px;
padding-top: 51px;
-webkit-font-smoothing: antialiased;
}
p {
margin-bottom: 30px;
}
section, header, footer, main, article, nav, aside { position: relative; }
a {
outline: none !important;
text-decoration: none !important;
transition: all 225ms ease;
color: rgb(19, 100, 214);
&:hover { color: #6165FF; }
}
.btn {
text-transform: uppercase;
font-weight: 400;
#extend %oswald;
}
h1, h2, h3, h4, h5, h6 { #extend %oswald; }
::selection {
background: #086AFF;
color: #fff;
}
nav.navbar {
margin: 0;
a {
text-transform: uppercase;
font-size: 16px;
}
.navbar-brand {
text-transform: none;
i {
transition: inherit;
color: rgb(19, 100, 214);
transform: scale(1);
}
&:hover i {
color: rgb(19, 100, 214);
transform: scale(1.35);
}
}
}
.title-group {
text-align: center;
padding: 0 15px;
margin: 50px 0 100px;
p {
max-width: 800px;
margin: 25px auto 0;
}
}
h1.special {
position: relative;
text-align: center;
overflow: hidden;
margin: 4;
text-transform: uppercase;
#extend %oswald;
font-size: 69px;
line-height: 69px;
font-weight: 700;
color: rgb(19, 100, 214);
span {
display: inline-block;
position: relative;
padding: 0 15px;
max-width: 1000px;
&:before, &:after {
content: '';
position: absolute;
display: block;
height: 1px;
background: #e8e8e8;
width: 99999999px;
top: 50%;
transform: translateY(-50%);
}
&:before { left: 100%; }
&:after { right: 100%; }
}
}
.tile {
position: relative;
box-shadow: 0 0.15em 0.35em 0 rgba(0, 0, 0, 0.135);
margin-bottom: 125px;
.inner-guts { padding: 50px; }
h2 {
margin: 0;
font-size: 100px;
font-weight: 400;
letter-spacing: -0.05em;
line-height: 100px;
}
.featurette {
position: relative;
display: block;
overflow: hidden;
margin-bottom: 15px;
width: 100%;
height: 550px;
background-color: #e8e8e8;
.img {
background-size: cover;
background-position: 50% 0;
background-repeat: no-repeat;
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 225ms ease;
transform: scale(1);
&:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
content: '';
background: #000;
opacity: 0.4;
transition: all 225ms ease;
}
}
iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:hover {
.img {
transform: scale(1.2);
&:before {
opacity: 0.2;
}
}
}
}
.excerpt {
font-size: 35px;
font-weight: 300;
line-height: 49px;
color: #484848;
p {
margin: 0;
}
}
.tags {
position: absolute;
left: 0;
top: 100%;
margin-top: 15px;
span {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
text-transform: uppercase;
#extend %oswald;
}
}
.read-more {
margin-top: 50px;
width: 100%;
max-width: 175px;
position: relative;
padding-right: 75px;
i {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-54%);
font-size: 31px;
line-height: 100%;
}
}
}
aside {
font-size: 17px;
color: #525252;
margin: 16px 0;
#extend %oswald;
span {
text-transform: uppercase;
margin: 0 5px;
}
}
.site-footer {
margin-top: 200px;
}
.pagination-wrap {
text-align: center;
}
.topper {
height: 500px;
position: relative;
.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
}
pre {
margin: 75px -100px;
}
#media only screen and (max-width : 991px) {
pre {
margin-left: 0;
margin-right: 0;
}
}
#media only screen and (max-width : 480px) {
.tile .featurette, .topper {
height: 300px;
}
h1.special,
.tile h2 {
font-size: 40px;
line-height: 44px;
}
.tile .inner-guts {
padding: 15px 25px;
}
.tile .excerpt {
font-size: 22px;
line-height: 35px;
}
}
Any advice is extremely helpful!
The error is telling you that the file bootstrap.scss can't be imported; either because it isn't in the location specified (the theme /_scss/ directory) or because it isn't called bootstrap.scss. The link you posted seems completely unrelated.
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;
}