CSS calc function

Styles.elm

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 ]
                ]