Skip to content

Instantly share code, notes, and snippets.

@ryan-senn
Created November 1, 2017 06:58
Show Gist options
  • Save ryan-senn/4eb350f303b584d5767722c1bafcc7cc to your computer and use it in GitHub Desktop.
Save ryan-senn/4eb350f303b584d5767722c1bafcc7cc to your computer and use it in GitHub Desktop.
CSS calc function
module Modules.TrainingPlan.Styles exposing (..)
import Styled exposing (..)
import Styled.Html exposing (..)
import Styled.Selectors
import Styled.Types exposing (..)
import Styles.Component exposing (Component)
import Styles.Modal
import Modules.TrainingPlan.Model exposing (SelectionModal (..))
createLength : String -> Length {}
createLength css =
{ value = css
, length = Compatible
, position = Compatible
, positionShorthand = Compatible
, backgroundSize = Compatible
, backgroundSizeShorthand = Compatible
, borderImageWidth = Compatible
, verticalAlign = Compatible
, auto_length_percentage = Compatible
, length_number = Compatible
, length_number_percentage = Compatible
, length_percentage = Compatible
}
custom : String -> Length {}
custom css =
createLength css
selectionModal : SelectionModal -> Component
selectionModal modal =
case modal of
EditStudentCourseUnitsModal editStudentCourseUnitsModel ->
Styles.Modal.modal
StudentCourseUnitTasksModal studentCourseUnitTasksModel ->
styled Styles.Modal.modal
[ display flex_
, justifyContent center
, Styled.Selectors.select ".modal-lg"
[ maxWidth (percent 100)
, paddingLeft (px 20)
, paddingRight (px 20)
]
, Styled.Selectors.select ".modal-body"
[ overflowY scroll
, maxHeight (custom "calc(100vh - 200px)")
]
, Styled.Selectors.select "> *"
[ flex (int 0) (int 0) auto ]
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment