Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jan 28 13:35
    SinarPandora starred japgolly/scalacss
  • Dec 17 2018 21:54
    japgolly commented #138
  • Dec 17 2018 21:54

    japgolly on master

    Update ScalaJsReact, ScalaJs + … Merge pull request #138 from al… (compare)

  • Dec 17 2018 21:54
    japgolly closed #138
  • Dec 15 2018 15:08
    allantl edited #138
  • Dec 15 2018 15:07
    allantl edited #138
  • Dec 15 2018 14:53
    allantl edited #138
  • Dec 15 2018 14:52
    allantl edited #138
  • Dec 15 2018 14:52
    allantl synchronize #138
  • Dec 15 2018 08:21
    allantl opened #138
  • Dec 15 2018 08:17
  • Dec 11 2018 15:33
    zhan-ge starred japgolly/scalacss
  • Dec 11 2018 04:36
    jasonqu starred japgolly/scalacss
  • Dec 10 2018 20:41
    benhanna starred japgolly/scalacss
  • Dec 09 2018 20:13
    kazievab starred japgolly/scalacss
  • Nov 06 2018 14:43
    gbogard starred japgolly/scalacss
  • Nov 03 2018 19:25
    ryneflood starred japgolly/scalacss
  • Oct 31 2018 05:12

    japgolly on master

    typed user-select attribute val… Merge pull request #137 from Fr… (compare)

  • Oct 31 2018 05:12
    japgolly closed #137
  • Oct 31 2018 05:12
    japgolly commented #137
Andreas Gies
@atooni
Hello, sorry if that is a stupid question. I am looking into integrating ScalaCSS into our App, which works fine so far. I am wondering if I could "magically" variables coming from bootstrap; i.e. something like "@bootstrap-height"
Ryan Williams
@ryan-williams

working through the docs, similar problem to that discussed above, in order to get

println( MyStyles.render )

to compile i needed to import these implicits:

import scalacss.DevDefaults.{ cssEnv, cssStringRenderer }
now i'm missing how to actually add these styles to my page… :) i assume it's simple but i can't find info in the docs. I see some installStyles APIs and things…

looks like

import scalacss.defaults.PlatformExports._
installStyle(
  createStyleElement(
    MyStyles.render
  )
)

works

Robert Elliot
@Mahoney
Hi all - is there an existing sbt plugin for generating css files from scalacss static styles?
Yeshwanth Kumar
@morpheyesh
does scalacss support flex?
mla310
@mla310

hey all! i'm having trouble trying to replicate this css logic:

.container input:checked ~ .checkmark:after {
    display: block;
}

anyone could offer a hand on how to do this? :)

Abdhesh Kumar
@abdheshkumar
Hi All, how to define transition css property?
Abdhesh Kumar
@abdheshkumar
Is there a way to generate below css using scalacsss?
root: {
    lineHeight: '1.4em',
    boxSizing: 'border-box',
    minWidth: 88,
    minHeight: 36
}
Kurtis Melby
@kurtome
@abdheshkumar in an inline stylesheet i do this for an animation:
    val fadeIn = keyframes(
      (0 %%) -> keyframe(opacity(0)),
      (100 %%) -> keyframe(opacity(1))
    )

    val animatedElemente = style(
      animation := s"${fadeIn.name.value} 0.5s",
      opacity(1)
    )
Abdhesh Kumar
@abdheshkumar
@KurToMe Thanks. this way is already with scalacss. if you see my example, that is a kind of json but scalacss generate pure css style code.
actually I was trying to an implement http://cssinjs.org/?v=v9.8.0#example using scalacss
Kurtis Melby
@kurtome
oh hmm, i have a hacky way of turning inline scalacss classes into json elements, but it doesn't work for everything
basically i use it to write my css using scalacss and then use it as the style prop on a React component which expects the css to be a js object.
not sure if this is helpful....
  /**
    * snake-case-string to camelCaseString
    *
    * <p>Note that a leading - will produce a leading capital, for example:
    *   -webkit-animation-delay  =>  WebkitAnimationDelay
    */
  def snakeToCamel(snake: String): String = {
    snake
      .split("-")
      .zipWithIndex
      .foldRight("")((strAndIndex, word) =>
        if (strAndIndex._2 == 0) strAndIndex._1 + word else strAndIndex._1.capitalize + word)
  }

  implicit val dynamicRenderer = new Renderer[Map[String, js.Dynamic]] {
    override def apply(css: Css) = {
      css map {
        case style: CssEntry.Style =>
          val jsStyle = js.Dynamic.literal()
          style.content.foreach(kv => {
            // js representation of CSS rules should be camel case, like lineHeight, etc.
            val jsKey = snakeToCamel(kv.key)
            jsStyle.updateDynamic(jsKey)(kv.value)
          })
          style.sel.replace(".", "") -> jsStyle
        case x => throw new IllegalArgumentException("unsupported " + x.toString)
      } toMap
    }
  }

  /**
    * Renders a stylesheet into a map of javascript objects keyed by classname.
    * This does not support styles with {@code addClassName} method on ScalaCss.
    *
    * @return
    */
  def styleObjsByClassName(styleSheet: StyleSheet.Inline): Map[String, js.Dynamic] = {
    styleSheet.render[Map[String, js.Dynamic]]
  }
Abdhesh Kumar
@abdheshkumar
@KurToMe thank you so much for posting a sample code. I will try to test and let you know.
Victor Ivri
@vivri

