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)
Related
I have styled a button which switches colors of its' borders depending on if its clicked or not (button:focus, button:active). The issue is that the colors do not change on button:focus, only on button:active. Other changes (such as adjusting background picture) of the state of button:focus works just fine.
Here's the CSS:
.buttonrod {
background:url(https://i.imgur.com/MtHnHtP.png) no-repeat;
background-position: 0px -30px;
position:relative;
background-size:cover;
width: 150px;
height: 150px;
text-decoration: none;
display: inline-block;
margin-left: 120px;
font-size: 12px;
cursor: pointer;
font-weight: bold;
border-color:transparent;
color: #E4B018;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
border-color: #757575 #2a2a2a #2a2a2a #757575;
}
.buttonrod:focus {
border-color: #2a2a2a #757575 #757575 #2a2a2a;
background-position: 0px -29px;
outline: none;
}
.buttonrod:active {
border-color: #2a2a2a #757575 #757575 #2a2a2a;
background-position: 0px -29px;
outline: none;
}
For some reason, the color of the border in the :focus state defaults to a light grey all around, instead of the different shadings I have attached. It's driving me insane. I added the line to adjust the image to create the illusion of a pressed button, and that worked both for focus and active. I am clueless, and any help is appreciated.
I'm facing an issue where when my max-height is set to 500px, the scroll appears. However, if i set the height to 100%, the scroll will never appear for one of my tables. Strange enough, my other table works fine.
scss code:
.card-box {
box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
margin-bottom: 8px;
background-color: #fff;
background-clip: border-box;
border: 0 solid rgba(0, 0, 0, 0.125);
border-radius: 0.5rem;
padding: 10px;
max-height: 100%;
overflow: scroll;
.ant-tabs-tab {
font-weight: bold;
}
.ant-table-tbody {
color: #222;
}
.h6-title {
color: blue !important;
font-weight: bold !important;
font-size: 32px !important;
margin-left: 5px !important;
}
}
If i set to 500px:
If i set to 100%:
At 100% size of the browser, there are some white spaces between child elements and their parent wrapper. However, if I modify the browser size to say 90% there are no more white spaces. If I further play with the browser size, that element will toggle between white spaces and no white spaces.
Any idea what am I doing wrong? Thanks
css code:
.flowpanelContainer {
display: inline-flex;
border: .180rem solid COLOR;
border-radius: 5px;
color: COLOR;
font-family: "Roboto",sans-serif;
box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.gwt-ToggleButton {
border: none !important;
background: transparent !important;
border-right: .180rem solid COLOR !important;
height: 100% !important;
outline: none !important;
border-radius: 0 !important;
font-weight: 700 !important;
/*padding: calc(8px + 1.5625vw);*/
padding: 0.5rem 0.8rem !important;
letter-spacing: 1px !important;
transition: all .4s linear !important;
width: max-content !important;
}
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.
I'm trying to use box shadow to create a border around 2 html elements. I cannot user box-shadow on the button element as the performance in Android is very poor, it needs to be on each inner element. I also cannot user border proterty as again the performance is poor on some android devices. As you can see on the jsfiddle, the left and right "borders" are thicker than the top and bottom.
The solution below uses box shadow on the top, left and bottom of the em element and on the top, right and bottom of span element.
How do I make the "border" look even?
<button class="button">
<em></em>
<span class="hidden" style="display: inline;">698</span>
</button>
.button {
background: #00bdf2;
border-color: white;
border-width: 0.1rem;
border-style: solid;
float: right;
height: 3rem;
margin-right: 2.4rem;
margin-top: 0.9rem;
overflow: visible;
padding: 0;
position: relative;
z-index: 101;
border: 0;
}
input, button {
border-radius: 0;
outline: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
}
.button em {
background-position: center center;
background-repeat: no-repeat;
background-size: 1.5rem 1.5rem;
display: inline-block;
float: left;
height: 100%;
padding: 0 1rem;
width: 1.5rem;
-webkit-box-shadow: inset .1rem 0 0 .1rem #000;
-moz-box-shadow: inset 0 0 .2rem #000;
box-shadow: inset .1rem 0 0 .1rem #000;
}
.button > span {
background: #ffcd00;
color: #444444;
float: right;
height: 100%;
font-family: Arial;
font-size: 1.4rem;
line-height: 3rem;
padding: 0 1rem;
text-align: center;
-webkit-box-shadow: inset .1rem 0 0 .1rem #000;
-moz-box-shadow: inset 0 0 .2rem #000;
box-shadow: inset -.1rem 0 0 .1rem #000;
}
By moving the h-shadow to .1rem and -.1rem you are pushing the shadow left (or right) by that value, so by design, this will reveal more of the shadow on that sides.
Removing the value and having it as 0 will fix this, but will also show the shadow of the side you are trying to hide it from so this will not create the effect you are after.