I am creating a side navigation panel and I can't seem to figure out how to change colour of the text in link when I hover over it. The background colour changes. It actually worked before I added the animation but I wouldn't want to pass out on the animation.
.sidenav-navigation {
list-style: none;
padding: 1rem;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
.sidenav-navigation-items {
width: 100%;
margin-bottom: 0.5rem;
border-radius: 2rem;
cursor: pointer;
.sidenav-navigation-link {
display: flex;
align-items: center;
height: 3rem;
color: white;
text-decoration: none;
.sidenav-navigation-link-icon {
font-size: 22px;
width: 2rem;
min-width: 2rem;
text-align: center;
}
.sidenav-navigation-link-text {
text-align: center;
margin-right: 0.5rem;
animation:fadeIn 0.7s;
}
}
}
}
.sidenav-navigation-items:hover{
.sidenav-navigation-link {
transition: all .1s ease;
border-radius: 0.25rem;
background-color: white;
color: black;
}
}
#keyframes fadeIn{
0%{opacity:0;}
50%{opacity:50%;}
100%{opacity:100%;}
}
Probably white color style has higher priority due to more specific rules. Try to use !important rule with lower prio style.
.sidenav-navigation-items:hover{
.sidenav-navigation-link {
transition: all .1s ease;
border-radius: 0.25rem;
background-color: white;
color: black !important;
}
}
Other option may be changing the way of rules nesting to below:
.sidenav-navigation {
.sidenav-navigation-items {
.sidenav-navigation-link {
color: white;
}
&:hover {
.sidenav-navigation-link {
color: black;
}
}
}
}
Related
I would like to change the background colour of "After" to blue upon clicking, but no matter what it just doesn't show. I'm not sure what is wrong here in SCSS. Would really appreciate any advice!
Here's the JS Fiddle: https://jsfiddle.net/u1h9fe6v/
.grid-list {
--color: #f6f8ff;
--background: #2b3044;
--background-hover: green;
--background-active: blue;
padding: 6px 12px 6px 8px;
margin: 0;
display: flex;
outline: none;
position: relative;
border: none;
border-radius: 9px;
background: var(--b, var(--background));
cursor: pointer;
-webkit-appearence: none;
-webkit-tap-highlight-color: transparent;
transform: scale(var(--scale, 1)) translateZ(0);
}
.grid-list:active {
--scale: 0.95;
--background-active: blue;
}
.grid-list:hover {
--b: var(--background-hover);
}
It looks like you can set the background color in the
".grid-list.animation.active {" style. Like this ...
.grid-list.animation.active {
--span-name: text-active;
--dots-name: move;
--lines-name: scale;
--lines-duration: 0.15s;
--lines-delay: 0.3s;
background: blue;
}
I just copies this code from a tutorial, But I try to open sub menu it disappears. I don't know what to do Please help me.
#nav_wrapper1 {
width: 100%;
}
.nav_wrapper {
border-bottom:1px solid white;
left: 0;
top:0;
position:top;
width: 100%;
transition: top .5s ease-out;
background: #170030;
height:60px;
z-index:99999;
}
.btn {
padding: 10px 1%;
margin: 5px;
color: #fff;
text-decoration: none;
font-family: normal;
transition: all 0.1s ease;
}
.btn:hover {
transition: all 0.1s ease;
}
#search i {color: #fff;
font-size: 22px;}
#search {
float: right;
font-size: 22px;
padding: 20px 25px;
line-height: 0px;
color: #fff;
margin: 0;
font-weight: 700;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#search:hover {
background: #111;
}
.search_box {
clear: both;
width: 40%;
background: #111;
padding: 0;
margin: 0;
height: 0;
overflow: hidden;
transition: all 0.1s ease-in-out;
float:right;
z-index:99999999999;
}
.search_box.active {
height: auto;
padding: 10px 0;
width:40%;
}
.search_box input {
width: 60%;
font-size: 13px;
margin: 0 0 0 10px;
padding: 10px;
border: none;
background: #fff;
}
.search_box input:focus {
outline: none;
}
.search_box input.search_icon {
clear: both;
width: 30%;
height: auto;
padding: 10px;
margin: 0;
margin-right:10px;
border: none;
color: #fff;
cursor: pointer;
background: #6a00de;
opacity: 1;
transition: all 0.1s ease;
float:right;
}
.search_box input.search_icon:hover {
background: #FFF;
color:#111;
}
.menu-link {
display: none;
}
.spinner-master input[type=checkbox] {
display: none;
}
.menu {
width: 100%;
height: auto;
background: #170030;
color:#170030;
transition: all 0.3s ease;
margin-top:5px;
}
.menu ul {
padding: 0px;
margin: 0px;
list-style: none;
position: relative;
display: inline-block;
}
.menu > li > ul.sub_menu {
min-width: 10em;
padding: 4px 0;
background-color: #111;
border: 1px solid #fff;
}
.menu ul li {
padding: 0px;
}
.menu > ul > li {
display: inline-block;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #fff;
font-size: 18px;
height:100%;
}
.menu ul li a:hover {
background: #111;
color: #fff;
}
.menu ul li.hover > a {
background: #111;
color: #FFF;
}
.menu ul li > a {
padding: 15px;
}
.menu ul ul {
display: none;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul ul > li {
position: relative;
}
.menu ul ul > li a {
padding: 10px 15px;
height: auto;
background: #000000;
}
.menu ul ul > li a:hover {
background: #111;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
#media all and (max-width: 860px) {
.example-header .container {
width: 100%;
}
#search {
color: #fff;
padding: 0px 20px 0px 5px;
margin-top:25px;
}
.spinner-master * {
transition: all 0.3s;
box-sizing: border-box;
}
.spinner-master {
position: relative;
margin: 15px;
height: 30px;
width: 30px;
float: left;
}
.spinner-master label {
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 5px;
left: 0;
}
.spinner-master .spinner {
position: absolute;
height: 4px;
width: 100%;
padding: 0;
background-color: #fff;
}
.spinner-master .diagonal.part-1 {
position: relative;
float: left;
}
.spinner-master .horizontal {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master .diagonal.part-2 {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal {
opacity: 0;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
margin-top: 10px;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
margin-top: -12px;
}
a.menu-link {
display: block;
color: #fff;
float: left;
text-decoration: none;
padding: 10px 16px;
font-size: 1.5em;
}
a.menu-link:hover {
color: #efa666;
}
a.menu-link:after {
content: “2630”;
font-weight: normal;
}
a.menu-link.active:after {
content: “2715”;
}
.menu {
clear: both;
min-width: inherit;
float: none;
top:0px;
position:relative;
}
.menu, .menu > ul ul {
overflow: hidden;
max-height: 0;
background-color: #39484d;
}
.menu > li > ul.sub-menu {
padding: 0px;
border: none
}
.menu.active, .menu > ul ul.active {
max-height: 55em;
}
.menu ul {
display: inline;
}
.menu li, .menu > ul > li {
display: block;
}
.menu > ul > li:last-of-type a {
border: none;
}
.menu li a {
color: #fff;
display: block;
padding: 0.8em;
position: relative;
}
.menu li.has-submenu > a:after {`
content: ‘+’;
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.55em 0.5em;
}
.menu li.has-submenu > a.active:after {
content: “-“;
}
.menu ul ul > li a {
background:#170030;
padding: 10px 18px 10px 30px;
border-bottom: 1px solid #111;
}
.menu ul li a:hover {
background: #4b5f65;
color: #fff;
}
.menu ul li.hover > a {
background: #111;
color: #fff;
}
.menu ul ul, .menu ul ul ul {
display: inherit;
position: relative;
left: auto;
top: auto;
border: none;
}
.search_box.active {
position: absolute;
top: 63px;
z-index: 10;
width:70%;
right:2px;
}
.search_box input {
width: 50%;
float:left;
}
.search_box input.search_icon {
width: 30%;
float:right;
margin-right:14px;
margin-top:-37px;
}
}
.menu ul ul {
display: none;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
delete display: none
.menu ul ul {
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
or change to display:block;
.menu ul ul {
display:block;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
try it..
In my Laravel 7.6 / blade / bootstrap 4 / flex app I have resources/sass/frontend.scss file more 1000 rows
Also I use resources/sass/_variables.scss with about 40 lines
I run command
npm run watch-poll
and it takes rather wrong time to compile my 2 scss files.
I want to split frontend.scss into several small scss files and wonder how better to make it for
better performance?
In my resources/views/layouts/frontend.blade.php I have
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
<link rel="icon" type="image/png" href="/favicon.ico"/>
<link rel="alternate" type="application/atom+xml" title="News" href="/feed">
<link href="{{ asset('css/frontend.css') }}{{ "?dt=".time() }}" rel="stylesheet" type="text/css">
Having several small scss files is it better to include them in at top
of frontend.scss, like I do with _variables.scss?
If the order of these files have meaning?
Or maybe beetr to include generated .css file in frontend.blade.php ?
Or some other way ?
UPDATED # 1:
I have resources/sass/_variables.scss :
// Body
// Typography
$font-family-sans-serif: "Roboto", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
$text-color: #636b6f;
$font_size: 18px;
//$font_size: 24px;
$background_color: #f5f8fa;
$border_color: #999;
$border-separator-color: 0.05rem solid #b3b3b3;
$item-border: 1px solid #92baa7;
$button_color: #FFFFFF; /* color of button */
$cancel_background_color: #949494; /* background color of cancel button */
$prev_background_color: #45A6F9; /* background color of previos button */
$text_error_color: red;
$link_color: #475fe8;//maroon;
$toggle_color: olive;
$indent_xs_1: 0.1em;
$indent_xs_2: 0.2em;
$indent_xs: 0.3em;
$indent_sm: 0.5em;
$indent_md: 1em;
$indent_lg: 2em;
$text_color : #00001D;
$indent_img : 0.7em; /* $indent for image : margin, padding */
$current_admin_template: 'defaultBS41Backend';
$debug_mode : false;
and full content resources/sass/FlexyFrontend/frontend.scss :
#import "node_modules/font-awesome/scss/font-awesome";
#font-face {
font-family:'Simple line icons';
src:url('/fonts/simple-line-icons/Simple-Line-Icons.ttf');
font-style:normal;
}
#font-face {
font-family:'Themify';
src:url('/fonts/themify/themify.ttf');
font-style:normal;
}
#font-face {
font-family:'Source sans pro';
src:url('/fonts/source-sans/sourcesanspro-regular-webfont.ttf');
font-style:normal
}
#font-face {
font-family:'Open sans' ;
src:url('/fonts/opensans/opensans.ttf');
font-style:normal;
}
#font-face {
font-family:'DejaVu Sans';
src:url('/fonts/DejaVuSans/DejaVuSans-Bold.ttf');
font-style:normal;
}
// Variables
#import "../variables";
// Bootstrap
#import '~bootstrap/scss/bootstrap';
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: $background_color;
//color: #cccccc;
//font-size: 14px;
/* Helvetica/Arial-based sans serif stack */
font-family: 'Roboto', 'Open Sans';
font-size: $font_size;
}
.wrapper_area {
height: 100%;
display: flex;
flex-direction: column;
}
.header_area, .footer_area {
background: silver;
}
.content_area {
flex: 1;
overflow: auto;
background: pink;
}
/// COMMON ELEMENTS BLOCK START
.bordered_item {
border: 1px ridge grey !important;
//border: 2px solid yellow;
}
.bordered_block {
border: $border-separator-color;
font-size: $font_size;
color: $text-color;
padding: 0 0.4em 0.4em 0.4em;
margin: 0 0 1.5em 0;
-webkit-box-shadow: 5px 5px 5px 5px #000;
box-shadow: 2px 2px 2px 2px #d7d7d7;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-border-radius: 8px;
}
.hidden_info {
color:$background_color;
//display: none;
//color:$text-color;
background-color:$background_color;
}
/// COMMON ELEMENTS BLOCK END
.page_content_container {
#if ($debug_mode) {
border: 3px dotted yellow;
}
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
justify-self: flex-start;
justify-items: flex-start;
}
.raised_page_content_container {
flex: 1 1 200px;
padding: 20px;
margin: auto;
margin-top: 15%;
overflow-y: auto;
}
.page_content_header {
#if ($debug_mode) {
border: 0.2rem dotted green;
}
padding: 0px;
margin: 0;
}
.page_content {
flex: 1 1;
#if ($debug_mode) {
border: 3px dotted red !important;
}
justify-self: flex-start;
justify-items: flex-start;
align-self: flex-start;
align-items: flex-start;
padding: 0;
margin: 0;
width: 100% !important;
height: 100% !important;
.bordered_block{}
}
.page_content_footer {
flex: 1;
#if ($debug_mode) {
border: 2px dotted olive;
}
padding: 0px;
margin: 0;
}
.content_container {
width: 100%;
padding: 4px;
}
.card, .card-body, .card-text, .card-title, .card-footer {
background-color: $background_color !important;
//background-color: green !important;
font-family: 'Roboto', 'Open Sans' !important;
text-decoration: none !important;
border: none;
border-radius: 0;
}
section {
float: left;
width: 100%;
background: $background_color; /* fallback for old browsers */
padding: 30px 0;
}
//h1{float:left; width:100%; color:#232323; margin-bottom:30px; font-size: 14px;}
//h1 span{font-family: Roboto, serif; display:block; font-size:45px; text-transform:none; margin-bottom:20px; margin-top:30px; font-weight:700}
//h1 a{color:#131313; font-weight:bold;}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
-webkit-border-radius: 20%;
-moz-border-radius: 20%;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
padding: 8px;
box-shadow: 0px 0px 20px #b4b4b4;
border-top:none;
border-left:none;
border-right:solid 2px #dddddd;
border-bottom:solid 2px #dddddd;
}
.found_text {
background-color: #faff98;
}
.badge {
display: inline-block;
min-width: 10px;
padding: 4px 8px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: #777;
border-radius: 10px;
}
.img-preview-wrapper {
text-align: center !important;
border: none;
}
.news-preview-wrapper {
text-align: center !important;
border: none;
}
/// COMMON FLEX ELEMENTS BLOCK START
.block_splitting_left_23 {
display: flex;
justify-self: flex-start;
flex: 2 1 0;
font-weight: normal;
#if ($debug_mode) {
border: 6px dotted green;
}
}
.block_splitting_right_13 {
display: flex;
justify-self: flex-start;
flex: 1 1 0 ;
font-weight: normal;
color: #403941;
width: 100% !important;
#if ($debug_mode) {
border: 5px dotted red;
}
}
.block_splitting_left_half {
display: flex;
justify-self: flex-start;
flex: 1;
font-weight: normal;
#if ($debug_mode) {
border: 6px dotted yellow;
}
}
.block_splitting_right_half {
display: flex;
justify-self: flex-end;
flex: 1 ;
font-weight: normal;
color: #403941;
#if ($debug_mode) {
border: 5px dotted maroon;
}
}
.key_values_rows_label_half {
display: flex;
justify-self: flex-start;
flex: 1;
font-weight: normal;
#if ($debug_mode) {
border: 2px dotted green;
}
flex-wrap: nowrap;
white-space: nowrap;
}
.key_values_rows_value_half {
justify-self: flex-end;
flex: 1;
font-weight: normal;
color: #403941;
#if ($debug_mode) {
border: 2px dotted red;
}
}
.key_values_rows_label_13 {
display: flex;
justify-self: flex-start;
flex: 1 1 30px;
font-weight: normal;
#if ($debug_mode) {
border: 2px dotted green;
}
width: auto;
margin: 0;
padding: 0;
flex-wrap: nowrap;
white-space: nowrap;
}
.key_values_rows_value_13 {
justify-self: flex-end;
flex: 3 1;
font-weight: normal;
color: #403941;
margin: 0;
padding: 0;
#if ($debug_mode) {
border: 2px dotted red;
}
}
.space_between_wraping_cell {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.column_content_left_aligned {
#if ($debug_mode) {
border: 2px dotted blue;
}
display: flex;
flex: 1;
flex-direction: column;
justify-items: flex-start;
align-items: flex-start;
width: 100% !important;
}
.column_content_centered {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
}
.row_content {
display: flex;
flex-direction: row;
justify-content: flex-start;
//align-items: center;
//border: 2px dotted green;
}
.column_content {
display: flex;
flex: 1;
flex-direction: column;
justify-content: flex-start;
}
.row_content_centered {
display: flex !important;
flex-direction: row !important;
justify-content: space-around !important;
align-items: center;
#if ($debug_mode) {
border: 3px dotted red !important;
}
}
.row_content_right_aligned {
display: flex !important;
flex-direction: row !important;
justify-content: flex-end !important;
align-items: center;
border: 0px dotted green !important;
}
.key_values_rows {
display: flex;
flex-direction: row;
padding: 4px;
}
.key_values_rows_value {
justify-self: flex-end;
font-weight: normal;
color: #403941;
}
.key_values_rows_label {
display: flex;
justify-self: flex-start;
flex: 4;
font-weight: normal;
}
.bottom_split_border {
border-bottom: $border-separator-color !important;
}
.top_split_border {
border-top: $border-separator-color !important;
}
/// COMMON FLEX ELEMENTS BLOCK END
// DIFFERENT DEVICES BLOCK START
/* Big Media */
.block_2columns_md {
display: flex;
flex-direction: row;
padding: 0;
margin: 0;
#if ($debug_mode) {
border: 4px ridge blue !important;
}
width: 100%;
}
.block_2columns_sm {
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 4px;
#if ($debug_mode) {
border: 3px solid red;
}
width: 100%;
}
img.lazy {
border: 4px dotted red !important;
background-color: yellow !important;
}
.lazy_image {
border: 4px dotted red !important;
background-color: yellow !important;
}
.vote_item {
#extend .bordered_item;
}
.single_vote_image_left_aligned {
//border: 1px dotted gray;
border: 2px dotted red;
padding: 2px;
margin: 5px;
height: auto;
}
.image_in_3_columns_list {
border: 1px dotted gray;
//border: 2px dotted green;
padding: 2px;
margin: 2px;
max-width: 280px;
height: auto;
}
.vote_item_selection_image {
border: 1px dotted gray;
padding: 2px;
margin: 5px;
}
/* Large ≥992px ipad pro */
#media only screen and (min-width: 1280px) { /* Extra large ≥ 1200px */
.single_vote_image_left_aligned {
max-width: 340px;
}
.image_in_3_columns_list {
max-width: 280px;
}
.img_full_width_wrapper {
max-width: 1080px;
height: auto;
padding: 4px;
margin: 0;
}
.category_image {
max-width: 1030px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.flexbox-parent {
padding-left: 280px !important;
padding-right: 280px !important;
}
.test-device {
background: url(/images/test-device/exlg.png) center center no-repeat;
border: 1px dotted #2D27B6;
margin: 1px;
min-width: 48px;
height: 32px;
}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
max-width: 340px;
height: auto;
}
.vote_item_selection_image {
max-width: 380px;
height: auto;
}
} // #media only screen and (min-width: 1280px) { /* Extra large ≥ 1200px */
#media only screen and (min-width: 992px) and (max-width: 1280px) { /*lg*/
.single_vote_image_left_aligned {
max-width: 300px;
}
.image_in_3_columns_list {
max-width: 220px;
}
.img_full_width_wrapper {
max-width: 820px;
height: auto;
padding: 4px;
margin: 0;
}
.category_image {
max-width: 680px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.flexbox-parent {
padding-left: 120px !important;
padding-right: 120px !important;
}
.test-device {
background: url(/images/test-device/lg.png) center center no-repeat;
border: 1px dotted #2D27B6;
margin: 1px;
min-width: 32px;
height: 32px;
}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
max-width: 300px;
height: auto;
}
.vote_item_selection_image {
max-width: 300px;
height: auto;
}
} // #media only screen and (min-width: 992px) and (max-width: 1280px) { /*lg*/
/* md : Medium ≥768px ipad or ipad mini */
#media only screen and (min-width: 768px) and (max-width: 991px) { /* Ipad Pro md */
.single_vote_image_left_aligned {
max-width: 200px;
}
.image_in_3_columns_list {
max-width: 200px;
}
.img_full_width_wrapper {
max-width: 600px;
height: auto;
padding: 4px;
margin: 0;
}
.category_image {
max-width: 580px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.v--modal {
top: 25px !important;
left: 25px !important;
width: 720px !important;
height: 960px !important;
}
.flexbox-parent {
padding-left: 50px !important;
padding-right: 50px !important;
}
.page_content_container {
padding: 12px;
}
.test-device {
background: url(/images/test-device/md.png) center center no-repeat;
border: 1px dotted #2D27B6;
margin: 1px;
min-width: 32px;
height: 32px;
}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
max-width: 200px;
height: auto;
}
.vote_item_selection_image {
max-width: 180px;
height: auto;
}
} // #media only screen and (min-width: 768px) and (max-width: 991px) { /* md - Ipad Pro */
/* sm : Small ≥ 576px Nexus7 */
#media only screen and (min-width: 576px) and (max-width: 767px) { /* sm : Nexus 7 */
.single_vote_image_left_aligned {
max-width: 240px;
}
.image_in_3_columns_list {
max-width: 220px;
}
.img_full_width_wrapper {
max-width: 500px;
height: auto;
padding: 4px;
margin: 0;
}
.category_image {
max-width: 500px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.v--modal {
top: 20px !important;
left: 20px !important;
width: 560px !important;
height: 920px !important;
}
.flexbox-parent {
padding-left: 10px !important;
padding-right: 10px !important;
}
.page_content_container {
padding: 8px;
}
.block_2columns_md { /* sm */
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
#if ($debug_mode) {
border: 3px solid greenyellow;
}
width: 100%;
}
.test-device { /* xs600.png */
background: url(/images/test-device/sm.png) center center no-repeat;
border: 1px dotted #2D27B6;
margin: 1px;
min-width: 64px;
height: 32px;
}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
max-width: 480px;
height: auto;
}
.vote_item_selection_image {
max-width: 400px;
height: auto;
}
} //#media only screen and (min-width: 576px) and (max-width: 767px) { /* sm : Nexus 7 */
/* xs : Extra small < 576px iphon5/SE */
#media only screen and (max-width: 575px) { /* iphon5/SE */
.single_vote_image_left_aligned {
max-width: 120px;
}
.image_in_3_columns_list {
max-width: 240px;
}
.task_image {
max-width: 100px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.category_image {
max-width: 280px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.img_full_width_wrapper {
max-width: 260px;
height: auto;
padding: 4px;
margin: 0;
}
.v--modal {
top: 10px !important;
left: 10px !important;
width: 300px !important;
height: 540px !important;
}
.flexbox-parent {
padding-left: 2px !important;
padding-right: 2px !important;
}
.page_content_container {
padding: 2px;
margin: auto;
}
.block_2columns_md { /* xs - iphon5/SE */
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
#if ($debug_mode) {
border: 2px solid blue;
}
width: 100%;
}
.test-device {
background: url(/images/test-device/xs.png) center center no-repeat;
border: 1px dotted #2D27B6;
margin: 1px;
min-width: 64px;
height: 32px;
}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
max-width: 250px;
height: auto;
}
.vote_item_selection_image {
max-width: 200px;
height: auto;
}
} //#media only screen and (max-width: 575px) { /* xs - iphon5/SE */
// DIFFERENT DEVICES BLOCK END
/// FLEX BUTTONS BLOCK START
.content_with_right_button {
display: flex;
flex-direction: row;
}
.content_with_right_button_left_content {
display: flex;
flex: 1 1;
#if ($debug_mode) {
border: 2px dotted green;
}
}
.content_with_right_button_right_button {
display: flex;
flex: 0 0 30px;
#if ($debug_mode) {
border: 2px dotted red;
}
align-items: center;
justify-content: center;
}
/// FLEX BUTTONS BLOCK END
/// FLEX BADGE BLOCK START
.badge_item_row {
flex: 1 0 2rem;
//background-color: lightpink;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
padding: 0;
margin: 0;
}
.badge_item_row_cell {
flex-wrap: wrap;
flex: 1 0;
align-content: center;
justify-content: space-around;
padding: 0;
#if ($debug_mode) {
border: 2px dotted red !important;
}
}
/// FLEX BADGE BLOCK START
/* FOOTER BLOCK START */
.context-dark, .bg-gray-dark, .bg-primary {
color: rgba(255, 255, 255, 0.8);
}
.footer-classic a, .footer-classic a:focus, .footer-classic a:active {
color: #0b0b0b;
}
.nav-list li {
padding-top: 5px;
padding-bottom: 5px;
}
.nav-list li a:hover:before {
margin-left: 0;
opacity: 1;
visibility: visible;
}
ul, ol {
list-style: none;
padding: 0;
margin: 0;
}
.menu-item {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 5px 0 5px 0 !important;
margin: 0 !important;
color: white;
background-color: #2D3246 !important;
}
footer {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
.menu-items-container {
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 0 !important;
margin: 0 !important;
background-color: #2D3246 !important;
}
.nav-list li a:before {
content: "\f14f";
font: 400 21px/1 "Material Design Icons";
//color: #4d6de6;
display: inline-block;
vertical-align: baseline;
margin-left: -28px;
margin-right: 7px;
opacity: 0;
visibility: hidden;
transition: .22s ease;
}
.app_title_icon_selected_dashboard {
color: transparent;
background-color: white;
margin-right: 5px;
}
.app_title_icon_warning {
color: red;
background-color: yellow ;
margin-right: 5px;
}
.app_title_icon {
color: $text-color;
background-color: transparent;
margin-right: 5px;
}
/* FOOTER BLOCK END */
/* breadcrumb BLOCK START */
.breadcrumb {
margin: 0px;
padding: 0px;
//border: 0px dotted green;
}
.breadcrumb-item {
//background-color: darkgrey;
}
.breadcrumb-item.active {
}
/* breadcrumb BLOCK END */
/* COMPONENTS BLOCK START */
.taggable-votes-block {
width: 100% !important;
padding: 12px !important;
margin: 0 !important;
flex: 1 !important;
flex-direction: column !important;
align-items: flex-start !important;
#extend .bordered_block
}
.active-vote-categories-block {
width: 100% !important;
padding: 12px !important;
margin: 0 !important;
flex: 1 !important;
flex-direction: column !important;
align-items: flex-start !important;
#extend .bordered_block
}
.most-rating-quiz-quality-block {
width: 100% !important;
padding: 12px !important;
margin: 0 !important;
#extend .bordered_block
//border: 2px dotted blue !important;
}
.active-banners-block {
width: 100% !important;
padding: 12px !important;
margin: 0 !important;
#extend .bordered_block
//border: 2px dotted blue !important;
}
.block-selection {
//z-index: 1;
border: 4px ridge #fffffe;
padding: 0;
margin: 0;
//background-color: yellow;
}
/* COMPONENTS BLOCK END */
Any ideas how to optimize it ?
Thanks!
You could try with this solution to keep tidy your sass code and
almost parallel to the structure of your blades .
sass/
|
|– general/
|– |- parts/
| |– _reset.scss // Reset Style
| |– _typography.scss // Import fonts and define property
| |– _variables.scss // Define scss variables
| |
| |- _general.scss // Import all the general parts
|
|– layout/
| |- parts/
| |– _navigations.scss // Navigation
| |– _header.scss // Header
| |– _footer.scss // Footer
| |– _sidebar.scss // Sidebar
| |
| |– _layouts.scss // Import all the layout parts
|
|– fontend/
| |- page/
| |– parts/ // Page sections
| |– _page.scss // Import all the page sections
| |
| |– _frontend.scss // Import _page.scss
|
|– admin/
| |- page/
| |– parts/ // Page sections
| |– _page.scss // Import all the page sections
| |
| |– _admin.scss // Import _page.scss
|
|
`– main.scss // Import _general.scss,_layout.scss, ..., ...,
- vendors.scss // Import Bootstrap,Fontawesome, ..., ...,
Pay attention to import the files in the correct order!
Little Extra:
In Laravel I've got used to compile vendors.scss as a separate file once I started the project to avoid that npm run watch compile (bootstrap, fontawesome, etc.) at every save (Don't forget to add the vendors.css public path to the head of your documents and when you go to production to minify it with npm run production).
My webpack.mix.js looks like:
const mix = require("laravel-mix");
mix.js('resources/js/app.js', 'public/js');
mix.sass("resources/sass/app.scss", "public/css");
// Uncomment the next line to compile vendors scss
//mix.sass("resources/sass/vendors.scss", "public/css");
In SASS's class selecter, I want to select parent's sibling.
.bw-textarea {
height: 150px;
padding: 10px;
overflow-y: auto;
background: white;
text-align: left;
width: 100%;
border: 1px solid #eeeeee;
font-size: 12px !important;
color: #666666;
// textarea:disabled & {
// background: #efefef;
// }
}
Compiled above sass code,
.bw-textarea textarea:disabled {
background: #efefef;
}
But I want to show result like this css code...
How to select like this in sass?
textarea.bw-textarea:disabled {
background: #efefef;
}
You gotta use #root in this case. It's pretty simple
This link will give a clear idea about this selector
.bw-textarea {
#at-root textarea#{&}:disabled{
background: cyan;
}
}
This will compile to
textarea.bw-textarea:disabled {
background: cyan;
}
See this PEN
This is what your looking for:
.bw-textarea {
height: 150px;
padding: 10px;
overflow-y: auto;
background: white;
text-align: left;
width: 100%;
border: 1px solid #eeeeee;
font-size: 12px !important;
color: #666666;
&:disabled {
background: #efefef;
}
}
Check out this SO answer for a lil more idea on the nested pseudo selectors
Sass parent selector and hover?
And of course check the sass docs
https://sass-lang.com/documentation/file.SASS_REFERENCE.html
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
my website url is:www.swadihandicrafts.com.when ever open in chrome browser product description overlaping with image.i'm tried lot.but i'm not able to solve that.please give any solution for that.thanks in advance.
<?php
/**
* Magento
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE_AFL.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license#magentocommerce.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade Magento to newer
* versions in the future. If you wish to customize Magento for your
* needs please refer to http://www.magentocommerce.com for more information.
*
* #category design
* #package base_default
* #copyright Copyright (c) 2012 Magento Inc. (http://www.magentocommerce.com)
* #license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
*/
/**
* Product description template
*
* #see Mage_Catalog_Block_Product_View_Description
*/
?>
<?php $_description = $this->getProduct()->getDescription(); ?>
<?php if ($_description): ?>
<h2><?php echo $this->__('Details') ?></h2>
<div class="std">
<?php echo
$this->helper('catalog/output')->productAttribute($this->getProduct(), $_description, 'description') ?>
</div>
<?php endif; ?>
style.css
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, strong, ol, ul, li, table, tr, th, td, form { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; }
table { border-collapse: collapse; border-spacing: 0; }
input, button{ overflow: visible; }
html, body { height: 100%; min-height: 100%; }
body { font: normal 11px/14px tahoma, arial, verdana, sans-serif; text-align:center; color: #333; background: #f6f6f6; }
p { padding: 0 0 10px; }
ul { padding: 0 0 0 16px; }
li { padding: 0 0 8px; }
a { text-decoration: none; }
a:link, a:visited { color: #1d64c1; }
a:hover, a:active { color: #6687dd; text-decoration: underline; }
.clear, .box .content { display: inline-block; }
.clear:after, .box .content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .clear, * html .box .content { height: 1%; }
.clear, .box .content { display: block; }
.none, .hidden { display: none; }
.page { position: relative; width: 100%; min-width: 750px; min-height: 100%; }
* html .page { height: 100%; }
.page .header { width: 100%; height: 53px; text-align: left; background: #363b47 url('../img/common/top_bg.png') 0 0 repeat-x; }
.page .header .company-logo { float: right; display: block; margin: 9px 20px 0 10px; width: 100px; height: 31px; overflow: hidden; text-indent: -9999px; background: url(../img/common/top-company-logo.gif) no-repeat; }
.page .header .header-area { height: 53px; }
.page .header h1 { float: left; width: 210px; height: 50px; text-align: left; }
.page .header h1 a { display: block; margin: 0 0 0 10px; width: 210px; height: 50px; overflow: hidden; text-indent: -9999px; background: url(../img/common/def_plesk_logo.gif) no-repeat; }
.page .header .header-text { float: right; font-size: 11px; }
.page .header .header-text a { float: left; margin: 11px 13px 0 0; color: #506cc6; text-decoration: none; font-size: 11px; }
.page .header .header-text a.txt-banner { margin-right: 10px; }
.page .header .header-text a strong { font-weight: normal; }
.page .header .header-text a.top-copyright { text-align: right; }
.wrapper { margin: 0 auto; padding: 24px 0 50px; width: 734px; text-align: left; }
#body { margin: 0 auto; padding: 24px 0 57px 0; width: 734px; text-align:left; }
.box { position: relative; background: #fff; border: 1px solid #c0c0c0; width:100%; }
.box .content { padding: 10px; position: relative; }
.box em { display: block; width: 11px; height: 11px; position: absolute; background: url('../img/common/box-corners.png') no-repeat; overflow: hidden; }
.box em.tl { background-position: 0 0; left:-1px; top:-1px;}
.box em.tr { background-position: -29px 0; right:-1px; top:-1px;}
.box em.bl { background-position: 0 -29px; left:-1px; bottom:-1px;}
.box em.br { background-position: -29px -29px; right:-1px; bottom:-1px;}
.globe { float: left; background: url('../img/common/globe.png') 0 0 no-repeat; width: 167px; height: 198px; margin: 0; }
.welcome { padding: 0 0 0 187px; }
h2 { margin: 5px 0 10px; padding: 10px 0 3px; font-size: 18px; font-weight: normal; color: #000; }
h3 { margin: 10px 0 5px 0; }
.hr { border-top: 1px solid #e0e0e0; margin-top: 5px; padding: 10px 0 0; overflow:hidden; }
.center { text-align: center; }
.products { width: 390px; float: right; }
.new-to-parallels { width: 330px; float: left; }
.column { width: 180px; }
.column.left { float: left; }
.column.right { float: right; }
.column strong { display: block; margin-bottom: 11px; }
.column p { display: block; margin-top: 15px; font-size: 10px; }
.column img { float:left; margin-right: 15px; width: 69px; }
.page .footer { position: absolute; left: 0; bottom: 0; border-top: 1px solid #c0c7fc; width: 100%; min-width: 300px; height: 38px; background: #d9e9ff url('../img/common/footer_bg.png') 0 0 repeat-x; }
.page .footer-area { height: 38px; font-size: 11px; text-align: left; color: #000; }
.page .footer .description { margin: 0; padding: 12px 10px 0; }
.icons-area { padding: 5px 10px 10px; text-align: center; background: url('../img/common/blocks_bg.png') 0 100% no-repeat; }
.icon { display: -moz-inline-box; display: inline-block; margin: 0 3px 12px 0; padding: 0; min-height: 32px; font: normal 11px/13px tahoma, arial, helvetica, sans-serif; text-decoration: none; text-align: left; vertical-align: top; color: #000; cursor: pointer; background-position: 50% 0; background-repeat: no-repeat; }
a.icon:link, a.icon:visited, a.icon:hover, a.icon:active { color: #000; text-decoration: none; }
.icon span { display: block; padding: 34px 0 0; width: 80px; text-align: center; cursor: pointer; }
#asp { background-image: url('../img/glyph/btn_asp_bg.gif'); }
#aspnet { background-image: url('../img/glyph/btn_aspdotnet_bg.gif'); }
#coldfusion { background-image: url('../img/glyph/btn_coldfusion_bg.gif'); }
#perl { background-image: url('../img/glyph/btn_perl_bg.gif'); }
#php { background-image: url('../img/glyph/btn_php_bg.gif'); }
#python { background-image: url('../img/glyph/btn_python_bg.gif'); }
#ssi { background-image: url('../img/glyph/btn_ssi_bg.gif'); }
#fcgi { background-image: url('../img/glyph/btn_fast_cgi_bg.gif'); }
#miva { background-image: url('../img/glyph/btn_miva_bg.gif'); }
.test { width: 680px; }
.test .pathbar { color: #7b7b7b; }
.test .pathbar a { text-decoration: underline; color: #7b7b7b; }
.test .pathbar a:hover { color: #39f; }
.test h2 { margin: 10px 0; font-size: 17px; font-weight: normal; }
.test .tab-content { border: 1px solid #a0b0e9; padding: 10px; background: #fff; }
iframe { border: 1px solid #a0b0e9; }
fieldset { border: 1px solid #e0e0e0; margin: 0; padding: 0 10px 10px; }
legend { margin: 0; padding: 0 2px 5px; vertical-align: middle; font-weight: bold; color: #000; }
.form-fields { padding-top: 6px; }
.formFields { margin: 5px 0; }
.formFields, .formFields input, .formFields select, .formFields textarea { font: normal 11px 'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif; }
.formFields td.name { padding: 0 10px 10px 0; width: 200px; vertical-align: top; font-weight: bold; }
.buttonsContainer { margin-top: 10px; text-align: right; }
.buttonsContainer .commonButton { display: inline; margin-left: 14px; }
.buttonsContainer .commonButton span { display: none; }
.buttonsContainer .commonButton button { border: 0; width: 91px; height: 21px; text-align: center; white-space: nowrap; cursor: pointer; font: normal 11px 'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif; background: transparent url('../img/glyph/btn_bg.gif') 0 0 no-repeat; }
.commonButton button[disabled] { color: #999; background-image: url('../img/glyph/btn_bg-disabled.gif'); }
#bid-ok button { padding-left: 8px; background-image: url('../img/glyph/btn_ok_bg.gif'); }
.commonButton button:hover { background-position: 0 -21px; }
.commonButton button[disabled]:hover { background-position: 0 0; }
.testRelults#testFailed { border: 1px solid #ccc; margin: 0 0 10px; padding: 10px 10px 10px 32px; background: #fde9e5 url('../img/icons/fail.gif') 10px 11px no-repeat; }
.testRelults#testSuccessful { border: 1px solid #ccc; margin: 0 0 10px; padding: 10px 32px; background: #bff7b4 url('../img/icons/success.gif') 10px 11px no-repeat; }
.testResult { font-weight: bold; }
.test-data { text-align: left; background: #fff; }
.test-data table { border-collapse: collapse; margin-bottom: 10px; width: 100%; color: #000; background-color: white; }
.test-data table th, .test-data table td { padding: 4px 6px; }
.test-data tr.subhead { background-color: #e8f4fe; }
.test-data tr.subhead th { border-bottom: 1px solid #b1c1f9; background: #e8f4fe url('../img/common/th-na-bg.gif') 0 0 repeat-x; }
.test-data th.alt { border-top: 1px solid #b1c1f9; border-bottom: 1px solid #b1c1f9; color: #000; background-color: #dbebff; }
.test-data tr.alt { background-color: #ebf4ff; }
The problem appears when applying clear on the wrapper element. When you remove the clear, the bug goes away.
According to the W3C specs regarding the clear property:
This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.