I'm trying to use sass files in an ASP.NET web project. I'm using Visual Studio 2013. Here is the sass stylesheet that i'm trying to use in my project :
$red: rgba(255,74,86,1)
.transition
#include transition( all 0.25s cubic-bezier(.53,.01,.35,1.5))
*
font-family: Helvetica , sans-serif
font-weight: light
-webkit-font-smoothing: antialiased
html
background-color: $red //rgba(245,248,252,1)
form
position: relative
display: inline-block
max-width: 700px
min-width: 500px
box-sizing: border-box
padding: 30px 25px
background-color: white
border-radius: 40px
margin: 40px 0
left: 50%
#include translate( -50% , 0 )
h1
color: $red
font-weight: 100
letter-spacing: 0.01em
margin-left: 15px
margin-bottom: 35px
text-transform: uppercase
button
#extend .transition
margin-top: 35px
background-color: white
border: 1px solid $red
line-height: 0
font-size: 17px
display: inline-block
box-sizing: border-box
padding: 20px 15px
border-radius: 60px
color: $red
font-weight: 100
letter-spacing: 0.01em
position: relative
z-index: 1
&:hover , &:focus
color: white
background-color: $red
.question
position: relative
padding: 10px 0
&:first-of-type
padding-top: 0
&:last-of-type
padding-bottom: 0
label
#extend .transition
transform-origin: left center
color: $red
font-weight: 100
letter-spacing: 0.01em
font-size: 17px
box-sizing: border-box
padding: 10px 15px
display: block
position: absolute
margin-top: -40px
z-index: 2
pointer-events: none
input[type="text"]
#extend .transition
appearance: none
background-color: none
border: 1px solid $red
line-height: 0
font-size: 17px
width: 100%
display: block
box-sizing: border-box
padding: 10px 15px
border-radius: 60px
color: $red
font-weight: 100
letter-spacing: 0.01em
position: relative
z-index: 1
&:focus
outline: none
background: $red
color: white
margin-top: 30px
&:valid
margin-top: 30px
&:focus ~ label
#include translate( 0 , -35px )
&:valid ~ label
text-transform: uppercase
font-style: italic
#include transform( translate( 5px , -35px ) scale(0.6))
which i got it from this site
is the any way to use that style in my project ?
This blog post recommends that you use Mindscape Web Workbench. It appears Web Essentials has SASS support, also.
Edit: As Claies mentions in the comments, it appears there's native support in VS 2013 Update 2.
Related
Please refer to the image below:
Is it possible to implement text shadow CSS property such that only the outer periphery (stroke) of the text shadow is visible.
Use a pseudo element and style it with shadows:
:root {
--body: #FFF;
--outline: #666;
--background: #000;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
main {
min-height: 100vh;
background: var(--background);
color: var(--body);
display: grid;
place-items: center;
position: relative;
z-index: 1;
}
.outline-effect {
font-size: 4rem;
position: relative;
font-weight: 900;
}
.outline-effect::before {
font-size: 150%;
content: attr(data-outline);
position: absolute;
top: -0.333em;
left: 1em;
color: var(--background);
text-shadow: 1px 0 0 var(--outline), 0 1px 0 var(--outline), -1px 0 0 var(--outline), 0 -1px 0 var(--outline);
z-index: -1;
font-weight: 200;
}
<main>
<p class="outline-effect" data-outline="Build">Build.</p>
</main>
You can put multiple shadows that will hide each other. Play with this to get what you desired.
Snippet:
body {background-color: black;}
.demo {
margin-top: 30px;
color: white;
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
text-shadow:
24px -17px 0 black, /* same as background color */
25px -16px 0 white,
23px -18px 0 white,
23px -15px 0 white;
}
<div class="demo">demo</div>
Create four shadows each slightly off (↖ ↗ ↘ ↙) by 1 px, and all that behind the main shadow (white in this case):
<html>
<head>
<style>
div {
font-family: 'Arial Black', sans-serif;
font-size: 100px;
text-shadow:
20px -20px 0 white,
19px -19px 0 red,
19px -21px 0 red,
21px -21px 0 red,
21px -19px 0 red;
}
</style>
</head>
<body>
<div>Build.</div>
</body>
</html>
I think its not possible to achieve this exact effect using text-shadow, since the text at back is larger than the solid text. If you need to stick with text-shadow only, then check #Daniel Sixl's answer.
You can achieve this effect using a ::before selector and webkit-text-stroke. Be sure to match the value of data-text attribute, with the text that is inside the h1.
body{
background: #000;
/* Center Text on Screen */
display: grid;
place-items:center;
height: 100vh;
}
h1{
color: white;
font-size: 5rem;
transform: translateX(-50%);
font-family: sans-serif;
}
h1::before{
content: attr(data-text);
position: relative;
top: -0.15em;
right: -88.75%;
font-size: 1.6em;
-webkit-text-stroke: 2px grey;
-webkit-text-fill-color: transparent;
z-index: -1;
}
<h1 data-text="Build.">Build.</h1>
Messing around in SASS but when my stylesheet is compiling it generates this weird, invalid css.
.container
padding: 3rem 2.5rem 3rem
background-color: red
Since this compiles well in isolation it must be the surrounding sass as pointed out in the comments. If it matters anything it's an angular 5 project:
Surrounding sass: https://pastebin.com/tMMxf97D
What am I doing wrong?
You have some extra spaces, and inconsistent tabs. I added the variables just to test. Check my rearranged code
$prim: #cccccc
$dark-prim: #666666
$grey: grey
#wrapper
background: #F7F7F7
.tournament-card
background: #fff
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.11)
.card-title
background-color: $dark-prim
padding: 2rem
h1
color: #fff
text-align: center
font-size: 1.2rem
.container
padding: 3rem 2.5rem 3rem
background-color: red
.options
color: $grey
margin-bottom: 1.5rem
button
cursor: pointer
font-size: 1.2rem
color: $prim
border-radius: 4rem
display: block
width: 100%
background: transparent
border: 2px solid $prim
padding: 0.9rem 0 1.1rem
transition: color .5s, border-color .5s
margin-top: 3rem
&:hover,
&:focus
background: $dark-prim
color: white
&:active
transform: translateY(1px)
I have a weird case where the caret for the twitter bootstrap select is not appearing after some customisation. I am therefore looking to restore the style for the select. These are the current styles:
#sidebar2 select {
max-width: 100%;
margin: 0px;
border: 1px solid #ccc !important;
outline: 0;
display:block;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075) !important;
border-radius: 2px !important;
width: 100% !important;
height: 32px !important;
font-weight: 500;
-webkit-appearance: none !important;
-webkit-transition: none !important;
text-transform: none;
font: inherit;
vertical-align: top;
}
Because you use -webkit-appearance: none !important, it will make the caret disappear, you can try on mozzila and see the caret still there
I am currently working with a customized jquery alert from this SITE. I am trying to achieve a gray transparent background when the alert appears but have been unsucessful. How can I get a gray transparent screen that covers the whole background behind the alertbox? Here is my EXAMPLE
CSS
<style>
#popup_container {
font-family: Arial, sans-serif;
font-size: 12px;
min-width: 300px; /* Dialog will be no smaller than this */
max-width: 600px; /* Dialog will wrap after this width */
background: #FFF;
border: solid 5px #999;
color: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#popup_title {
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 1.75em;
color: #666;
background: #CCC url(images/title.gif) top repeat-x;
border: solid 1px #FFF;
border-bottom: solid 1px #999;
cursor: default;
padding: 0em;
margin: 0em;
}
#popup_content {
background: 16px 16px no-repeat url(images/info.gif);
padding: 1em 1.75em;
margin: 0em;
}
#popup_content.alert {
background-image: url(images/info.gif);
}
#popup_content.confirm {
background-image: url(images/important.gif);
}
#popup_content.prompt {
background-image: url(images/help.gif);
}
#popup_message {
padding-left: 48px;
}
#popup_panel {
text-align: center;
margin: 1em 0em 0em 1em;
}
#popup_prompt {
margin: .5em 0em;
}
</style>
You need something like in this fiddle
The 'alertblanket' has an high z-index and overlays the entire page. Your dialog then must have a higher z-index to be on top of the 'alertblanket'
EDIT: You can set the color of that alert library simply by setting
$.alerts.overlayiOpacity = 0.5
$.alerts.overlayColor = '#AAA'
Or anything you like. See also the comments inside the .js file of jquery.alerts.js
Edit:
I solved this problem thanks to Emily and Mike below. They told me how to find out where the CSS was coming from using Firebug.
For my site, I had a link black-colored with no underline, then with an underline when hovered. I turned this link into an Amazon "Quick Linker" link, and then it turned blue with an underline.
Someone on Stack Overflow told me to add !important to the CSS, but that didn't change the link format.
Any idea how I could turn this link to black-colored with no underline and still keep it an Amazon "Quick Linker" link?
Here is the code for the link:
'<a type="amzn" category="books" class="links2">'.$row['site'].'</a>'
Here is the CSS for the link:
a.links2:link {
color: #000 !important;
text-decoration: none !important;
text-align: left !important;
margin-top: 6px !important;
margin-bottom: 2px !important;
margin-left: 2px !important;
padding: 0px !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
height: 12px !important;
vertical-align:middle !important;
}
a.links2:visited {
color: #000 !important;
text-decoration: none !important;
text-align: left !important;
margin-top: 6px !important;
margin-bottom: 2px !important;
margin-left: 2px !important;
padding: 0px !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
height: 12px !important;
vertical-align:middle !important;
}
a.links2:hover {
color: #000 !important;
text-decoration: underline !important;
text-align: left !important;
margin-top: 6px !important;
margin-bottom: 2px !important;
margin-left: 2px !important;
padding: 0px !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
height: 12px !important;
vertical-align: middle !important;
}
a.links2:active {
color: #000 !important;
text-align: left !important;
margin-top: 6px !important;
margin-bottom: 2px !important;
margin-left: 2px !important;
padding: 0px !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
height: 12px !important;
vertical-align: middle !important;
}
Is it possible that CSS is declared before the Amazon "Quick Linker"'s styles? The quick linker script could also be setting the !important declaration, which would take precedence over your own declaration. You would need to make sure your styles are set after the styles set by Amazon's script.