Hey guys! Quick question about introducing a keyframe animation. I've taken this approach to fading-in elements: https://stackoverflow.com/a/39669911 and adopted it to ScalaCSS:

 val fadeIn = style(
    opacity(1),
    animationName(
      keyframes(
        (0 %%)   -> keyframe(opacity(0)),
        (100 %%) -> keyframe(opacity(1))
      )
    ),
    animationDuration(1 second),
    animationIterationCount.count(1),
    animationTimingFunction.easeIn
  )

  val btn = fadeIn + style(
    addClassNames("btn-lg","btn","btn-outline-light","btn-block"),
    whiteSpace.normal
  )

val paragraph = fadeIn + style(
    addClassNames( "container-fluid","h4","text-light"),
  )

As you see, I'm trying to fade-in some elements. The elements also use Bootstrap 4. I'm not seeing any animations :( Any ideas why?

Victor Ivri
@vivri
^ this is odd, since inserting the raw css works.
Otto Chrons
@ochrons
does the generated CSS look ok?
Victor Ivri
@vivri
@ochrons the generated css has no animations; I can try and debug this and/or submit a bug report later
Todd O'Bryan
@toddobryan
Does the bottom example on this page still work? https://japgolly.github.io/scalacss/book/ext/react.html
I'm trying to use ScalaCSS in ScalaJS-React and I'm getting a type error. The equivalent of MyComponent with a render_P method says I should be returning a VdomNode, but I'm returning a TagOf[html.Div].
Todd O'Bryan
@toddobryan
I can fix that by putting a .render inside the render_P, but the component doesn't have a render method. Trying with renderIntoDOM.
Todd O'Bryan
@toddobryan
OK. I think I figured out the problem. IntelliJ was being nice about imports, but missed the implicits. :-(
On the other hand, I think that example is out of date. Or at least I couldn't get it to to work, even with all the implicits in scope.
elyphas
@elyphas
Hi, someone could tell me why this code doesn't works fine?
//val bootstrapDiv = style( //Para mostrar resultados de busquedas en catalogos
  def bootstrapDiv( marginL: Int ) = styleS( //Para mostrar resultados de busquedas en catalogos
    addClassName("row row-eq-height col-md-6 col-md-offset-1"),
    clear.both,
    fontSize(100 %%),
    //marginLeft(300.px),
    marginLeft(marginL.px),
    marginTop(9 %%),
    padding(1.px),
    //display.inline,
    overflow.scroll,
    height(200.px),
    position.absolute,
    border(1.px, solid, c"#20B2AA")
  )
bjenkinsgit
@bjenkinsgit

I'm using ScalaCSS and have inner Style objects inside of components like so:

object ActiveACardsPage {
  object Style extends StyleSheet.Inline {
    import dsl._

    val pageWrapper = style("page-wrapper")(padding:=!"0 15px",minHeight(568.px),backgroundColor(c"#fff"),
      media.minWidth(768.px)(
        position.inherit,margin:=!"0 0 0 250px",padding:=!"0 30px",borderLeft:=!"1px solid #e7e7e7"
      )
    )
  }
etc...

but when I try to use it in a component further on in the same source file like so:

<.div(Style.pageWrapper, ^.id := "page-wrapper",

I get the compile error of Type mismatch, expected TagMod, actual: scalacss.StyleA

Otto Chrons
@ochrons
do you have scalacss react extensions? https://japgolly.github.io/scalacss/book/ext/react.html
bjenkinsgit
@bjenkinsgit
@ochrons Yep. User error in react extensions. All good now.
bjenkinsgit
@bjenkinsgit
Hey Otto, Where can I find the old Ref type? I've got the following code and Ref is know unknown: val driverSearchInputText = Ref[HTMLInputElement]("driverSearchInputText")
Otto Chrons
@ochrons
I have no clue :)
trepidacious
@trepidacious
Is there an easy way to just stick a "raw" css attr into a style? I want to use -webkit-app-region but I don't want to fork and rebuild the whole scalacss project?
Max Lanin
@sirmax
@trepidacious looks like you’d need to use internal API :\
scalacss.internal.Attr.real("-webkit-app-region") := “drag”
trepidacious
@trepidacious
@sirmax Ah thanks, that seems to work!
Max Lanin
@sirmax
You’re welcome :)
Brandon Elam Barker
@bbarker
Hello - had a somewhat longer question regarding my usage of scalacss widgets from a javascript API so details are posted externally. Short version: it works in the scala.js API, but the identical version only works for the first occurrence of the widget int he JavaScript API. Details at https://stackoverflow.com/questions/54987364/how-to-use-scalacss-in-widgets-from-javascript
Why might this be happening? I probably need to supply more details, so let me know and I'll update.
Anthony Cerruti
@srnb_gitlab
Is there any way to generate an external stylesheet to use with ScalaTags?
Not one internal/in <head>?
Andrew L'Homme
@Auxolust_gitlab
I can't resolve the px value in my stylesheet , what am I doing wrong?
Moritz Bust
@Busti
I am thinking about switching my sass codebase to scalacss, but there is one thing that I could not really find in the docs.
Does scalacss support nesting, the way sass does?
Moritz Bust
@Busti

Because I have gotten really used to doing the following in my scss code:

.tabpane {
  width: 100%;
  height: 100%;

  .tabs {
    display: flex;

    .tab {
      background: red;
      // etc...
    }
  }
}

That is the one thing that I would really miss.
The reason I want to switch to scalacss is that scala overall is a far superior language than sass (if you could even call it that) and that I really need implicits for handling color variables.

pietro909
@pietro909
Hi there, I may be asking a trivial question which is driving me crazy:
how do I turn a StyleA into a js.Object?
jhegedus42
@jhegedus42
hmmm, this is strange :
image.png
seems like a type ?
scalajs-react is 1.3.1
but reactjs itself is 15.5.4
that is a bit "incongruent" ?