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;
}
}
}
}
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");
#mixin search-box{
padding: 5px 0px 5px 0px;
border: 2px solid lightseagreen;
width:100%;
outline: none;
border-radius: 5px;
color:$color;
font-family: $myFont;
font-size: 23px;
}
.search-container{
background:lightcyan;
margin: 5px auto;
width:30%;
#include: search-box;
}
Here I am using mixins in scss.
But it is giving me error identifier expectedscss(css-identifierexpected)
Please have a look.
#include is used like
#include <name>
So your styles would look like
#mixin search-box {
padding: 5px 0px 5px 0px;
border: 2px solid lightseagreen;
width: 100%;
outline: none;
border-radius: 5px;
color: $color;
font-family: $myFont;
font-size: 23px;
}
.search-container {
background: lightcyan;
margin: 5px auto;
width: 30%;
#include search-box;
}
I''ve written an app in lua using the Corona SDK, I'm trying to download some images from a google drive folder.
I've used the OAth playground to authroize the scopes I need and I've obtained a refresh token and have a method to obtain a new access token when necessary. This is how I download the images:
network.download(
"https://drive.google.com/uc?export=download&id="..decodedResponse.files[index].id,
"GET",
networkListener,
params,
decodedResponse.files[index].name,
system.DocumentsDirectory
)
where decodedResponse refers to the json obtained that lists all the files in the specified folder. This was working fine a few days ago but now whenever I try it, the image downloaded is invalid and corrupt. I even tried using a new folder in the drive.
I've tried other links such like
https://www.googleapis.com/drive/v3/files/FILE_ID_HERE?alt=media
and some others I've seen online but these give me a
code 403
"Daily Limit for Unauthenticated Use Exceeded. Continued use requires signup."
error. I read somewhere that specifying scope could fix the code 403 error but I'm not sure where exactly to specify this.
I'd appreciate the help, thanks!
Edit: I took a look at one of the images with a text editor, the result was some html that look to be code for a google auth page, some of it is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=300, initial-scale=1" name="viewport">
<meta name="description" content="Google Drive is a free way to keep your files backed up and easy to reach from any phone, tablet, or computer. Start with 15GB of Google storage – free.">
<meta name="google-site-verification" content="LrdTUW9psUAMbh4Ia074-BPEVmcpBxF6Gwf0MSgQXZs">
<title>Meet Google Drive – One place for all your files</title>
<style>
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(//fonts.gstatic.com/s/opensans/v15/DXI1ORHCpsQm3Vp6mXoaTYnF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(//fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
</style>
<style>
h1, h2 {
-webkit-animation-duration: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0;
}
#-webkit-keyframes fontfix {
from {
opacity: 1;
}
to {
opacity: 1;
}
}
</style>
<style>
html, body {
font-family: Arial, sans-serif;
background: #fff;
margin: 0;
padding: 0;
border: 0;
position: absolute;
height: 100%;
min-width: 100%;
font-size: 13px;
color: #404040;
direction: ltr;
-webkit-text-size-adjust: none;
}
button,
input[type=button],
input[type=submit] {
font-family: Arial, sans-serif;
font-size: 13px;
}
a,
a:hover,
a:visited {
color: #427fed;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
font-size: 20px;
color: #262626;
margin: 0 0 15px;
font-weight: normal;
}
h2 {
font-size: 14px;
color: #262626;
margin: 0 0 15px;
font-weight: bold;
}
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=url] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
display: inline-block;
height: 36px;
padding: 0 8px;
margin: 0;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
font-size: 15px;
color: #404040;
}
input[type=email]:hover,
input[type=number]:hover,
input[type=password]:hover,
input[type=tel]:hover,
input[type=text]:hover,
input[type=url]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus {
outline: none;
border: 1px solid #4d90fe;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
input[type=checkbox],
input[type=radio] {
-webkit-appearance: none;
display: inline-block;
width: 13px;
height: 13px;
margin: 0;
cursor: pointer;
vertical-align: bottom;
background: #fff;
border: 1px solid #c6c6c6;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
input[type=checkbox]:active,
input[type=radio]:active {
background: #ebebeb;
}
input[type=checkbox]:hover {
border-color: #c6c6c6;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
input[type=radio] {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
width: 15px;
height: 15px;
}
input[type=checkbox]:checked,
input[type=radio]:checked {
background: #fff;
}
input[type=radio]:checked::after {
content: '';
display: block;
position: relative;
top: 3px;
left: 3px;
width: 7px;
height: 7px;
background: #666;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
input[type=checkbox]:checked::after {
content: url(https://ssl.gstatic.com/ui/v1/menu/checkmark.png);
display: block;
position: absolute;
top: -6px;
left: -5px;
}
input[type=checkbox]:focus {
outline: none;
border-color: #4d90fe;
}
.stacked-label {
display: block;
font-weight: bold;
margin: .5em 0;
}
.hidden-label {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
height: 0px;
width: 0px;
overflow: hidden;
visibility: hidden;
}
input[type=checkbox].form-error,
input[type=email].form-error,
input[type=number].form-error,
input[type=password].form-error,
input[type=text].form-error,
input[type=tel].form-error,
input[type=url].form-error {
border: 1px solid #dd4b39;
}
.error-msg {
margin: .5em 0;
display: block;
color: #dd4b39;
line-height: 17px;
}
.help-link {
background: #dd4b39;
padding: 0 5px;
color: #fff;
font-weight: bold;
display: inline-block;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
text-decoration: none;
position: relative;
top: 0px;
}
.help-link:visited {
color: #fff;
}
.help-link:hover {
color: #fff;
background: #c03523;
text-decoration: none;
}
.help-link:active {
opacity: 1;
background: #ae2817;
}
.wrapper {
position: relative;
min-height: 100%;
}
.content {
padding: 0 44px;
}
.main {
padding-bottom: 100px;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}
.google-header-bar {
height: 71px;
border-bottom: 1px solid #e5e5e5;
overflow: hidden;
}
.header .logo {
background-image: url(https://ssl.gstatic.com/accounts/ui/logo_1x.png);
background-size: 116px 38px;
background-repeat: no-repeat;
margin: 17px 0 0;
float: left;
height: 38px;
width: 116px;
}
I can't post the entire thing cause it exceeds the body character limit
I was able to get it to work by using a different url and adding this:
local params = {}
params.progress = true
params.headers = headers
This was the URL I used:
https://www.googleapis.com/drive/v3/files/FILE_ID_HERE?alt=media
I have the following code for my webpage, and when I use it in Chrome every thing is fine, but when I use it in Firefox the style is changed.
I need to make the Firefox style same like Chrome style, so any suggestion for that?
I mention in the code below what I tried to do.
<html>
<head>
<style>
div
{
background-color: #FFFFFF;
border: 1px solid #86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin: 10px;
padding: 5px 5px;
text-decoration: none;
direction:rtl;
border-radius: 8px;
}
a
{
background-color: #FFFFFF;
color: 2F62AC;
font-size: 17px;
font-weight: bold;
text-decoration: none;
direction:rtl;
position: relative;
border-radius: 8px;
border: none;
padding: 12px 10px;
text-align: center;
}
a.option1
{
//Not centered but filled all area
display: flex;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
a.option2
{
//Not centered and not filled all area
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center; */
}
a:active, a:hover {
background-color: #2F62AC;
color: #FFFFFF;
}
</style>
</head>
<body>
<div><a class="option1" href="#">Option 1</a></div>
<div><a class="option2" href="#">Option 2</a></div>
</body>
</html>
Best regards.
You do not need Flexbox for this purpose: just display: block on your anchor:
http://cssdeck.com/labs/ocotcmpf
div
{
background-color: #FFFFFF;
border: 1px solid #86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin: 10px;
padding: 5px 5px;
text-decoration: none;
direction:rtl;
border-radius: 8px;
}
a
{
background-color: #FFFFFF;
color: 2F62AC;
font-size: 17px;
font-weight: bold;
text-decoration: none;
direction:rtl;
position: relative;
border-radius: 8px;
border: none;
padding: 12px 10px;
text-align: center;
display: block; /* here */
}
a:active, a:hover {
background-color: #2F62AC;
color: #FFFFFF;
}